How to select multiple checkbox in jquery datatable with pagination?

Question

I am using jquery datatables. There I am using check box for each row inside the table. Now I want when a user click select all link which is outside of table, will select all records in the table. For that I am using 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;
   }
 }

}

Here select all link is

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

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

This is the code for check box, which I am using 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 I have pagination it is selecting rows from first page but not all page.

Answer 1

So the problem is your javascript is only getting the checkboxes on the screen. What you need to do is get the checkboxes that are in the original table data. In the following example I get all of the table data, loop through it marking the checkboxes and redraw 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 2

Try This:

$(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 3

您可以参考以下链接，这将为您提供清晰的功能提示，以实现

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