`

无刷新分页 jquery.pagination.js

jQueryQQWebUILinq 
阅读更多
插件参数列表


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>      
    <mce:script src="Script/jquery-1.4.1.min.js" mce_src="Script/jquery-1.4.1.min.js" type="text/javascript"></mce:script>  
    <mce:script src="Script/jquery.pagination.js" mce_src="Script/jquery.pagination.js" type="text/javascript"></mce:script>      
    <mce:script src="Script/tablecloth.js" mce_src="Script/tablecloth.js" type="text/javascript"></mce:script>     
    <link href="Style/tablecloth.css" mce_href="Style/tablecloth.css" rel="stylesheet" type="text/css" />  
    <link href="Style/pagination.css" mce_href="Style/pagination.css" rel="stylesheet" type="text/css" />  
    <mce: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);             //将返回的数据追加到表格  
                }  
            });              
        }  
          
    });  
       
// --></mce: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.页面后台内容： 


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.实现效果图：







6.源码下载地址

http://download.csdn.net/source/2959451
分享到：
| Struts2中重定向redirect
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.pagination.js实现分页的三种形式，实例

    在这个实例中，我们将探讨如何使用 `jquery.pagination.js` 实现三种不同的分页形式：基本分页、AJAX 无刷新分页以及自定义分页属性。 **基本分页** 基本分页是最简单的应用场景，通常用于展示固定数量的数据集。...

    ajax无刷新分页jquery.pagination插件

    总的来说，通过`jQuery.pagination`插件，开发者可以快速实现Ajax无刷新分页，提高网页的响应速度和用户互动性。结合合理的后端设计，可以实现高效的数据加载和展示，使得大量数据的管理变得更加轻松。在实践中，...

    使用Jquery.Pagination.js+ASP.NET实现无刷新分页

    此源码使用了Jquery.Pagination.js+Jquery.Ajax+Asp.net技术实现了无刷新分页的效果。其中用到的Asp.net知识有Linq to sql和ashx技术。分页插件可以自定义样式，自定义的样式在pagenumstyle.css文件中。项目使用vs...

    Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1

    Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1,是在原作者基础上修改的，因为Pagination 1.5.1与它的低版本有很大的区别，所以在此实例中增加了新版的使用方法

    Asp.Net无刷新分页，基于jquery.pagination插件.rar

    本示例"基于jquery.pagination插件.rar"提供了一种方法，利用JavaScript库jQuery和其插件jquery.pagination.js来实现在ASP.NET环境下的无刷新分页。 **jQuery Pagination 插件** jQuery pagination 是一个轻量级的...

    jQuery Pagination分页插件.zip

    首先，jQuery Pagination的基础工作原理是通过JavaScript动态生成分页链接，用户点击这些链接时，插件会根据设定的参数加载相应页码的数据。这个过程通常与服务器端的数据获取相结合，实现无刷新的分页效果。分页...

    无刷新分页 pagination

    在Jquery无刷新分页的实现中，`jquery.pagination.js`通常与后端数据库交互，通过AJAX（Asynchronous JavaScript and XML）技术来获取和展示数据。AJAX的核心在于创建XMLHttpRequest对象，发送异步请求到服务器，...

    jQuery分页插件jquery.pagination.js使用方法解析

    jquery.pagination.js插件，此jQuery插件为Ajax分页插件，一次性加载全部数据，故分页切换时无刷新与延迟，只是重写指定dom元素中的html内容，如果数据量较大不建议用此方法，因为加载会比较慢； jQuery的多数插件...

    使用AJAX动态生成table表格数据和jquery.pagination.js 的分页栏

    AJAX（Asynchronous JavaScript and XML）允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，而`jquery.pagination.js`则提供了简洁的分页解决方案。 首先，我们需要理解AJAX的工作原理。AJAX...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件，它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`，在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

    jQuery Ajax分页插件(jquery.pagination)

    - 引入jQuery库和分页插件的CSS和JS文件。 - JavaScript代码，用于初始化分页插件并处理Ajax请求。 通过分析和理解这个示例，开发者可以快速了解如何在自己的项目中集成和使用jQuery Ajax分页插件，提升用户体验，...

    jquery分页插件jquery.pagination.js实现无刷新分页

    在介绍使用jquery分页插件jquery.pagination.js实现无刷新分页的知识点之前，首先要明确什么是分页插件，以及无刷新分页的概念。分页插件是一种用于在网页上实现内容分页展示的工具，它能够将大量数据或内容分成多页...

    jquery.pagination.js 无刷新分页实现步骤分享

    首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。 2.页面js代码为 代码如下: [removed] var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化，修改显示条...

    jquery pagination 分页

    除了初始化配置外，插件还提供了如 `jumpToPage`、`refresh` 等 API 方法，用于动态改变当前页或刷新分页状态。例如，直接跳转到第 10 页： ```javascript $('#pagination-container').pagination('jumpToPage'...

    jQuery ajax无刷新分页插件jquery.pagination.js示例

    其核心代码jquery.pagination.js已随示例打包，Demo中包括了5种不同的分页效果演示，全部是Ajax无刷新方式实现分页，对于搞前端开发的朋友来说，这是个值得收藏的代码特效，为以后实现无刷新分页提供方便。...

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

    ASP.NET与jQuery无刷新分页插件：jQuery.pagination.js详解 在现代网页开发中，提供无刷新用户体验已经成为标准。在ASP.NET中，结合jQuery库，我们可以实现高效的无刷新分页功能，提高用户交互性。本篇文章主要讲解...

Magicbox
Global site tag (gtag.js) - Google Analytics