前端使用 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 "";  
        }  
    }