How to select multiple checkboxes in paginated jquery datatable?

Question

I am using jquery datatables. There I use a check box for each row inside the table. Now that I want the user to click all the links located outside the table, select all the records in the table. For this, I use this function.

function checkAll(formname, checktoggle) { var checkboxes = new Array(); checkboxes = document[formname].getElementsByTagName('input'); for (var i=0; i<checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = checktoggle; } } } 

Select all links here.

  <a onclick="javascript:checkAll('frm_charges', true);" href="javascript:void(0);">Select All</a> 

"frm_charges" is the name and identifier of the form.

This is the code for the checkbox that I use inside the table.

  <input type="checkbox" value="742" name="charges[]" class="charges" style="opacity: 0; position: absolute; z-index: -1; visibility: hidden;"> 

Now my problem is that I have pagination, it is the selection of lines from the first page, but not on all pages.

Answer 1

Try the following:

 $(function () { var oTable = $('#datatable').dataTable(); $('#selectall').click(function () { var checkall =$('.main_table').find(':checkbox').attr('checked','checked'); $.uniform.update(checkall); }); }); $(function () { var oTable = $('#datatable').dataTable(); $('#deselectall').click(function () { //alert('hi'); var checkall =$('.main_table').find(':checkbox').attr('checked',false); $.uniform.update(checkall); }); }); 

Answer 2

So the problem is that your javascript only gets checkboxes on the screen. What you need to do is get the checkboxes that are in the source data of the table. In the following example, I get all the data in the table, scroll it around, checking the boxes and redrawing the data table:

 // var oTable - reference to your datatable object var checkboxColumn = 14; // column number that has the checkboxes in it function checkAll(checktoggle) { // get all datatable data var data = oTable.fnGetData(); // loop through all data for (var i in data) { // convert the input into jQuery object var row = $('<div>' + data[i][checkboxColumn] + '</div>'); // Check the boxes as needed row.children('input').attr('checked', (checktoggle) ? 'checked' : false); // update the data in datatables oTable.fnUpdate(row.html(), parseInt(i, 10), checktoggle, false, false); } // redraw the datatable oTable.fnDraw(); } 

Answer 3

You can link to the links below, and this will give a clear functional idea on how to implement

 http://datatables.net/examples/api/form.html