jQuery DataTable中的分页无法正常工作

时间:2017-04-19 15:32:38

标签: javascript jquery datatable pagination

一直在冲浪并应用各种解决方案,但问题并没有得到解决。 dataTable不会对表行进行分页

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

我正在使用

jQuery.DataTables 1.10.7和 jQuery v2.1.4

为它创造了一个小提琴: -

https://jsfiddle.net/zdsL44xp/

2 个答案:

答案 0 :(得分:1)

首先需要添加jquery库然后再添加数据库库,它是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(){...});

答案 1 :(得分:0)

试试这个数据表

添加到页面顶部

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

数据表

var dataTable;
$(document).ready(function() {
   dataTable = $('#manufacturer_data').DataTable({ 
               //here's example URL from Codeigniter   
       "ajax": "<?=base_url()?>manufacturer/manufacturer_list",      
   });  
}); 

添加页面底部

<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>