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

I am using Datatables (datatables.net) successfully to display all the data I need. But I am having difficulty understanding how to pull out selected column data from a json object. I have failed to JSON.stringify the object, as well as attempt to access the properties of the object directly.

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

The use of the datatables allows the user to select multiple rows and a built in button will perform a submit action to my rails server. I currently cannot access the object to parse the data. I may need a loop and thats fine, but again, I am having difficulty understanding the library on multiple select.

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

I have successfully console.log the object and verified the data I want is present. I currently want the 1 index of Array[12] for n selected rows. I have figured out how to provide a count of the selected rows, so I can parse the object using the count as a loop limiter. But again my attempts have failed.

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

Console.log object:

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

Code:

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

} );

1 个解决方案

#1

So using datatables I was able to get the selected row count. From that I parse the object through a loop for the first row entries.

因此,使用数据表,我能够获得所选的行数。从那里我通过第一行条目的循环解析对象。

Finally I call on the reduced array for the position value that I want (in this case position 1 is my Record ID field, more if you want) and push it to a new array.

最后,我调用减少的数组来获取我想要的位置值(在这种情况下,位置1是我的记录ID字段,如果需要,可以更多)并将其推送到新数组。

From that you submit to your traditional controller for processing.

从那里你提交给你的传统控制器进行处理。

Hope this helps those trying to pass selected Row Data

希望这有助于那些尝试传递所选行数据的人

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

} );