jq实现无刷新分页

最新推荐文章于 2021-08-06 05:39:36 发布

weixin_34163553

最新推荐文章于 2021-08-06 05:39:36 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

文章标签： javascript c# ViewUI

原文链接：http://www.cnblogs.com/DawnYuan/archive/2012/08/09/Jquery.html

本文介绍了一个基于JQuery的无刷新分页插件应用实例，通过前后端分离的方式实现了数据的异步加载。文章提供了详细的前端HTML与JS代码，并展示了如何通过AJAX与后台交互获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.没事干在网上看了一个 jq实现无刷新分页的插件，所以自己根据上面所说的写了一个实例来供自己学习。从而更好的掌握。

2.所需要引用的js和css文件

    <script src="Script/jquery.min.js" type="text/javascript"></script>
    <script src="Script/jquery.pagination.js" type="text/javascript"></script>
    <script src="Script/tablecloth.js" type="text/javascript"></script>
    <link href="Style/pagination.css" rel="stylesheet" type="text/css" />
    <link href="Style/tablecloth.css" rel="stylesheet" type="text/css" />

2.前台html与js代码

<script type="text/javascript">    
    var pageIndex = 0;     //页面索引初始值
    var pageSize = 10;     //每页显示条数初始化，修改显示条数，修改这里即可  
   
    $(document).ready(function() {       
        InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）
                                                            
        //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一页',       //上一页按钮里text
            next_text: '下一页',       //下一页按钮里text
            items_per_page: pageSize,  //显示条数
            num_display_entries: 5,    //连续分页主体部分分页条目数
            current_page: pageIndex,   //当前页索引
            num_edge_entries: 2        //两侧首尾分页条目数
        });   
    });
     //翻页调用
        function PageCallback(index, jq) {           
            InitTable(index);
        }

        //请求数据
        function InitTable(pageIndex) {                                
            $.ajax({ 
                type: "POST",
                dataType: "text",
                url: 'Handler/PagerHandler.ashx',      //提交到一般处理程序请求数据
                data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                
                success: function(data) {                                 
                    $("#Result tr:gt(1)").remove();        //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
                    $("#Result").append(data);             //将返回的数据追加到表格
                }
            });            
        }
    </script>


<form id="form1" runat="server">
    <div align="center">
        <h1>
            Dawn----无刷新分页</h1>
    </div>
    <div id="container">
        <table id="Result" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>
                        编号
                    </th>
                    <th>
                        名称
                    </th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>
                        Dawn
                    </td>
                    <td>
                        Dawn
                    </td>
                </tr>
            </tfoot>
        </table>
        <div id="Pagination" style="width: 800px;">
        </div>
    </div>
    </form>

4.后台 handler代码和创建数据源代码

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
using System.Linq;

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

        string str = string.Empty;

        //具体的页面数
        int pageIndex;
        int.TryParse(context.Request["pageIndex"], out pageIndex);
        //页面显示条数
        int size = Convert.ToInt32(context.Request["pageSize"]);
        if (pageIndex == 0)
        {
            pageIndex = 1;
        }
        System.Collections.Generic.IEnumerable<Person> list = Common.personList.Skip((pageIndex - 1) * size).Take(size);
        StringBuilder sb = new StringBuilder();
        foreach (Person p in list)
        {
            sb.Append("<tr><td>");
            sb.Append(p.Id.ToString());
            sb.Append("</td><td>");
            sb.Append(p.Name);
            sb.Append("</td></tr>");
        }
        str = sb.ToString();
        context.Response.Write(str);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}





using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// 实体类---人
/// </summary>
[Serializable]
public class Person
{
    /// <summary>
    /// 编号
    /// </summary>
    public int Id { get; set; }

    /// <summary>
    /// 名字
    /// </summary>
    public string Name { get; set; }
}

/// <summary>
///Common 的摘要说明
/// </summary>
public class Common
{
    public static List<Person> personList = new List<Person>();

    static Common()
    {
        for (int i = 0; i < 555; i++)
        {
            personList.Add(new Person
            {
                Id = Convert.ToInt32("100" + i.ToString()),
                Name = "PersonName_" + i.ToString()
            });
        }
    }
}

5：附带一张运行后的效果图