从 Datatables 中获取 Multiple Selected Row html 数据

Question

我正在成功使用 Datatables (datatables.net) 来显示我需要的所有数据。但是我很难理解如何从 json 对象中提取选定的列数据。我未能 JSON.stringify 对象，以及尝试直接访问对象的属性。

数据表的使用允许用户选择多行，并且内置按钮将对我的 Rails 服务器执行提交操作。我目前无法访问该对象来解析数据。我可能需要一个循环，这很好，但同样，我很难理解多选的库。

我已成功 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' );
} );;

});