• 首页
  • 问答

    • asp.net jquery无刷新分页插件(jquery.pagination.js)

    2023-07-08 10:41 34次浏览 问答

    采用Jquery无刷新分页插件jquery。pagination。js 实现无刷新分页效果
    友情提示：本示例Handler中采用StringBuilder的append方法追加HTML，小数据量可以，但是大数据或是布局常变，建议返回JSON格式的数据，性能和灵活性更好！
    1。
    插件参数列表2。页面内容：
    代码如下:
    <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default。aspx。cs” Inherits=”_Default”%>
    <DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1。
    0 Transitional//EN” “http://www。w3。org/TR/xhtml1/DTD/xhtml1-transitional。dtd”>
    <html xmlns=”http://www。w3。
    org/1999/xhtml”>
    <head runat=”server”>
    <title>Porschev—-无刷新翻页</title>
    <script src=”Script/jquery-1。
    4。1。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/tablecloth。css” rel=”stylesheet” type=”text/css”/>
    <link href=”Style/pagination。
    css” rel=”stylesheet” type=”text/css”/>
    <script type=”text/javascript”>
    var pageIndex =0; //页面索引初始值
    var pageSize =10; //每页显示条数初始化，修改显示条数，修改这里即可
    $(function() {
    InitTable(0); //Load事件，初始化表格数据，页面索引为0（第一页）
    //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
    $(“#Pagination”)。
    pagination(<%=pageCount %> {
    callback: PageCallback,
    prev_text: ‘上一页’, //上一页按钮里text
    next_text: ‘下一页’, //下一页按钮里text
    items_per_page: pageSize, //显示条数
    num_display_entries: 6, //连续分页主体部分分页条目数
    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(0)”)。
    remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
    $(“#Result”)。append(data); //将返回的数据追加到表格
    }
    });
    }
    });
    </script>
    </head>
    <body>
    <div align=”center”>
    <h1>Posrchev—-无刷新分页</h1>
    </div>
    <div><table><tr>
    <th>编号</th>
    <th>名称</th>
    </tr>
    </table>
    <div></div>
    </body>
    </html>
    3。
    页面。cs文件内容：
    代码如下:
    using System;
    using System。Collections。Generic;
    using System。Linq;
    using System。
    Web;
    using System。Web。UI;
    using System。Web。UI。WebControls;
    public partial class _Default : System。
    Web。UI。Page
    {
    public string pageCount = string。Empty; //总条目数
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    pageCount = new PagerTestBLL。
    PersonManager()。GetPersonCount()。ToString();
    }
    }
    }
    4。Handler中的内容：
    代码如下:
    <%@ WebHandler Language=”C#” Class=”PagerHandler” %>
    using System;
    using System。
    Web;
    using System。Collections。Generic;
    using System。Text;
    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;
    }
    int count;
    List<PagerTestModels。
    Person> list = new PagerTestBLL。PersonManager()。GetAllPerson(size, pageIndex, “”, out count);
    StringBuilder sb = new StringBuilder();
    foreach (PagerTestModels。
    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;
    }
    }
    }
    5。
    实现效果图：源码下载。

    1.文章《asp.net jquery无刷新分页插件(jquery.pagination.js)》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《asp.net jquery无刷新分页插件(jquery.pagination.js)》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑