Bootstrap table server side pagination
I'm using a Bootstrap table to show users data. Currently it's using client side pagination but I want to use server-side pagination as my record is very huge. It would be highly appreciated if anyone can help me out in it.
<table id="tblsers" data-height="400" style="width: 100%;margin-top:0 !important" class="bTable" data-search="true"></table>
<script>
$(document).ready(function () {
getUsers();
});
function getUsers() {
$.ajax({
type: "POST",
url: "Data.aspx/getUsers",
contentType: "application/json; charset=utf-8",
success: function (response) {
debugger
var table = "";
var $tblRegisteredUsersTbl = $('#tblRegisteredUsers');
if (response == "none") {
$tblRegisteredUsersTbl.bootstrapTable('destroy');
table = "<tr style='font-weight: bold'><td>No records</td></tr>"
$("#tblRegisteredUsers").html(table);
$("#tblRegisteredUsers").children("tbody").css("text-align", 'center');
$("#tblRegisteredUsers").addClass("table table-hover");
} else {
$("#tblRegisteredUsers").children("tbody").css("text-align", 'left');
var registeredUsers = JSON.parse(response.d);
$($tblRegisteredUsersTbl).hide();
$tblRegisteredUsersTbl.bootstrapTable('destroy');
$tblRegisteredUsersTbl.bootstrapTable({
method: 'get',
columns: [
{
field: 'SNo', title: 'S.No', width: 10, align: 'center', sortable: true, formatter: function (value, row, index) {
if (value == null || value == "") {
return ['<span>N/A</span>']
}
return ['<span>' + value
+ '</span>'];
}
},
{
field: 'Name', title: 'User Name', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {
if (value == null || value == "") {
return ['<span>N/A</span>']
}
else {
return value;
}
}
},
{
field: 'Address', title: 'User Address', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {
if (value == null || value == "") {
return ['<span>N/A</span>']
}
else {
return value;
}
}
},
{
field: 'Phone', title: 'User Phone', align: 'center', width: 200, sortable: true, formatter: function (value, row, index) {
if (value == null || value == "") {
return ['<span>N/A</span>']
}
else {
return value;
}
}
},
],
onSort: function (name, order) {
},
data: registeredUsers,
cache: false,
height: 400,
pagination: true,
pageSize: 10,
pageList: [10, 25, 50, 100, 200],
search: true,
showColumns: true,
showRefresh: true,
minimumCountColumns: 2,
});
$($tblRegisteredUsersTbl).fadeIn();
}
},
failure: function (msg) {
showMessage("error", 'Some error occurred\n Please try again !');
}
});
}
</script>
Answer
This SCREAMS for Datatables. It has built-in ajax for doing the query updates you're looking for, plus it has built-in sorting, filtering, paging, etc.
Here's a simple example of an ajax sourced Datatable. You'll also want to look at the styling guide to utilize the Bootstrap CSS.
Finally, regardless of whether or not you use datatables, note that you'll have to accomodate for all the various filters, sorting, etc on your server-side -- that is, the query will have to be able to handle any parameters you want to use to cull your data. The Datatables example has a ready-made example done in PHP, but it's certainly able to talk to any page that returns a JSON object.