Paginate Table Rows With JQuery
We are working with Customer Portal in Dynamics 365. I have to use a pagination plugin with existant data in the HTML table. The current code:
Solution 1:
After a lot of researching I found a posible solution with Pagination.js.
let rows = []
$('table tbody tr').each(function(i, row) {
return rows.push(row);
});
$('#pagination').pagination({
dataSource: rows,
pageSize: 1,
callback: function(data, pagination) {
$('tbody').html(data);
}
})table {
border: 1px solid black;
}
th, td {
border: 1px solid black;
}
td {
padding: 5px;
}
#pagination {
width: 100%;
text-align: center;
}
#pagination ul li {
display: inline;
margin-left: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody id="data-container">
<tr>
<td>Column 1: Row 1</td>
<td>Column 2: Row 1</td>
<td>Column 3: Row 1</td>
<td>Column 4: Row 1</td>
</tr>
<tr>
<td>Column 1: Row 2</td>
<td>Column 2: Row 2</td>
<td>Column 3: Row 2</td>
<td>Column 4: Row 2</td>
</tr>
<tr>
<td>Column 1: Row 3</td>
<td>Column 2: Row 3</td>
<td>Column 3: Row 3</td>
<td>Column 4: Row 3</td>
</tr>
</tbody>
</table>
<div id="pagination"></div>Still, I don't make this work since the .pagination() method is not working even if loaded the script with $.getScript('url', function() {}); or document.createElement('script') but I think this is a different issue and post...
Post a Comment for "Paginate Table Rows With JQuery"