CODEWITHSUNDEEP
phpjavascriptjquery
Amar Banerjee
Amar Banerjee

Reputation: 5012

How to select multiple checkbox in jquery datatable with pagination?

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

Upvotes: 4

Views: 15029

Answers (3)

Moumita
Moumita

Reputation: 360

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

Upvotes: 1

Anil Gupta
Anil Gupta

Reputation: 632

You can refer below links and that will give clear functionality idea how to implement

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

Upvotes: 0

chrislondon
chrislondon

Reputation: 12041

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

Upvotes: 1

Related Questions