基于Jquery+Ajax+Json+高效分页

最新推荐文章于 2021-12-30 09:38:01 发布
最新推荐文章于 2021-12-30 09:38:01 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： ASP.NET技术 JQuery 
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class ProductHandler: IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        var pageIndex = context.Request["PageIndex"];
        string connectionString = @"Data Source=.;Initial Catalog=bookshop;Integrated Security=True";
        //判断当前索引存不存在，如果不存在则获取记录的总数。
        if (string.IsNullOrEmpty(pageIndex))
        {
            //获取查询记录总数的sql语句
            string sql = "select count(-1) from Products ";
            int count = 0;
          int.TryParse(SqlHelper.ExecuteScalar(connectionString, System.Data.CommandType.Text, sql, null).ToString(), out count);
            context.Response.Write(count);
            context.Response.End();
        }
            //当根据索引获取数据
        else
        {
            int currentPageIndex = 1;
            int.TryParse(pageIndex, out currentPageIndex);
            SqlParameter[] parms = new SqlParameter[] { 
        new SqlParameter("@FEILDS",SqlDbType.NVarChar,1000),
        new SqlParameter("@PAGE_INDEX",SqlDbType.Int,10),
        new SqlParameter("@PAGE_SIZE",SqlDbType.Int,10),
        new SqlParameter("@ORDERTYPE",SqlDbType.Int,2),
        new SqlParameter("@ANDWHERE",SqlDbType.VarChar,1000),
        new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,100)
        };
            parms[0].Value = "*";//获取所有的字段
            parms[1].Value = pageIndex;//当前页面索引
            parms[2].Value = 10;//页面大小
            parms[3].Value = 0;//升序排列
            parms[4].Value = "";//条件语句
            parms[5].Value = "ID";//排序字段
            List<Book> list = new List<Book>();
            using (SqlDataReader sdr = SqlHelper.ExecuteReader(connectionString, CommandType.StoredProcedure, "PAGINATION", parms))
            {
                while (sdr.Read())
                {
                    list.Add(new Products { ProductTypeName = sdr[2].ToString() }); 
                }
            }
            
            context.Response.Write(new JavaScriptSerializer().Serialize(list).ToString());//转为Json格式
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

public class Products : BaseEntity
    {
        /// <summary>
        /// 商品分类ID
        /// </summary>
        public int ProductTypeId { get; set; }
        /// <summary>
        /// 商品分类名称
        /// </summary>
        public string ProductTypeName { get; set; }
        /// <summary>
        /// 商品分类系列ID
        /// </summary>
        public int SeriesTypeId { get; set; }
        /// <summary>
        /// 商品分类系列名称
        /// </summary>
        public string SeriesTypeName { get; set; }
        /// <summary>
        /// 商品名称
        /// </summary>
        public string PName { get; set; }
        /// <summary>
        /// 商品规格
        /// </summary>
        public string Specifications { get; set; }
        /// <summary>
        /// 商品单位
        /// </summary>
        public string Unit { get; set; }
        /// <summary>
        /// 商品批发价
        /// </summary>
        public decimal WholesalePrice { get; set; }
        /// <summary>
        /// 商品零售价
        /// </summary>
        public decimal RetailPrice { get; set; }
        /// <summary>
        /// 商品说明
        /// </summary>
        public string Remark { get; set; }
        /// <summary>
        /// 商品创建时间
        /// </summary>
        public string CreateTime { get; set; }
    }
复制代码

　　

显示数据页面----异步请求获取数据，基于jquery

创建页面web.aspx

<table class="tablelist">
            <asp:Repeater ID="reProducts" runat="server">
                <HeaderTemplate>
                    <thead>
                        <tr>
                            <th></th>
                            <th>商品分类</th>
                            <th>商品系列分类</th>
                            <th>商品名称</th>
                            <th>商品规格</th>
                            <th>商品单位</th>
                            <th>商品批发价</th>
                            <th>商品零售价</th>
                            <th>商品创建时间</th>
                        </tr>
                    </thead>
                </HeaderTemplate>
                <ItemTemplate>
                    <tbody>
                    </tbody>
                </ItemTemplate>
            </asp:Repeater>
        </table>
  <div class="pagin">
            <div class="message">共<i class="blue"></i>条记录，当前显示第<i class="blue"></i>页</div>
            <div id="pager" class="yahoo2"></div>
        </div>

js代码

复制代码 
  function pageList() {
    $.post("/Product/ProductHandler.ashx", null, function (result) {
        PageClick(1, result, 3);
    });
}

PageClick = function (pageIndex, total, spanInterval) {
    $.ajax({
        url: "/Product/ProductHandler.ashx",
        data: { "PageIndex": pageIndex },
        type: "post",
        dataType: "json",
        success: function (jsondata) {
            //索引从1开始
            //将当前页索引转为int类型
            var intPageIndex = parseInt(pageIndex);
            var table = $(".tablelist");
            //先清空table>tbody中的内容,再进行赋值
            table.find("tbody").children().remove();
            var data = eval(jsondata);
            //向表格中添加内容
            $.each(data, function(idx, item) {
                var row = $("<tr></tr>");
                var td = "<td><input name=\"productId\" type=\"radio\" value=\"" + item.Id + "\" /></td>" +
                    "<td>" + item.ProductTypeName + "</td>" +
                    "<td>" + item.SeriesTypeName + "</td>" +
                    "<td>" + item.PName + "</td>" +
                    "<td>" + item.Specifications + "</td>" +
                    "<td>" + item.Unit + "</td>" +
                    "<td>" + item.WholesalePrice + "</td>" +
                    "<td>" + item.RetailPrice + "</td>" +
                    "<td>" + item.CreateTime + "</td>";
                var firstTr = table.find('tbody>tr:first');
                row.append(td);
                table.append(row);
            });
            //创建分页
            //将总记录数结果 得到 总页码数
            var pageS = total;
            if (pageS % 10 == 0) pageS = pageS / 10;
            else pageS = parseInt(total / 10) + 1;
            var $pager = $("#pager");
            //清楚分页div中的内容
            $("#pager span").remove();
            $("#pager label").remove();
            $("#pager a").remove();
            //添加第一页
            if (intPageIndex == 1)
                $pager.append("<span class='disabled'>第一页</span>");
            else {
                var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () {
                    PageClick($(this).attr('first'), total, spanInterval);
                    return false;
                });
                $pager.append(first);
            }
            //添加上一页
            if (intPageIndex == 1)
                $pager.append("<span class='disabled'>上一页</span>");
            else {
                var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'>上一页</a>").click(function () {
                    PageClick($(this).attr('pre'), total, spanInterval);
                    return false;
                });
                $pager.append(pre);
            }
            //设置分页的格式  这里可以根据需求完成自己想要的结果
            var interval = parseInt(spanInterval); //设置间隔
            var start = Math.max(1, intPageIndex - interval); //设置起始页
            var end = Math.min(intPageIndex + interval, pageS)//设置末页


            if (intPageIndex < interval + 1) {
                end = (2 * interval + 1) > pageS ? pageS : (2 * interval + 1);
            }
            if ((intPageIndex + interval) > pageS) {
                start = (pageS - 2 * interval) < 1 ? 1 : (pageS - 2 * interval);


            }
             //生成页码
            for (var j = start; j < end + 1; j++) {
                if (j == intPageIndex) {
                    var spanSelectd = $("<label style='color: #000;'>" + j + "</label>");
                    $pager.append(spanSelectd);
                } //if 
                else {
                    var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {
                        PageClick($(this).text(), total, spanInterval);
                        return false;
                    });
                    $pager.append(a);
                } //else
            } //for
            //上一页
            if (intPageIndex == pageS) {
                $pager.append("<span class='disabled'>下一页</span>");
            }
            else {
                var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>下一页</a>").click(function () {
                    PageClick($(this).attr("next"), total, spanInterval);
                    return false;
                });
                $pager.append(next);
            }
            //最后一页
            if (intPageIndex == pageS) {
                $pager.append("<span class='disabled'>最后一页</span>");
            }
            else {
                var last = $("<a href='javascript:void(0)' last='" + pageS + "'>最后一页</a>").click(function () {
                    PageClick($(this).attr("last"), total, spanInterval);
                    return false;
                });
                $pager.append(last);
            }
        } //sucess
    }); //ajax
}; //function
复制代码

　　

  分页样式

复制代码 
<style type="text/css">
    DIV.yahoo2 {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; FONT-FAMILY: Tahoma,Helvetica,sans-serif; TEXT-ALIGN: center
}
DIV.yahoo2 A {
    BORDER-RIGHT: #ccdbe4 1px solid; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ccdbe4 1px solid; PADDING-LEFT: 8px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccdbe4 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccdbe4 1px solid; TEXT-DECORATION: none
}
DIV.yahoo2 A:hover {
    BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid; BACKGROUND-COLOR: #3666d4
}
DIV.yahoo2 A:active {
    BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid; BACKGROUND-COLOR: #3666d4
}
  DIV.yahoo2 label {
                BORDER-RIGHT: #ccdbe4 1px solid;
                PADDING-RIGHT: 8px;
                BACKGROUND-POSITION: 50% bottom;
                BORDER-TOP: #ccdbe4 1px solid;
                PADDING-LEFT: 8px;
                PADDING-BOTTOM: 2px;
                BORDER-LEFT: #ccdbe4 1px solid;
                COLOR: #0061de;
                MARGIN-RIGHT: 3px;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #ccdbe4 1px solid;
                TEXT-DECORATION: none;
            }
DIV.yahoo2 SPAN.disabled {
    DISPLAY: none
}
DIV.yahoo2 A.next {
    BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 0px 0px 10px; BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid
}
DIV.yahoo2 A.next:hover {
    BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid; BORDER-BOTTOM: #2b55af 2px solid
}
DIV.yahoo2 A.prev {
    BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 10px 0px 0px; BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid
}
DIV.yahoo2 A.prev:hover {
    BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid; BORDER-BOTTOM: #2b55af 2px solid
}
    
    </style>
复制代码

　分页存储过程---PAGINATION

复制代码 
CREATE PROCEDURE [dbo].[PAGINATION] 
@FEILDS  VARCHAR(1000),--要显示的字段
@PAGE_INDEX INT,--当前页码
@PAGE_SIZE INT,--页面大小
@ORDERTYPE BIT,--当为0时 则为 desc 当为1 时 asc
@ANDWHERE VARCHAR(1000)='',--where语句 不用加where
@ORDERFEILD VARCHAR(100) --排序的字段
as
DECLARE @EXECSQL VARCHAR(2000)
DECLARE @ORDERSTR VARCHAR(100)
DECLARE @ORDERBY VARCHAR(100)
BEGIN
    set NOCOUNT on
    IF @ORDERTYPE = 1 
        BEGIN
            SET @ORDERSTR = ' > ( SELECT MAX(['+@ORDERFEILD+'])'
            SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' ASC'
        END
    ELSE 
        BEGIN
            SET @ORDERSTR = ' < ( SELECT MIN(['+@ORDERFEILD+'])'
            SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' DESC'
        END

    IF @PAGE_INDEX = 1 --当页码是第一页时直接运行，提高速度
        BEGIN
            IF @ANDWHERE=''
                SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] '+@ORDERBY
            ELSE
                SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] WHERE '+@ANDWHERE+' '+ @ORDERBY
        END
    ELSE
        BEGIN
            IF @ANDWHERE=''
                BEGIN      --以子查询结果当做新表时 要给表名别名才能用
                    SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] WHERE '+@ORDERFEILD+
                                @ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
                                ' FROM [books] '+@ORDERBY+') AS TEMP) '+ @ORDERBY
                END
            ELSE
                BEGIN
                    SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] WHERE '+@ORDERFEILD+
                                @ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
                                ' FROM [books] WHERE '+@ANDWHERE+' '+@ORDERBY+') AS TEMP) AND '+@ANDWHERE+' '+ @ORDERBY
                END
        END
EXEC (@EXECSQL)--这里要加括号
END
复制代码

　　

运行效果图


补充：

PageClick(1, total, 3); 这个函数，第一个参数是当前页码，第一调用为第一页，这个不用管，total：表示总记录数,第三个参数表示：当前索引和旁边个间隔几页


make1828
关注
专栏目录
AJAXjson分页
07-07
ajax前端JSON数据分页DEMO，里面有个data是模拟后台传来的数据
ajax获取json数据使用jquery分页插件显示
06-22
插件下载地址 http://www.jq22.com/jquery-plugins分页-2-jq 下载的插件用自带的数据是可以的，但是采用ajax获取的json数据的时候会报错，所以我对插件进行了修改，成功实现。这个例子希望大家看懂自己来该，照抄不了。
Ajax无刷新分页(jQuery+Json)
08-09
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access 只用来玩玩.所以就用Access数据库了 jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,自定义列(反回两个值给用户进行自定义操作) 样式变代(也就是写了两个样式表而以) 转换列(也就是你数据库里是1,0什么的,转成对应的男女的中文) 每页显示的记录条数在config里面设置
基于Jquery+Ajax+Json的高效分页实现代码
10-28
在本文中，我们将探讨如何使用Jquery, Ajax, 以及Json技术来实现一个高效的分页功能。首先，需要了解分页技术是Web开发中常用的一种处理大量数据的技术，它可以将数据分割成若干个小部分，每次只加载和展示其中的一...
使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
10-23
本篇文档详细介绍了如何利用Jquery+Ajax+Json技术实现前端分页显示功能，以及如何结合Java后端实现异步分页的完整流程。 ### 知识点概述： 1. **Jquery+Ajax+Json组合**： - **Jquery**：是一个快速、小巧、功能...
基于Jquery+Ajax+Json实现分页显示附效果图
08-14
### 基于JQuery、Ajax与JSON实现分页显示技术解析 #### 技术背景与应用场景 在现代Web开发中，数据展示是一项至关重要的功能。随着数据量的增长，简单的列表展示方式已不能满足用户体验的需求。为了提升用户体验，...
jquery+json实现分页
rdman的专栏
06-03 1175
基本方法：通过使用jquery向服务器发送一个ajax请求，获取json格式的数据，然后将数据拼凑成行，附加到表格的后面，通过使用jquery pagination插件实现分页。 页面需要引入的js文件： //页面加载时，进行绑定 $(function(){     bind(0); }); //点击分页时调用的函数，page_id为当前页的索引 function pag
jquery+json处理分页的一个简单例子。
hcfjdwlmcchina的专栏
11-17 1188
<br />jquery+json处理分页的一个简单例子。<br /><br />处理类：C# code#region GetJsonData///<summary>/// 得到JSON数据 ///</summary>///<param name="ds">dataset</param>///<param name="KeyFileds">查找的字段，例: id,name,content</param>///<returns></returns>publicstaticstring GetJson
jQueryPager(JQuery分页插件pagination实现Ajax分页)
10-27
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
jQueryPager(JQuery分页插件pagination实现Ajax分页).rar
07-07
jQueryPager(JQuery分页插件pagination实现Ajax分页)
asp生成json数据-调试实例
04-08
详尽的调试示例,有基础,解压看代码,肯定能懂
jQuery+json，分页显示数据列表，HTML+CSS，固定表头
kdhcchhnyyzy的博客
08-15 7951
本文主要分为两个功能部分，分页用table显示数据+固定table的表头，网上有很多两者的示例，当时看完一些发现都不太符合项目的需求，于是自己动手改了下。 先介绍分页功能。 1、分页功能。 网上有大量的分页示例，有些做的也很漂亮，一部分是用纯jQuery、HTML结合CSS写的，另一部分是使用相关的UI组件库，例如jqwidgets（一般大型项目中用的多），需要先去它的官网下载相关的包文件，
用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
suxiaxuhuanhuan的专栏
03-08 3045
1.       思路 在写分页的时候必定要考虑到在组合查询的时候也要分页。组合查询就是把你想要查询的条件获取并传到servelt中去处理，拼接成sql语句。 2．首先获取模糊查询的条件          所使用的html代码为：                                  姓名："text" name="name" id="name"/>
jQuery实现简单的json解析的数据分页显示到表格
weixin_44694069的博客
08-28 794
jQuery实现简单的json解析的数据分页显示到表格这个分页写的比较简单，只用到了for循环 这个分页写的比较简单，只用到了for循环 这是我的事例数据 完成效果： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> <script src="jquery-v3.5.1/jquery-
软件开发jquery+json实现分页效果_jquery
12-30 262
软件开发jquery+json实现分页效果_jquery Json作为一种轻量级的数据交换格式,由于其传输数据格式的方便性，今天偶然想将其应用于分页实现，分页做为web开发一个长久的话题，其应用的高效与重要性就不多说了 本文主要技术:反射机制，Json数据格式，jquery 为了应用的通用性，首先要根据反射机制，能将要返回的任意类型的结果对象转化成Json类型的格式。 public static String toJSON(Object obj) { HashMap map = new HashM
ajax json实现分页,基于Json的Ajax无刷新分页效果实现（一）
weixin_33309433的博客
08-05 498
由于我今天刚好要做无刷新分页的效果。所以就直接先上图了！如图，上部分是分页后取出来的数据。下部分是 分页器的实现(关于分页器的实现请参考 http://www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html)我们先来实现页面的分页效果，1、新建一个 ajax 文件页面 ashx 或者 aspx， 我个人比较喜欢 aspx 。删掉页面...
ajax+json异步分页。
..小程小小小..
01-17 2478
jsonpager.js $(function () { // 计算分页总条数 var pageCount = 0; $.ajax({ type: "POST", cache: false, async: false, dataType: "text", url: "ashx/getdat
Jquery+Ajax+Json高效分页实现详解及代码示例
"基于Jquery+Ajax+Json的高效分页实现代码" 在Web开发中，分页是一个常见的功能，用于处理大量数据时提高用户体验。本文将介绍如何利用Jquery、Ajax和Json技术来实现一个高效的分页解决方案。Jquery是一个流行的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值