如何選擇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 
     } 
    } 
    */ 
    } 
}) 

這將是您跟蹤檢查行的邏輯。