我正在使用 Bootstrap 表来显示用户数据。目前它正在使用客户端分页，但我想使用服务器端分页，因为我的记录非常庞大。如果有人可以帮助我，将不胜感激。
<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>