正文
Pagination.js + Sqlite web系统分页
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前端使用 jquery pagination.js 插件。
环境准备：jquery.js、pagination.js、pagination.css
附件下载：https://files.cnblogs.com/files/motion/pagination.rar
引用的顺序一定是 jquery在 pagination的前面。
然后，操作方法可以写在闭包函数里。
第一步，在自己需要展示分页控件的地方创建个div 容器
<div class="card-body rec-pat p-0">
<div id="page_focus"></div>
</div>
然后使用 pagination.js 的方法初始化组件。
$(function () {
var pageIndex = 1; //页面索引初始值
var pageSize = 8; //每页显示条数初始化，修改显示条数，修改这里即可
$("#page_focus").pagination({
dataSource: function (done) {
var result = [];
$.ajax({
cache: false,
type: "post",
dataType: "json",
url: "/Home/GetTotalFocusPageCount",
async: false,
error: function () {
//showTip("提示", "发生未知错误，课程获取失败", "error", "toast-top-right");
return false;
},
success: function (data) {
for (var i = 1; i < data; i++) {
result.push(i);
}
done(result);
}
});
},
pageSize: pageSize,
totalNumber: 120,
showGoInput: true,
showGoButton: true,
callback: function (data, pagination) {
PageCallback(data, pagination);
}
})
//翻页调用
function PageCallback(index, jq_page) {
initTable(jq_page.pageNumber, jq_page.pageSize);
}
})
/**init table */
function initTable(pageIndex, pageSize) { $.ajax({
cache: false,
type: "post",
dataType: "json",
url: "/Home/GetInitTable",
data: { pageIndex: pageIndex, pageSize: pageSize },
async: false,
error: function () {
//showTip("提示", "发生未知错误，课程获取失败", "error", "toast-top-right");
return false;
},
success: function (data) {
if (data != null) {
$("#selectDataBody").html("");
$("#selectDataBody").append(template("userdefine_template", data)); }
}
});
pagination初始化的方法很多，官网上有很详细的教程。这里先介绍我所使用的这种方法。
首先是 dataSource参数，这里通过后台，获取总数据条数。 这个 /Home/GetTotalFocusPageCount 路由请求后返回的结果是总记录数，是个int型变量。后台的方法根据实际需要，见仁见智，没有标准写法。
public int GetTotalFocusPageCount(string userID)
{
try
{
int toalCount = 0; string strSql = $"SELECT count(*) from MyFocus where userid='{userID}'"; DataTable dt_Sqlect = sqliteHelper.GetSelectTable(strSql); if (dt_Sqlect.Rows[0][0] != null)
{
toalCount = Convert.ToInt32(dt_Sqlect.Rows[0][0].ToString());
} return toalCount;
}
catch (Exception ex)
{
LogInfoHelper.LogError(ex.Message, userID, "GetUserFocus");
return 0;
}
}
后台返回总记录条数后，循环给数组result 赋值，然后调用 done(result);这个done 在一开始方法定义就是一个参数
function (done) {}；这个是pagination 自带的写法，要注意。这个方法会帮助根据 每页的条数计算出总页数，然后渲染到页面。
到这里页面渲染都可以了。
然后就是点击下一页的事件了，
也就是 callback 回调节点
callback: function (data, pagination) {
initTable(pagination.pageNumber,pagination.pageSize);
}
/**init table */
function initTable(pageIndex, pageSize) { $.ajax({
cache: false,
type: "post",
dataType: "json",
url: "/Home/GetInitTable",
data: { pageIndex: pageIndex, pageSize: pageSize },
async: false,
error: function () {
//showTip("提示", "发生未知错误，课程获取失败", "error", "toast-top-right");
return false;
},
success: function (data) {
if (data != null) {
$("#selectDataBody").html("");
$("#selectDataBody").append(template("userdefine_template", data)); }
}
});
这里，通过ajax 向后台传参数 pageIndex和pageSize，后台根据参数查询相应页面的数据，返回数据集合，js再渲染到页面，整个分页流程就算完成了。
public string GetInitTable(int pageIndex, int pageSize)
{
try
{
pageIndex = pageIndex - 1;
string strSql_data = @$" SELECT * FROM [FinanceData] where 1=1
LIMIT {pageSize} offset {pageIndex * pageSize};"; DataTable dt_Sqlect = sqliteHelper.GetSelectTable(strSql_data); string JsonStringResult = string.Empty;
JsonStringResult = JsonConvert.SerializeObject(dt_Sqlect); return JsonStringResult;
}
catch (Exception ex)
{
LogInfoHelper.LogError(ex.Message, "GetInitTable)");
return "";
}
}
