[英]Pagination in jQuery DataTable not working
Have been surfing and applying various solutions but the problems just isnt being solved.一直在冲浪和应用各种解决方案,但问题只是没有得到解决。 The dataTable doesnt paginate the table rows dataTable 不对表格行进行分页
$('#rates_table').DataTable({
stateSave: true,
"dom":'<"top"f>rt<"bottom"p><"clear">',
"lengthChange": true,
"pageLength":10,
"order": [[1, "desc"]]
});
Need to add jquery library first and then datatable library and it's css需要先添加jquery库,再添加datatable库,就是css
You given code worked for me:-你给的代码对我有用:-
$('#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="[{"function":"delete","params":"3,Betrand Bella Start,winchestaer@gmail.com"}]" 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="[{"function":"delete","params":"5,Muchiri Stanley N. Muchiri,sngumo@gmail.com"}]" 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="[{"function":"delete","params":"2,Okore Jumbe More,okore@gmail.com"}]" 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="[{"function":"delete","params":"4,Rude Bwoyi,TRENDA45@YAHOO.COM"}]" 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="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar@gmail.com"}]" 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="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar@gmail.com"}]" 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="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar@gmail.com"}]" 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="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar@gmail.com"}]" 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="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar@gmail.com"}]" 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="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar@gmail.com"}]" 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="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar@gmail.com"}]" 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>
Note:-笔记:-
1.he rows count in your data is less than 10, that is also one reason that pagination will not show (but it doesn't mean that it will not work). 1.他的数据中的行数少于10,这也是分页不会显示的原因之一(但这并不意味着它不起作用)。 I have added more data in code to show you that pagination is working我在代码中添加了更多数据,以向您展示分页正在工作
2.@StanleyNgumo you need to first add jQuery library and then data-table library and then your script code. 2.@StanleyNgumo 你需要先添加 jQuery 库,然后是数据表库,然后是你的脚本代码。 Now if you are adding your script code in header then wrap your code inside $(document).ready(function(){...});
现在,如果您在标头中添加脚本代码,则将代码包装在$(document).ready(function(){...});
. . If you are adding the script code at footer then no need of $(document).ready(){...});
如果您在页脚添加脚本代码,则不需要$(document).ready(){...});
Try this data table试试这个数据表
add on the top of your page在页面顶部添加
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
I think it's worth mentioning here that the pagination will only work with a properly formatted table.我认为这里值得一提的是,分页只适用于格式正确的表格。
For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a single body (tbody).要使 DataTables 能够增强 HTML 表格,表格必须是有效的、格式良好的 HTML,具有标题 (thead) 和单个正文 (tbody)。 An optional footer (tfoot) can also be used.也可以使用可选的页脚 (tfoot)。
<\/blockquote>The table must be structured like this:该表的结构必须如下:
<table id="table_id" class="display"> <thead> <tr> <th>Column 1<\/th> <th>Column 2<\/th> <\/tr> <\/thead> <tbody> <tr> <td>Row 1 Data 1<\/td> <td>Row 1 Data 2<\/td> <\/tr> <tr> <td>Row 2 Data 1<\/td> <td>Row 2 Data 2<\/td> <\/tr> <\/tbody> <\/table><\/code><\/pre>"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.