如何在分页的jquery数据表中选择多个复选框?

时间:2013-06-07 09:16:21

标签: php javascript jquery

我正在使用jquery数据表。在那里我使用表格中每行的复选框。现在我希望当用户单击选择表格外的所有链接时,将选择表格中的所有记录。为此,我正在使用此功能。

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

}

这里选择所有链接

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

“frm_charges”是表单的名称和ID。

这是复选框的代码,我在表格中使用。

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

现在我的问题是我有分页,它是从第一页而不是所有页面选择行。Screenshot

3 个答案:

答案 0 :(得分:1)

所以问题是你的javascript只能获得屏幕上的复选框。您需要做的是获取原始表数据中的复选框。在下面的示例中,我获取所有表数据,循环标记复选框并重绘数据表:

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

答案 1 :(得分:1)

试试这个:

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

答案 2 :(得分:0)

您可以参考以下链接,这将提供明确的功能,了解如何实施

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