ASP.NET下的B/S模式分页的3种方式:前端分页,后台分页,数据库分页

分类：Asp作者：佚名

本文仅介绍ASP.NET下的分页功能,涉及到的技术有C#,html,css,javascript,jquery,SQLServer

分页一般有3种方式,前端分页,后端分页,数据库分页,本文会一一说明

1.前端分页
前端分页主要的分页逻辑均在前端实现,后台只提供数据,页面初始化时,将数据赋予前端定义好的变量即可,格式为json,下面给出各端实现逻辑

数据库:

CREATE TABLE t_user(
	us_id INT IDENTITY(1,1) PRIMARY KEY,
	us_name VARCHAR(100),
	us_sex VARCHAR(2),
	us_age INT,
	us_phone VARCHAR(20),
	us_address VARCHAR(300)
)

INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小明','男',25,'13111111111','上海市浦东新区1号区')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小红','女',23,'13222222222','上海市青浦区1号区')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小李','女',22,'13333333333','上海市青浦区2号区')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小哄','女',21,'13111112222','上海市青浦区3号区')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小玉','女',13,'13222222222','上海市青浦区5号区')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小红','女',23,'13222222222','上海市浦东新区2号区')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小小','男',33,'13224422222','上海市男区3号区')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小王','男',43,'13224422222','北京')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小华','男',13,'13224423221','湖北')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小三','女',23,'13224422222','湖南')
INSERT INTO t_user(us_name,us_sex,us_age,us_phone,us_address)
VALUES('小贝','女',22,'13224422222','湖南二区')

在这里插入图片描述

后端:

using System;
using System.Data;
using System.Data.SqlClient;
using System.Text;

namespace WebAppTest
{
    public partial class WebFormTest : System.Web.UI.Page
    {
        public string testData;

        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection sqlConnection = new SqlConnection("Server=.;user=sa;pwd=guobei;database=testDB");
            sqlConnection.Open();
            SqlCommand sqlCommand = new SqlCommand("SELECT * FROM t_user", sqlConnection);
            SqlDataAdapter sda = new SqlDataAdapter(sqlCommand);
            DataTable dt = new DataTable();
            sda.Fill(dt);

            testData = table2json(dt);
        }

        public static string table2json(DataTable dt)
        {
            StringBuilder sb = new StringBuilder("[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                sb.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    if (j == dt.Columns.Count - 1)
                    {
                        sb.Append("\"" + dt.Columns[j].Caption + "\":\"" + dt.Rows[i][j].ToString() + "\"");
                    }
                    else
                    {
                        sb.Append("\"" + dt.Columns[j].Caption + "\":\"" + dt.Rows[i][j].ToString() + "\",");
                    }

                }
                if (i == dt.Rows.Count - 1)
                {
                    sb.Append("}");
                }
                else
                {
                    sb.Append("},");
                }
            }
            sb.Append("]");
            return sb.ToString();
        }
    }
}

前端:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormTest.aspx.cs" Inherits="WebAppTest.WebFormTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">


    </style>
</head>
<body>
    <table id="testTable">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>电话</td>
            <td>地址</td>
        </tr>
    </table>

    <div>
        第<span id="currentPage">1</span>页/总<span id="totalPage">1</span>页|总<span id="totalCount">0</span>条 &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:void(0);" onclick="pageTo('top')">首页</a> &nbsp;&nbsp;
        <a href="javascript:void(0);" onclick="pageTo('next')">下一页</a>&nbsp;&nbsp;
        <a href="javascript:void(0);" onclick="pageTo('pre')">上一页</a>&nbsp;&nbsp;
        <a href="javascript:void(0);" onclick="pageTo('bottom')">末页</a>&nbsp;&nbsp;
        <input id="page" name="page" value="" style="width:50px;"/>
        <a href="javascript:void(0);" onclick="pageTo('assign')">确定</a>&nbsp;&nbsp;
    </div>
</body>

<script src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
    var pageCount = 5;  //每页显示数量
    var totalPage;      //总页数
    var totalCount;     //总条数
    //后台给的数据
    var testData = eval("(" + '<% =testData%>' + ")");

    window.onload = function () {
        //根据给定的数据初始化总页数和总条数
        totalCount = testData.length;
        totalPage = Math.ceil(totalCount / pageCount);
        //将后台给定的数据testData填充至testTable中
        $("#totalPage").text(totalPage);
        $("#totalCount").text(totalCount);

        dataFill();
    }

    function pageTo(operator) {
        if (operator == "top") {
            $("#currentPage").text("1");
            dataFill();
        }
        else if (operator == "next") {
            if ($("#currentPage").text() != $("#totalPage").text()) {
                $("#currentPage").text(parseInt($("#currentPage").text()) + 1);
                dataFill();
            }
        }
        else if (operator == "pre") {
            if ($("#currentPage").text() != "1") {
                $("#currentPage").text(parseInt($("#currentPage").text()) - 1);
                dataFill();
            }
        }
        else if (operator == "bottom") {
            $("#currentPage").text($("#totalPage").text());
            dataFill();
        }
        else if (operator == "assign") {
            if (parseFloat($("#page").val()).toString() != "NaN") {
                if (parseInt($("#page").val()) < 1) {
                    $("#currentPage").text("1");
                }
                else if (parseInt($("#page").val()) > parseInt($("#totalPage").text())) {
                    $("#currentPage").text($("#totalPage").text());
                }
                else {
                    $("#currentPage").text($("#page").val());
                }
                dataFill();
            }
            
        }
        
    }

    function dataFill() {
        //去掉除第一个tr后面的所有tr元素
        $("#testTable tr:gt(0)").remove();

        //填充的行
        var dataContent = "";

        //根据当前页确定需要从第几位下标开始取数据,目前设定的每页显示3条
        //则第一页时,pageNow为0
        //第二页时,pageNow为3
        var pageNow = (parseInt($("#currentPage").text()) - 1) * pageCount;

        //计数器,循环中使用,执行到每页定义的条数时跳出
        var count = 0;

        for (var i = pageNow; i < testData.length; i++) {
            dataContent += "<tr>";
            dataContent += "<td>" + testData[i].us_id + "</td>";
            dataContent += "<td>" + testData[i].us_name + "</td>";
            dataContent += "<td>" + testData[i].us_sex + "</td>";
            dataContent += "<td>" + testData[i].us_age + "</td>";
            dataContent += "<td>" + testData[i].us_phone + "</td>";
            dataContent += "<td>" + testData[i].us_address + "</td>";
            dataContent += "</tr>";
            
            if (count == pageCount - 1) {
                break;
            }

            count += 1;
        }
        
        $("#testTable").append(dataContent);

    }
</script>

</html>

效果展示:

在这里插入图片描述

以上为前端分页功能,是没有做封装的,有需要的小伙伴可以自行做封装,方便到一行代码即可实现分页

2.后台分页
后台分页功能是将分页逻辑放置后台实现,同样,数据库只提供数据,数据库不动

后台

using System;
using System.Data;
using System.Data.SqlClient;
using System.Text;

namespace WebAppTest
{
    public partial class WebFormTest : System.Web.UI.Page
    {
        //当前页
        public int currentPage;
        //每页显示数
        public int pageCount = 5;
        //总页数
        public int totalPage;
        //总条数
        public int totalCount;
        public DataTable dt= new DataTable();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                currentPage = Convert.ToInt32(Request["currentPage"]);
            }
            else
            {
                currentPage = 1;
            }

            SqlConnection sqlConnection = new SqlConnection("Server=.;user=sa;pwd=guobei;database=testDB");
            sqlConnection.Open();
            SqlCommand sqlCommand = new SqlCommand("SELECT * FROM t_user", sqlConnection);
            SqlDataAdapter sda = new SqlDataAdapter(sqlCommand);
            sda.Fill(dt);

            //初始化分页需要的数据
            //总条数
            totalCount = dt.Rows.Count;     
            //总页数
            totalPage = Convert.ToInt32(Math.Ceiling(totalCount * 1.0 / pageCount));

            
        }

        public void showTable()
        {
            //计数器,用于控制循环次数
            int count = 0;
            //Response.Write(currentPage - 1);
            //Response.End();
            for (int i = (currentPage - 1) * pageCount; i < dt.Rows.Count && i>=0; i++)
            {
                Response.Write("<tr>");
                Response.Write("<td>" + dt.Rows[i]["us_id"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_name"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_sex"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_age"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_phone"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_address"].ToString() + "</td>");
                Response.Write("</tr>");

                if (count++ == pageCount - 1)
                {
                    break;
                }
            }
        }

        public void showPage()
        {

            Response.Write("第"+ currentPage + "页/总"+totalPage+"页|总"+totalCount+"条&nbsp;&nbsp;&nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo(1)'>首页</a> &nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo("+ (currentPage + 1>totalPage? totalPage: currentPage + 1) + ")'>下一页</a> &nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo(" + (currentPage - 1 < 1 ? 1 : currentPage - 1) + ")'>上一页</a> &nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo(" + totalPage + ")'>末页</a> &nbsp;&nbsp;");
            Response.Write("<input type='number' id='page' name='page' value='' style='width: 50px;' />");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo($(\"#page\").val())'>确定</a>&nbsp;&nbsp;");
        }
    }
}

前端

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormTest.aspx.cs" Inherits="WebAppTest.WebFormTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">


    </style>
</head>
<body>
    <form id="frmShow" name="frmShow" runat="server">
        <input type="hidden" id="currentPage" name="currentPage" value="<%=Request["currentPage"] %>" />
        <table id="testTable">
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>电话</td>
                <td>地址</td>
            </tr>
            <%showTable(); %>
        </table>

        <div>
            <%showPage(); %>
        </div>
    </form>
</body>

<script src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function pageTo(currentPage) {
        $("#currentPage").val(currentPage);
        $("#frmShow").submit();
    }
</script>

</html>

效果展示

在这里插入图片描述

以上为后端分页功能,同样可以封装后调用,方便实现功能,数据库分页与后台分页类似,只需要调整查询的sql即可,后台仅做数据遍历,前端逻辑不变,下面给出实现

3.数据库分页
后台

using System;
using System.Data;
using System.Data.SqlClient;
using System.Text;

namespace WebAppTest
{
    public partial class WebFormTest : System.Web.UI.Page
    {
        //当前页
        public int currentPage;
        //每页显示数
        public int pageCount = 5;
        //总页数
        public int totalPage;
        //总条数
        public int totalCount;
        public DataTable dt= new DataTable();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                currentPage = Convert.ToInt32(Request["currentPage"]);
            }
            else
            {
                currentPage = 1;
            }

            SqlConnection sqlConnection = new SqlConnection("Server=.;user=sa;pwd=guobei;database=testDB");
            sqlConnection.Open();
            SqlCommand sqlCommand = new SqlCommand("SELECT COUNT(1) FROM t_user", sqlConnection);
            SqlDataAdapter sda = new SqlDataAdapter(sqlCommand);
            sda.Fill(dt);

            //初始化分页需要的数据
            //总条数
            totalCount = Convert.ToInt32(dt.Rows[0][0]);     
            //总页数
            totalPage = Convert.ToInt32(Math.Ceiling(totalCount * 1.0 / pageCount));

            string strSQL = @"
                SELECT * FROM (
                    SELECT ROW_NUMBER() OVER(ORDER BY us_id) AS [index],* FROM t_user
                ) a
                WHERE a.[index] BETWEEN {0} AND {1}
            ";
            strSQL = String.Format(strSQL, (currentPage - 1) * pageCount+1, (currentPage - 1) * pageCount + pageCount);
            Response.Write(strSQL);
            sqlCommand = new SqlCommand(strSQL, sqlConnection);
            sda = new SqlDataAdapter(sqlCommand);
            sda.Fill(dt);
        }

        public void showTable()
        {
            for (int i = 0; i < dt.Rows.Count && i>=0; i++)
            {
                Response.Write("<tr>");
                Response.Write("<td>" + dt.Rows[i]["us_id"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_name"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_sex"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_age"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_phone"].ToString() + "</td>");
                Response.Write("<td>" + dt.Rows[i]["us_address"].ToString() + "</td>");
                Response.Write("</tr>");
            }
        }

        public void showPage()
        {

            Response.Write("第"+ currentPage + "页/总"+totalPage+"页|总"+totalCount+"条&nbsp;&nbsp;&nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo(1)'>首页</a> &nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo("+ (currentPage + 1>totalPage? totalPage: currentPage + 1) + ")'>下一页</a> &nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo(" + (currentPage - 1 < 1 ? 1 : currentPage - 1) + ")'>上一页</a> &nbsp;&nbsp;");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo(" + totalPage + ")'>末页</a> &nbsp;&nbsp;");
            Response.Write("<input type='number' id='page' name='page' value='' style='width: 50px;' />");
            Response.Write("<a href='javascript: void(0);' οnclick='pageTo($(\"#page\").val())'>确定</a>&nbsp;&nbsp;");
        }
    }
}

效果和后台分页是一样的,就不重复展示了,以上就是分页的3种方式,下面谈一下各种分页的好处和坏处以及应用场景

1.前端分页
坏处:若数据较多,第一次进入页面加载时较慢,期间若数据出现变更不会立刻反馈到前端
好处:因为不向后台提交请求,所以翻页会很流畅
应用:若数据量在万级以下,且基本不可能会大量增加的情况下可考虑使用前端分页,比如展示一些网站的配置信息等

2.后台分页
坏处:由于翻页会提交请求,所以翻页时用户体验可能会有不同程度的不流畅感,这取决于用户的网络环境,
好处:可以将查出的数据放入内存,不必每次翻页都去查数据库,生命周期为页级,即离开该页面则释放内存

3:数据库分页
数据库分页其实是最方便的,代码可读性可维护性也是最好的,支持的数据量跟前端分页也不是一个量级的,应用也是最广泛的

原文地址：https://blog.csdn.net/listennerBGM/article/details/115456257

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

asp数组使用
数组的定义 Dim MyArray MyArray = Array(1‚5‚123‚12‚98) 可扩展数组 Dim MyArray() for i = 0 to 10
ASP怎样获得代码中第一张图片地址
\'参数： \'code：要检测的代码 \'leixing：html或者ubb \'nopic：代码没有图片时默认值
asp无限级分类加js收缩伸展功能代码
演示效果： 代码下载： 点击下载
asp中使用mysql数据库的注意实现
环境：winxp sp2 ，mysql5.0.18,mysql odbc 3.51 driver 表采用 myisam引擎。access 2003  不同的地方： 
AJAX教程实例，ASP+AJAX+ACCESS数据库
其实说起AJAX的初级应用是非常简单的，通俗的说就是客户端(javascript)与服务端(asp或php等)脚本语言的数据交互。
asp经典代码语录
<% ’判断文件名是否合法 Function isFilename(aFilename)  Dim sErrorStr,iNameLength,i  isFilename=TRUE
aspcms:navlist 如何限制显示条数？
在调用的时候加入判断就行了. {aspcms:navlist type=0 } {if:[navlist:i]<6} < li><a href=\"[navlist:link]\" target=\"_top\">[navlist:name]</a> </li>
ASPCMS标签教程
导航栏调用 {aspcms:navlist type=0}     <a href=\"[navlist:link]\">[navlist:name]</a>
aspcms 几个特殊使用方法
1.引入外部文件： {aspcms:template src=infobar.html} 2.二级下拉菜单 <ul class=\"nav\">
ASP下载图片，PDF文件等
downpic.asp页面:  <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
Cookies在ASP中的最常用的方法
Cookies是数据包，可以让网页具有记忆功能，在某台电脑上记忆一定的信息。Cookies的工作原理是，第一次由服务器端写入到客户端的系统中。以后每次访问这个网页，都是先由客户端将Cookies发送到服务器端，再由服务器端
ASPCMS根据页面内容自动调用该分类相关的文章或者推荐文章
很简单，在需要调用的地方用这种模式 {aspcms:content sort={aspcms:sortid} num=17 order=isrecommend}
ASP和ACCESS中日期时间比较
网站系统使用ACCESS数据库时，查询时怎么比较日期和时间呢？为什么常常比较出来却是错误的呢？比如早的日期比迟的日期大？
asp判断一个字符串存在于另一个用逗号隔开的字符串中
str1=\"1235,12,23,34,123,21,56,74,1232\" str2=\"12\" 问题：如何判断str2是否存在str1中，要求准确找出12，不能找出str1中的1235、123、1232
kindeditor asp远程图片本地化插件
实例为最新版本的kindeditor 4.1.5. 主要程序： <% Const sFileExt=\"jpg|gif|bmp|png\" Function ReplaceRemoteUrl(sHTML,sSaveFilePath,sFileExt)
ASP实现搜索关键字高亮
用ASP实现搜索引擎的功能是一件很方便的事，可是，如何实现类似3721的智能搜索呢？比如，当在搜索条件框内输入“中国人民”时，自动从中提取“中国”、“人民”等关键字并在数据库内进行搜索。看完本文后，你就可以发
用kindeditor编辑器替换ASPCMS原编辑器-带保存远程图片功能
首先感谢ASPCMS官网注册用户xing0203的辛苦付出！一下为久忆YK网络转载原创作者xing0203的文章内容！为了让小白更加清楚的体验替换过程，久忆YK对原文稍作了修改！
每个ASP程序员必备的知识
数据库连接： <% set conn=server.createobject(\"adodb.connection\") conn.open \"driver={microsoft access driver (*.mdb)};dbq=\"&server.mappath(\"数据库名\")
ASP中配置Kindeditor上传图片选择添加水印功能
第1步：修改plugins下的image/image.js 找到\'<input type=\"button\" class=\"ke-upload-button\" value=\"\' + lang.upload + \'\" />\',
asp配置kindeditor编辑器保存远程图片到本地
asp函数: <% Const sFileExt=\"jpg|gif|bmp|png\" Function ReplaceRemoteUrl(sHTML,sSaveFilePath,sFileExt)
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot