Datatablesから複数の選択された行のhtmlデータを取得

Question

私は必要なすべてのデータを表示するためにDatatables（datatables.net）を使用しています。しかし、私はjsonオブジェクトから選択した列データを引き出す方法を理解するのが難しいです。私は、オブジェクトのJSON.stringifyに失敗し、オブジェクトのプロパティに直接アクセスしようとしました。

データテーブルを使用すると、ユーザーは複数の行を選択でき、組み込みボタンは、自分のレールサーバーに送信アクションを実行します。私は現在、データを解析するオブジェクトにアクセスすることはできません。私はループが必要かもしれませんが、もう一度、私は複数選択でライブラリを理解するのが難しいです。

私は正常にconsole.logオブジェクトを持って、私が望むデータが存在することを確認しました。私は現在、選択されたn行に対してArray [12]の1つのインデックスが必要です。私は選択された行のカウントを提供する方法を考え出したので、ループリミッタとしてカウントを使用してオブジェクトを解析できます。しかし、やはり私の試みは失敗しました。

CONSOLE.LOGオブジェクト：

[Array[12], Array[12], Array[12], context: Array[1], selector: Object, ajax: Object, colReorder: Object, keys: Object] 
    0:Array[12]0:""1:"36"2: 

コード：

$(document).ready(function() { 
$('.stay').DataTable({ 
    dom: "<'row'<'col-sm-8'B><'col-sm-4'f>>"+ 'rt' + "<'row'<'col-sm-6'i><'col-sm-6'p>>", 
    buttons: [ 
    'selectNone', 
    'selectAll', 
    { 
     extend: 'selected', 
     text: 'Assign Rooms', 
     action: function (e, dt, node, config) { 
      var rows = dt.rows({ selected: true }).count(); 
      var selected_rows = dt.rows({selected: true}).data(0); 
      console.log(selected_rows); 

      url = window.location; 
      // index = url.indexOf("housekeeper") 
      // alert(index); 
      alert('There are '+rows+'(s) selected in the table'); 
      alert(selected_rows[0]) 
       // $.ajax({ 
       // url: "/BookCreate/?mdate="+mdate+"&phone="+phone, 
       // type: "post", 
       // data: values, 
       // success: function(){ 
       //  alert('Saved Successfully'); 
       // }, 
       // error:function(){ 
       // alert('Error'); 
       // } 
       // }); 
     } 
    }, 
    { 
     extend: 'colvis', 
     text: 'Columns', 
     autoClose: true, 
    }, 
     { 
      extend: 'copy', 
      text:  '<i class="fa fa-files-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'excel', 
      text:  '<i class="fa fa-file-excel-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'csv', 
      text:  '<i class="fa fa-file-code-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'pdf', 
      text:  '<i class="fa fa-file-pdf-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'print', 
      text:  '<i class="fa fa-print"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
    ], 
    columnDefs: [ { 
     visible: false 
    } ], 
    columnDefs: [ { 
     orderable: false, 
     className: 'select-checkbox', 
     targets: 0 
    } ], 

    select: { 
     style: 'os', 
     selector: 'td:first-child', 
     style: 'multi' 
    }, 
    order: [[ 2, 'asc' ]] 
}).on('buttons-action', function (e, buttonApi, dataTable, node, config) { 
    // action put here 
    console.log('Button '+buttonApi.text()+' was activated'); 
});; 

}）。

Answer 1

データテーブルを使用して、選択した行数を取得できました。これから、オブジェクトを最初の行エントリのループにパースします。

最後に、私が望む位置の値の縮小配列を呼び出します（この場合、位置1は自分のレコードIDフィールドで、必要に応じてそれ以上です）、新しい配列にプッシュします。

これを処理するために従来のコントローラに送信します。

希望これは、選択した行データ

$(document).ready(function() { 
$('.stay').DataTable({ 
    dom: "<'row'<'col-sm-8'B><'col-sm-4'f>>"+ 'rt' + "<'row'<'col-sm-6'i><'col-sm-6'p>>", 
    buttons: [ 
    'selectNone', 
    'selectAll', 
    { 
     extend: 'selected', 
     text: 'Assign Rooms', 
     action: function (e, dt, node, config) { 
      var rows = dt.rows({ selected: true }).count(); 
      var selected_rows = dt.rows({selected: true}).data(0); 
      var selected_ids = []; 
      for (i=0; i < rows; i++) { 
       var reduced_object = selected_rows[i]; 
       selected_ids.push(reduced_object[1]); 
      }; 

      console.log(selected_ids); 

      url = window.location; 
      // index = url.indexOf("housekeeper") 
      // alert(index); 
      // alert('There are '+rows+'(s) selected in the table'); 
      // alert(selected_rows[0]) 
       // $.ajax({ 
       // url: "/BookCreate/?mdate="+mdate+"&phone="+phone, 
       // type: "post", 
       // data: values, 
       // success: function(){ 
       //  alert('Saved Successfully'); 
       // }, 
       // error:function(){ 
       // alert('Error'); 
       // } 
       // }); 
     } 
    }, 
    { 
     extend: 'colvis', 
     text: 'Columns', 
     autoClose: true, 
    }, 
     { 
      extend: 'copy', 
      text:  '<i class="fa fa-files-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'excel', 
      text:  '<i class="fa fa-file-excel-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'csv', 
      text:  '<i class="fa fa-file-code-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'pdf', 
      text:  '<i class="fa fa-file-pdf-o"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
     { 
      extend: 'print', 
      text:  '<i class="fa fa-print"></i>', 
      exportOptions: { 
       columns: ':visible' 
      } 
     }, 
    ], 
    columnDefs: [ { 
     visible: false 
    } ], 
    columnDefs: [ { 
     orderable: false, 
     className: 'select-checkbox', 
     targets: 0 
    } ], 

    select: { 
     style: 'os', 
     selector: 'td:first-child', 
     style: 'multi' 
    }, 
    order: [[ 2, 'asc' ]] 
}).on('buttons-action', function (e, buttonApi, dataTable, node, config) { 
    // action put here 
    console.log('Button '+buttonApi.text()+' was activated'); 
});; 

}を渡そうとしたもの）に役立ちます。