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 "";
            }
        }