how to introduce pagination and sorting for a dynamic html table using javascript?
Question
My html page contains ajax, which helps to create a table dynamically.
<title>Clients</title>
</head>
<body>
<table style="width:100%" id="clients_data">
<caption>Clients</caption>
<tr>
<th>Clients</th>
<th>Number of Sites</th>
<th>Reset the Processing</th>
</tr>
</table>
<script>
var myTable;
$(document).ready(function () {
loadCustomers();
});
function loadCustomers() {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/cache/getCustomers',
dataType: 'json',
success: function(data) {
var rows = [];
$.each(data,function(id,value) {
rows.push('<tr><td><a href="clientSiteInfo.html?client='+id+'">'+id+'</td><td>'+value+'</td><td><button type="button" onclick="reset(\''+id+'\')">Reset</td></tr>');
});
$('#clients_data').append(rows.join(''));
}
});
};
</script>
</body>
</html>
At runtime, i may have 100s of rows populated in the table. How can I add pagination ,sorting fro this table using jquery?
2 answers
solution1
3 2017-10-16 04:34:21
Here is a very basic example using jQuery each() , index() , toggle() , and an Anonymous function . I'm leveraging HTML 5 data-* attributes to keep track of my position and set the number of items to increase/decrease.
You can use plugins or write your own code to make pagination as simple or complex as you would like. Although I would strongly suggest using AJAX to populate your results, as loading 1000's of results to hide/show could potentially slow down a system.
/* Variable Defaults */ var total = $('tbody > tr').length; var position = $('tbody').data('position'); var jump = $('tbody').data('jump'); var paginate = function(position, jump) { /* Show Default Items */ $('tbody > tr').each(function() { /* Variable Defaults */ var index = $(this).index(); /* Condition */ var condition = (index >= position) && (index < position + jump); /* Hide/Show Item */ $(this).toggle(condition); /* Set Disabled Status */ $('.less').prop('disabled', (position - jump) < 0); $('.more').prop('disabled', (position + jump) >= total); }); }; /* Set Default Text */ $('.count').text(jump); /* Init Paginate */ paginate(position, jump); /* Bind Click Events to "Less" and "More" Button */ $('.less, .more').on('click', function() { /* Decrease/Increase Position */ position = $(this).hasClass('less') ? $('tbody').data('position') - jump : $('tbody').data('position') + jump; /* Paginate */ paginate(position, jump); /* Update Position */ $('tbody').data('position', position); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <td>ID</td> <td>Name</td> <td>Email</td> </tr> </thead> <tbody data-position="0" data-jump="2"> <tr> <td>1</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>2</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>3</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>4</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>5</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>6</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>7</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>8</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>9</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> <tr> <td>10</td> <td>Test McTester</td> <td>test@gmail.com</td> </tr> </tbody> </table> <button class="less">Back <span class="count">0</span></button> <button class="more">Forwards <span class="count">0</span></button>
solution2
2 ACCPTED 2017-10-16 03:36:09
You can use Datatables for your purpose : https://datatables.net/examples/basic_init/alt_pagination.html
You can also use Tablesorter : http://tablesorter.com/docs/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.