"jQuery DataTable 中的分頁不起作用"

Question

一直在沖浪和應用各種解決方案，但問題只是沒有得到解決。 dataTable 不對表格行進行分頁

$('#rates_table').DataTable({
    stateSave: true,
    "dom":'<"top"f>rt<"bottom"p><"clear">', 
    "lengthChange": true, 
    "pageLength":10, 
    "order": [[1, "desc"]]
});

Answer 1

需要先添加jquery庫，再添加datatable庫，就是css

你給的代碼對我有用：-

 $('#customers_table').DataTable({ stateSave: true, "dom":'<"top"f>rt<"bottom"p><"clear">', "lengthChange": true, "pageLength":10, "order": [[1, "desc"]] });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script> <table id="customers_table" width="100%" class="display table table-striped dataTable no-footer" border="0" cellpadding="5" role="grid" style="width: 100%;"> <thead> <tr class="header" role="row"> <th align="left" class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 36px;"><input type="checkbox" class="checkall" name="item"></th> <th align="left" class="sorting_asc" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Full Name: activate to sort column descending" style="width: 219px;">Full Name</th> <th align="center" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Email Address: activate to sort column ascending" style="width: 212px;">Email Address</th> <th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Phone: activate to sort column ascending" style="width: 111px;">Phone</th> <th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Policies: activate to sort column ascending" style="width: 83px;">Policies</th> <th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Quotes: activate to sort column ascending" style="width: 80px;">Quotes</th> <th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Date of Registration: activate to sort column ascending" style="width: 192px;">Date of Registration</th> </tr> </thead> <tbody> <tr id="3" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;3,Betrand Bella Start,winchestaer@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/3">Betrand Bella Start</a></td> <td>winchestaer@gmail.com</td> <td>00238482734</td> <td>2</td> <td>3</td> <td>25 Mar 17</td> </tr> <tr id="5" class="even" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;5,Muchiri Stanley N. Muchiri,sngumo@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/5">Muchiri Stanley N. Muchiri</a></td> <td>sngumo@gmail.com</td> <td>722958720</td> <td>1</td> <td>1</td> <td>04 Apr 17</td> </tr> <tr id="2" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;2,Okore Jumbe More,okore@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/2">Okore Jumbe More</a></td> <td>okore@gmail.com</td> <td>072438934</td> <td>0</td> <td>1</td> <td>24 Mar 17</td> </tr> <tr id="4" class="even" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;4,Rude Bwoyi,TRENDA45@YAHOO.COM&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/4">Rude Bwoyi</a></td> <td>TRENDA45@YAHOO.COM</td> <td>5434534</td> <td>0</td> <td>1</td> <td>24 Mar 17</td> </tr> <tr id="1" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;1,Samuel Bepari Jones,samuelstar@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td> <td>samuelstar@gmail.com</td> <td>0743294283</td> <td>0</td> <td>3</td> <td>24 Mar 17</td> </tr> <tr id="12" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;1,Samuel Bepari Jones,samuelstar@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td> <td>samuelstar@gmail.com</td> <td>0743294283</td> <td>0</td> <td>3</td> <td>24 Mar 17</td> </tr> <tr id="9" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;1,Samuel Bepari Jones,samuelstar@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td> <td>samuelstar@gmail.com</td> <td>0743294283</td> <td>0</td> <td>3</td> <td>24 Mar 17</td> </tr> <tr id="6" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;1,Samuel Bepari Jones,samuelstar@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td> <td>samuelstar@gmail.com</td> <td>0743294283</td> <td>0</td> <td>3</td> <td>24 Mar 17</td> </tr> <tr id="7" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;1,Samuel Bepari Jones,samuelstar@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td> <td>samuelstar@gmail.com</td> <td>0743294283</td> <td>0</td> <td>3</td> <td>24 Mar 17</td> </tr> <tr id="10" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;1,Samuel Bepari Jones,samuelstar@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td> <td>samuelstar@gmail.com</td> <td>0743294283</td> <td>0</td> <td>3</td> <td>24 Mar 17</td> </tr> <tr id="11" class="odd" align="left" role="row"> <td><input type="checkbox" class="chkitem" value="[{&quot;function&quot;:&quot;delete&quot;,&quot;params&quot;:&quot;1,Samuel Bepari Jones,samuelstar@gmail.com&quot;}]" name="item[]"></td> <td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td> <td>samuelstar@gmail.com</td> <td>0743294283</td> <td>0</td> <td>3</td> <td>24 Mar 17</td> </tr> </tbody> </table>

筆記：-

1.他的數據中的行數少於10，這也是分頁不會顯示的原因之一（但這並不意味着它不起作用）。 我在代碼中添加了更多數據，以向您展示分頁正在工作

2.@StanleyNgumo 你需要先添加 jQuery 庫，然后是數據表庫，然后是你的腳本代碼。 現在，如果您在標頭中添加腳本代碼，則將代碼包裝在$(document).ready(function(){...}); . 如果您在頁腳添加腳本代碼，則不需要$(document).ready(){...});

Answer 2

試試這個數據表

在頁面頂部添加

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

Answer 3

我認為這里值得一提的是，分頁只適用於格式正確的表格。

要使 DataTables 能夠增強 HTML 表格，表格必須是有效的、格式良好的 HTML，具有標題 (thead) 和單個正文 (tbody)。 也可以使用可選的頁腳 (tfoot)。

該表的結構必須如下：