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 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
vue实现底部菜单功能
Jul 24 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php 面向对象的一个例子
2011/04/12 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
python实现倒计时的示例
2014/02/14 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
使用Python对Excel进行读写操作
2017/03/30 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python操作gitlab API过程解析
2019/12/27 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
细说CSS3中的选择符
2008/10/17 HTML / CSS
态度决定一切演讲稿
2014/05/20 职场文书
要账委托书范本
2014/09/15 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
普通党员整改措施
2014/10/24 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python