如何选择jQuery数据表中的所有行

Question

我的页面中有两个按钮“全选”和“取消全选”。我需要选择所有的行，当我点击全选按钮并保存ID列表在我的变量。点击取消选择按钮时，应取消选择所有行。我们将如何做到这一点？

 [HttpPost] 
      public ActionResult Action Name(pssing value) 
      { 
       DataTable dataTable = new DataTable(); 

      // my code 
       var MyModel = new List<List<string>>(); 

       foreach (var joblist in Jobs) 
       { 
        var sublist = new List<string>(); 
        sublist.Add(checked.false); 
        sublist.Add(values)); 
        sublist.Add(values)); 
        ....etc 

        baseModel.Add(sublist); 
       } 

       return new DataTableResult(return); 
      } 

HTML：

<table cellpadding="0" cellspacing="0" border="0" class="display" id="AssignJobsTable" width="100%"> 
    <thead> 
     <tr> 
      <th><input type="checkbox" id="selectall"/></th> 
      <th>ID</th> 
      etc ...... 
     </tr> 
    </thead> 

脚本：

$(function(){ 

    // add multiple select/deselect functionality 
    $("#selectall").click(function() { 
      $('.case').attr('checked', this.checked); 
    }); 

    // if all checkbox are selected, check the selectall checkbox 
    // and viceversa 
    $(".case").click(function(){ 

     if($(".case").length == $(".case:checked").length) { 
      $("#selectall").attr("checked", "checked"); 
     } else { 
      $("#selectall").removeAttr("checked"); 
     } 

    }); 
}); 

当我点击全选复选框它不能绑定值形成的控制器。

Answer 1

试试这个

$('table#tableId> tbody > tr').addClass('highlight'); 

$('table#tableId> tbody > tr').removeClass('highlight')addClass('noHeilight'); 

Answer 2

样品台

<table border="1"> 
<tr> 
    <th><input type="checkbox" id="selectall"/></th> 
    <th>Cell phone</th> 
    <th>Rating</th> 
</tr> 
<tr> 
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td> 
    <td>BlackBerry Bold 9650</td> 
    <td>2/5</td> 
</tr> 
<tr> 
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td> 
    <td>Samsung Galaxy</td> 
    <td>3.5/5</td> 
</tr> 

</table> 

示例脚本：

$(function(){ 

    // add multiple select/deselect functionality 
    $("#selectall").click(function() { 
      $('.case').attr('checked', this.checked); 
    }); 

    // if all checkbox are selected, check the selectall checkbox 
    // and viceversa 
    $(".case").click(function(){ 

     if($(".case").length == $(".case:checked").length) { 
      $("#selectall").attr("checked", "checked"); 
     } else { 
      $("#selectall").removeAttr("checked"); 
     } 

    }); 
}); 

Answer 3

您应该设置复选框ID ATTR，把行ID在id attr和使用用于选择和取消选择下面的代码：

$（文件）。就绪（函数（）{

$("#selectall").click(function() { 

     var isSelect; 
     if($(this).is(":checked")) { 
     isSelect=true; 
     }else{ 
     isSelect=false; 
     } 

     $("table tr td input[type=checkbox]").each(function(){ 

      if(isSelect) { 
      $(this).prop('checked', true); 

      SelectedItems+=$(this).val()+":"; 
      }else{ 
      $(this).prop('checked', false); 
      SelectedItems=""; 
      } 
      $("#Result").html(SelectedItems); 

     });   
}); 

}）;

Answer 4

这是我跟踪数据表中所有选定行的方法。

http://www.datatables.net/release-datatables/examples/plug-ins/plugin_api.html

的想法是检查当前页面的用户，选择/取消当前正在观看的行。您将遍历页面的行并将选定的行存储到数组中以供将来参考。

通过这种方法，您可以限制选择/取消选择表中所有行所需的时间。

只显示用户正在看到的视图需要什么。

没有挂断，因为表太忙检查/取消选中每一行。

//stored checked box list 
var result = []; 
var selectAll = false; 

var table5 = $('#example5').dataTable({ 
    'fnDrawCallback':function(oSettings){ 

    var anNodes = this.oApi._fnGetTrNodes(oSettings); 
var anDisplay = $('tbody tr', oSettings.nTable); 

    //write your logic for pagination 
    //example 
    /* 
    $('tbody tr td:first-child input[type=checkbox]').on('click', function(){ 
     if($(this).is(':checked')){ 
     if($.inArray(....) != -1){push result} 
     }else{ 
     if($.inArray(....) != -1){splice result} 
     } 
    } 
    if(selectAll){ 
     for(var i = 0; i < anDisplay.length; i++){ 
      //check if it's in result array 
      //add to the array 
     } 
    }else{ 
     for(var i = 0; i < anDisplay.length; i++){ 
      //check if it's in result array 
      //delete from the array 
     } 
    } 
    */ 
    } 
}) 

这将是您跟踪检查行的逻辑。