c#+easyui实现分页

最新推荐文章于 2024-06-18 01:46:29 发布

沧.海

最新推荐文章于 2024-06-18 01:46:29 发布

阅读量600

点赞数

分类专栏：开发 c# 文章标签： easyui c# 前端

本文链接：https://blog.csdn.net/weixin_42145499/article/details/122973487

版权

c# 同时被 2 个专栏收录

13 篇文章 2 订阅

订阅专栏

开发

8 篇文章 1 订阅

订阅专栏

oracle后端分页

select * from(select a.*,ROWNUM rn from Tablename a where
 ROWNUM<=(firstIndex+pageSize)) where rn>firstIndex

mysql后端分页

select * from TableName limit 10,10

c#后端处理程序代码

public class SMTHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.ContentEncoding = Encoding.UTF8;
            string paramType = string.Empty;
            var page = 0;
            var rowdatas = 0;
            string defdate = string.Empty;
            page = Convert.ToInt32(context.Request.Params["page"].ToString());
            rowdatas = Convert.ToInt32(context.Request.Params["rows"].ToString());
            defdate = context.Request.Params["date"].ToString();
            ResponseData<List<T>> rback = new ResponseData<List<T>>();
            int NUM = 0;
            var result = FindInfo(page, rowdatas, defdate,out NUM);
            rback.IsSuccess = true;
            rback.UserId = NUM.ToString();
            rback.ErrorMsg = "sucsseul";
            rback.ExceptionType = 1;
            rback.Data = result.Data;
            var data = JsonConvert.SerializeObject(rback);
            //后端数据转化为json
            context.Response.Write(data);
        }

前端js初始化界面

function init() {
    $('#two').datagrid(
        {
            title: "数据展示区",
            //定义标题行所有的列，注意这是一个二维数组
            columns: [
                [
                    { title: '名字', field: 'CARD' },
                ]
            ],
            rownumbers: true,
            singleSelect: true,
            //显示分页条
            pagination: true,
            loadMsg: '数据加载中,请稍后……',
            //显示分页的条数
            pageList: [5, 10, 15, 30],
        });

}

js数据显示过滤器

function pagerFilter(data) {
    console.log(data);
    if (typeof data.length == 'number' && typeof data.splice == 'function') {
        data = {
            total: data[0].total,
            rows: data
        }
    }
    var dg = $(this);
    var opts = dg.datagrid('options');
    var pager = dg.datagrid('getPager');
    pager.pagination({
        onSelectPage: function (pageNum, pageSize) {
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            console.log("页数" + pageNum);
            QueryData();
        }
    });
    console.log(data);
    return data;
}

js查询按钮方法

function QueryData() {
    let pageNumber = $('#two').datagrid('options').pageNumber;
    let pageSize = $('#two').datagrid('options').pageSize;
    console.log(pageNumber);
    console.log(pageSize);
    SearchInfo(pageNumber, pageSize);
}

js前端请求方法

function SearchInfo(page, rows) {
    let defdate = $("#date").val();
    $.ajax({
        type: 'POST',
        url: "../../Ashx/SMTHandler.ashx?page=" + page + "&rows=" + rows + "&date=" + defdate,
        success: function (data) {
            let info = JSON.parse(data);
            console.log(info);
            if (info != null) {
                init();
            }
             total = info.UserId;
            var rows = [];
            for (var i = 0; i <= info.Data.length - 1; i++) {
                rows.push({
                    total: info.UserId,
                    CARD: info.Data[i].Card,
                });
            }
            console.log(rows[0].total);
            $('#two').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', rows);
            
        },
    });

前端页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分页查询</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <script src="js/Menu.js"></script>
</head>
<body>

    <div class="easyui-panel" title="功能区" data-options="collapsible:true">
        <div>
            <span>名字</span>
            <input id="date" type="date" style="width:10%" />
            <a id="searchSMT" src="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="QueryData()">查询</a>
            <a id="AddSMT" src="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="AddData()">添加</a>
        </div>
    </div>
    <div>
        <table id="two" class="easyui-datagrid">
        </table>
    </div>
</body>
</html>