Have been surfing and applying various solutions but the problems just isnt being solved. The dataTable doesnt paginate the table rows
$('#rates_table').DataTable({
stateSave: true,
"dom":'<"top"f>rt<"bottom"p><"clear">',
"lengthChange": true,
"pageLength":10,
"order": [[1, "desc"]]
});
Im using
jQuery.DataTables 1.10.7 and jQuery v2.1.4
Created a fiddle for it:-
Need to add jquery library first and then datatable library and it's 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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/3">Betrand Bella Start</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/5">Muchiri Stanley N. Muchiri</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/2">Okore Jumbe More</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/4">Rude Bwoyi</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td>
<td>[email protected]</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,[email protected]"}]" name="item[]"></td>
<td class="sorting_1"><a href="http://localhost/esurance365ec/admin/customers/show/1">Samuel Bepari Jones</a></td>
<td>[email protected]</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). 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. Now if you are adding your script code in header then wrap your code inside $(document).ready(function(){...});. If you are adding the script code at footer then no need of $(document).ready(){...});