1

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.

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.

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.

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 Answer 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.

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

} );

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.