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


Posted in Javascript onApril 01, 2016

本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个。

首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css)。

2.页面js代码为

<script type="text/javascript"> 

   var pageIndex = 0;  //页面索引初始值 
   var pageSize = 15;  //每页显示条数初始化,修改显示条数,修改这里即可 
   $(function () {
    InitTable(0); //Load事件,初始化表格数据,页面索引为0(第一页)
    //分页,PageCount是总条目数,这是必选参数,其它参数都是可选
    $("#Pagination").pagination(<%=pcount%>, {
     callback: PageCallback, //PageCallback() 为翻页调用次函数。
      prev_text: "« 上一页",
     next_text: "下一页 »",
     items_per_page:pageSize,
     num_edge_entries: 2,  //两侧首尾分页条目数
      num_display_entries: 6, //连续分页主体部分分页条目数
      current_page: pageIndex, //当前页索引
    });
    //翻页调用 
    function PageCallback(index, jq) {    
     InitTable(index); 
    } 
    //请求数据 
    function InitTable(pageIndex) {         
     $.ajax({ 
      type: "POST", 
      dataType: "text", 
      url: 'http://www.cnblogs.com/tool/Reserver/ManageBuyBatchManage.ashx',  //提交到一般处理程序请求数据 
      data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,   //提交两个参数:pageIndex(页面索引),pageSize(显示条数)     
      success: function(data) {
       $("#Result tr:gt(0)").remove();  //移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变) 
       $("#Result").append(data);    //将返回的数据追加到表格 
      } 
     }); 
    }
   }); 
</script>

3.页面<body>里面的代码为

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td width="60" align="right">商品名:</td>
    <td width="200" align="left"><input type="text" id="txtKeywords" class="keyword" /></td>
    <td width="200" align="left"><input id="search" type="button" value=" 查 找 " class="submit" /></td>
    <td > </td>
   </tr>
  </table>
  <table id="Result" cellspacing="0" cellpadding="0">   
    <tr> 
     <th>商品编号</th>
     <th>商品名称</th>
    </tr>                        
  </table> 
  <div id="Pagination" class="right flickr"></div>

4.页面后台代码为

protected int pcount = 0;   //总条数
  protected void Page_Load(object sender, EventArgs e)
  {
   if (!IsPostBack)
   {
    BLL.TbGoods bll = new BLL.TbGoods();
    pcount = bll.GetRecordCount("Status='" + (int)Enum.RecordStatus.Normal + "'"); //获取页面总条数,即要现实的数据总条数,还不明白的话,就是select count(*)from Table ,就是这里的个数。
   }
  }

5.一般处理程序fffff.ashx代码为

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

namespace EShop.Web.Admin.tool.Reserver
{
 /// <summary>
 /// ListBuyBatchManage 的摘要说明
 /// </summary>
 public class ListBuyBatchManage : IHttpHandler
 {
  public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   String str = string.Empty;
   
   if (context.Request["pageIndex"] != null && context.Request["pageIndex"].ToString().Length > 0)
   {
    int pageIndex; //具体的页面数
    int.TryParse(context.Request["pageIndex"], out pageIndex);
    if(context.Request["pageSize"]!=null&&context.Request["pageSize"].ToString().Length > 0)
    {
    //页面显示条数 
    int size = Convert.ToInt32(context.Request["pageSize"]);
    string data= BindSource(size,pageIndex);    
    context.Response.Write(data);
    context.Response.End();
    }
   }

   
  }  
  #region 无刷新分页
  public string BindSource(int pagesize,int page)
  { 
   BLL.TbGoods bll=new BLL.TbGoods();
   DataSet ds = bll.GetListByPage("Status='" + (int)Enum.RecordStatus.Normal + "'", "", pagesize * page + 1, pagesize * (page + 1)); //获取数据源的ds会吧。
   StringBuilder sb = new StringBuilder();
   if (ds!=null)
   {
    foreach (DataRow row in ds.Tables[0].Rows)
    {
     sb.Append("<tr><td>");
     sb.Append(row["GoodsUid"]);
     sb.Append("</td><td>");
     sb.Append(row["GoodsName"]);
     sb.Append("</td></tr>");
    }
   }
   return sb.ToString();
  }
  #endregion


  public bool IsReusable
  {
   get
   {
    return false;
   }
  }
 }
}

6.效果图

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript针对DOM的应用分析(二)
Apr 15 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
axios拦截设置和错误处理方法
Mar 05 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
jQuery实现下拉加载功能实例代码
Apr 01 #Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
如何在Linux上安装Node.js
Apr 01 #Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 #Javascript
You might like
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
玩转方法:call和apply
2014/05/08 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
使用angular写一个hello world
2015/01/23 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
浅谈Python 中的复数问题
2021/05/19 Python