asp.net-mvc - 如何选择jquery数据表中的所有行

Question

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

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

网页：

<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 并使用以下代码进行选择和取消选择：

$(文档).ready(函数(){

$("#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
        }
     }
     */
   }
})

这将是您跟踪选中行的逻辑。