ASP.NET + EasyUI实现真分页查询

在系统开发中，如果数据库中某数据表的数据量较大，那么在前端界面进行分页显示是必须的。前端的分页显示一般有两种形式，一种是假分页，即：首先查询出全部数据，然后选取第m到第n条数据进行显示，该方法虽然能够起到分页的作用，但在数据量较大时前端界面会有明显的卡顿，个人认为这种做法纯属掩耳盗铃！另一种分页方式则是真分页，个人比较推荐这种方式。下面以EasyUI为例，介绍一下如何实现EasyUI下的真分页显示。
1、数据库表记录
数据库中存在一张TPoint数据表，用以存放村名信息，共有14000+条记录。
在这里插入图片描述
2、搭建前端界面
前端界面主要利用easyui的datagrid组件进行数据显示，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>EasyUI分页</title>
    <link href="lib/easyui/themes/metro-green/easyui.css" rel="stylesheet" />
    <link href="lib/easyui/themes/icon.css" rel="stylesheet" />
    <script src="lib/easyui/jquery.min.js"></script>
    <script src="lib/easyui/jquery.easyui.min.js"></script>
    <script src="lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="dg" class="easyui-datagrid"></table>

    <script>
        $(document).ready(function ()
        {
            $('#dg').datagrid({
                url: 'ashx/QueryHandler.ashx',
                fit: true,
                fitColumns: true,
                pagination: true,
                rownumbers: true,
                singleSelect: false,
                striped: true,
                idField: 'Id',
                pageNumber: 1,
                pageSize: 50,
                pageList: [50, 100, 200, 500],
                columns: [[
                    { field: 'Id', title: '编号', align: 'center', width: 200 },
                    { field: 'Name', title: '村名', align: 'center', width: 200 },
                    { field: 'Kind', title: '类型', align: 'center', width: 200 },
                    { field: 'X', title: '经度', align: 'center', width: 200 },
                    { field: 'Y', title: '纬度', align: 'center', width: 200 }
                ]]
            });
        });
    </script>
</body>
</html>

3、后台分页查询
这里需要注意，easyui的datagrid组件会给后台传递两个参数，即：page和rows。page表示datagrid的页数索引，rows表示datagrid每页显示的数量，我们可以在后台获取它们。

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication1.ashx
{
    /// <summary>
    /// QueryHandler 的摘要说明
    /// </summary>
    public class QueryHandler : IHttpHandler
    {
        string connectionString = "Data Source=DSF-PC;Initial Catalog=DbTest;User ID=sa;Password=123456";

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 获取EasyUI参数
            int page = int.Parse(context.Request.Params["page"]);
            int rows = int.Parse(context.Request.Params["rows"]);
            int total = 0;

            // 获取数量
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                connection.Open();
                SqlCommand command = new SqlCommand();
                command.Connection = connection;
                command.CommandText = "select count(*) from [TPoint]";
                total = Convert.ToInt32(command.ExecuteScalar());
            }

            // 分页查询
            DataTable dataTable = new DataTable();
            string commandText = "select * from(select ROW_NUMBER() OVER(Order by Id) as RowId, *from TPoint) as b where b.Id BETWEEN (@pageIndex - 1) * @pageSize + 1 and @pageIndex * @pageSize order by Id";
            using (SqlDataAdapter adapter = new SqlDataAdapter(commandText, connectionString))
            {
                SqlParameter[] parameters = new SqlParameter[]
                    {
                        new SqlParameter("@pageIndex", page),
                        new SqlParameter("@pageSize", rows)
                    };
                adapter.SelectCommand.Parameters.AddRange(parameters);
                adapter.Fill(dataTable);
            }
          
            // 传递给前端的数据
            var data = new
            {
                total = total,
                rows = dataTable
            };
            context.Response.Write(JsonConvert.SerializeObject(data));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

大功告成！结果如下图所示：
在这里插入图片描述

HerryDong

发布了99 篇原创文章 · 获赞 16 · 访问量 3万+

私信关注

ASP.NET + EasyUI实现真分页查询

猜你喜欢