<form id="myform" method="post">

<p><b>Selected rows data</b></p>

<pre id="view-rows"></pre>

<p><b>Form data as submitted to the server</b></p>

<pre id="view-form"></pre>

<p><button class="btn btn-danger">View Selected</button><br/></p>

</form>



[removed]

$(document).ready(function() {

 var mytable = $('#mytable').DataTable({

 'ajax': 'data_to_json.php',

 'columnDefs': [

 {

 'targets': 0,

 'checkboxes': {

 'selectRow': true

 }

 }

 ],

 'select': {

 'style': 'multi'

 },

 'order': [[1, 'asc']]

 });

 

 // Handle form submission event 

 $('#myform').on('submit', function(e){

 var form = this;

 

 var rows_selected = mytable.column(0).checkboxes.selected();



 // Iterate over all selected checkboxes

 $.each(rows_selected, function(index, rowId){

 // Create a hidden element 

 $(form).append(

 $('<input>')

 .attr('type', 'hidden')

 .attr('name', 'id[]')

 .val(rowId)

 );

 });



 // FOR DEMONSTRATION ONLY

 // The code below is not needed in production

 

 // Output form data to a console 

 $('#view-rows').text(rows_selected.join(","));

 // Output form data to a console

 $('#view-form').text($(form).serialize());

[removed]