Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
2

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

share|improve this question

3 Answers

up vote 1 down vote accepted

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);
    });
});
share|improve this answer
up vote 0 down vote

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();
}
share|improve this answer
up vote 0 down vote

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

http://datatables.net/examples/api/form.html
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.