2016-12-30 148 views
1

我正在使用JQuery數據表。我想用複選框添加選擇所有列,以便當我點擊'全選'複選框時,該頁面上的所有複選框應該被選中。選擇所有複選框在JQuery數據表的下一頁不起作用

我使用下面的代碼:

<table id="myTable" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th> Name</th> 
      <th> Type</th> 
      <th> Details</th> 
      <th>Select <input type="checkbox" name="select_all" value="1" id="select-all"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <?php foreach ($test as $data) { ?> 
     <tr> 
      <td><?php echo $data->name; ?></td> 
      <td><?php echo $data->type; ?></td> 
      <td><a href="/details">view details</a></td> 
      <td><input type="checkbox" name="manuf[]" class="sub_chk" data-id="<?php echo $data->id; ?>"></td> 


     </tr> 
     <?php } ?> 
    </tbody> 
</table> 
<script> 
$(document).ready(function(){ 
$('#myTable').DataTable(); 
}); 

$('#select-all').on('click', function(e) { 
if($(this).is(':checked',true)) 
{ 
    $(".sub_chk").prop('checked', true); 
} 
else 
{ 
    $(".sub_chk").prop('checked',false); 
} 
}); 
</script> 

上面的代碼適用於數據表的第一頁,但如果我選擇第二頁,如果我選擇「全選」複選框,它需要我第一頁,而不是選擇第二頁中的複選框。

有沒有解決方案?

回答

1

Working example

的問題來自於排序,你應該包含全部選擇複選框th禁用排序。

希望這會有所幫助。

+1

是的,你說得對,我錯了。我沒有意識到內容被加載到頁面上,我認爲它來自AJAX,因爲它在分頁時確實應該是這樣。 –

+0

@Zakaria Acharki它不工作..讓我再次解釋它有一個jQuery數據表與所有數據和一個複選框的列,其標題有另一個複選框(選擇該頁面上的所有複選框)。如果我在第一頁上,我點擊全部選中所有行。這是正確的,但是當我轉到數據表的下一頁時,標題選擇所有複選框仍然處於選中狀態。如果我取消選擇它,它會將我帶到數據表的第一頁,而不是選擇第二頁的複選框。 – san

+0

我認爲問題來自排序,嘗試禁用具有'select -all'複選框,http://jsfiddle.net/UvjnT/1475/ –

0

我希望這個鏈接可以幫助你解決你的問題。 感謝

http://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/

+0

您有足夠的聲譽來暗示對網站及其網站的熟悉程度期望回答rs是獨立的,不完全依賴於到外部站點的鏈接。請在您的答案中包含該網站的相關部分,並將其總結,並說明與您嘗試回答的具體問題相關的原因以及原因。 –

相關問題