jQuery getJSON() + .ashx + jquery.pager 实现分页

最新推荐文章于 2021-08-05 11:59:17 发布

gdjlc

最新推荐文章于 2021-08-05 11:59:17 发布

阅读量2k

点赞数

分类专栏： jQuery ASP.NET 文章标签： getjson jquery function stylesheet database server

本文链接：https://blog.csdn.net/gdjlc/article/details/5821871

版权

ASP.NET 同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

jQuery

20 篇文章 0 订阅

订阅专栏

在以前文章jQuery getJSON() + .ashx 实现分页实现的分页比较简单，刚好看到网上的jquery.pager 插件，就把原来代码修改了一翻。

jquery.pager下载：http://plugins.jquery.com/project/Pager

一、.html页

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link href="Pager.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
     <script src="jquery.pager.js" type="text/javascript"></script>
     <script type="text/javascript">
         var pagecount;
         $(document).ready(function() {
             $.get("Handler.ashx", { type:1,pagesize:20,index:1}, function(data, textStatus) {
                 pagecount = data;
                 $("#pager").pager({ pagenumber: 1, pagecount: pagecount, buttonClickCallback: PageClick });
             });
             Go(1);
         });
         PageClick = function(pageclickednumber) {
             $("#pager").pager({ pagenumber: pageclickednumber, pagecount: pagecount, buttonClickCallback: PageClick });
             Go(pageclickednumber);
         }         
         function Go(index) {
             $("#Content").html("");          
             $.getJSON("Handler.ashx", { type:0, pagesize:10, index:index }, function(data) {
                 $("#Content").append("<tr><th style＝'width:130px'>id</th><th style＝'width:150px'>title</th></tr>");
                 $.each(data, function(i) {
                     $("#Content").append("<tr><td>" + data[i].id + "</td><td>" + data[i].title + "</td></tr>");
                 })              
             });
         }
     </script>
</head>
<body>
    <form id="form1" runat="server">        
        <div style="width: 100%">
           <table id="Content" >                         
           </table>
           <div id="pager" ></div>
        </div>          
    </form>
</body>
</html>

二、.ashx页

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Text;

public class Handler : IHttpHandler {
   
    public void ProcessRequest (HttpContext context)
    {
        context.Response.ContentType = "text/plain";
      
        DataBase db = new DataBase();
        int pageSize = int.Parse(context.Request.Params["pagesize"]); //每页记录数
        int pageIndex = int.Parse(context.Request.Params["index"]);  //当前页索引     
        int type = int.Parse(context.Request.Params["type"]); //1为获取总页数，0为获取分页数据           

        if (type == 1)
        {
            int recordCount = db.GetRecordCount("select count(*) from test");
            int pageCount = Convert.ToInt32(Math.Ceiling(Convert.ToDouble(recordCount) / pageSize));
            context.Response.Write(pageCount.ToString());
        }
        else
        {           
            string sql = string.Format("select id,title from ( select row_number() over (order by id) as rowNum,* from test) as t "
                + " where rowNum>{0} and rowNum<={1}", (pageIndex - 1) * pageSize, pageIndex * pageSize);
            System.Data.DataTable dt = db.GetDataTable(sql);

            context.Response.Write(JSONHelper.DataTableToJSON(dt));
        }
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

三、效果

---------------------------------------------------------------------------------------

备注说明：

1、其中JSONHelper.DataTableToJSON(dt)方法为DataTable解析成JSON，见另一篇文章JSONHelper 帮助类

2、我把jquery.pager.js里面的按钮改为了中文；

3、当当前页为第1页时，页面还显示“首页”、“上一页”，当当前页为最后一页时，页面还显示“下一页”、“末页”，不太符合常理。

可以修改jquery.pager.js文件使当前页为第1页时隐藏“首页”、“上一页”，当前页为最后一页时，隐藏“下一页”、“末页”，改的2个地方如下加粗代码所示：

if (pagenumber > 1)
$pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));

if (pagenumber < pagecount)
$pager.append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback));

gdjlc

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
jQuery getJSON() + .ashx + jquery.pager 实现分页

在以前文章jQuery getJSON() + .ashx 实现分页实现的分页比较简单，刚好看到网上的jquery.pager 插件，就把原来代码修改了一翻。
复制链接

扫一扫