Question

我成功使用Datatables（datatables.net）来显示我需要的所有数据。但我很难理解如何从json对象中提取选定的列数据。我没有JSON.stringify对象，也没有尝试直接访问对象的属性。

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

我已成功调试对象并验证了我想要的数据。我目前想要n个选定行的1 [1]索引。我已经弄清楚如何提供所选行的计数，因此我可以使用count作为循环限制器来解析对象。但我的尝试再次失败了。

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' );
} );;

}）;

从数据表中获取多个选定的行html数据

1 个答案: