• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    asp.net jquery无刷新分页插件(jquery.pagination.js)
    采用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 id="container">
    table id="Result" cellspacing="0" cellpadding="0">
    tr>
    th>编号/th>
    th>名称/th>
    /tr>
    /table>
    div id="Pagination">/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;
    ListPagerTestModels.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.实现效果图


    源码下载
    您可能感兴趣的文章:
    • Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页示例
    • jQuery分页插件jquery.pagination.js使用方法解析
    • jquery分页插件jquery.pagination.js实现无刷新分页
    • jquery分页插件jquery.pagination.js使用方法解析
    • jquery.pagination.js 无刷新分页实现步骤分享
    • jQuery EasyUI API 中文文档 - Pagination分页
    • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
    • jquery pagination插件实现无刷新分页代码
    • Ajax分页插件Pagination从前台jQuery到后端java总结
    • jquery.pagination.js分页使用教程
    上一篇:FileUpload上传图片前实现图片预览功能(附演示动画)
    下一篇:前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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