自己实现的ajax分页js
/**
* 分页
* @author chenqionghe
* @param data json数据,包含totalPage,count
* @param page 获取的页数
* @param obj 表格中的对象
* @param funcName 页码点击跳转的函数名,默认为showPage
* @constructor
*/
function Page(data,page,obj,funcName)
{
var funcName = arguments[3] ? arguments[3] : 'showPage';
this.totalPage = data.totalPage; //总页数
this.count = data.count; //总记录数
this.per = data.per; //每页显示多少条
this.nowPage = page; //当前页码
this.per_choose = [5,10,20,50,100]; //每页提供选择显示条数
this.pageStr = function ()
{
if(this.count == 0)
{
return '<tr><td class="pageStr" colspan="'+$(obj).closest('table').find('th').length+'"><span class="rows">没有数据可供显示</span></td></tr>';
}
//根据总的记录数,循环构造翻页字符串
var rollPage = 5;//设置每页显示的提供点击的页数
var offset = Math.ceil((rollPage / 2));
var pageStr = '<tr><td class="pageStr" colspan="'+$(obj).closest('table').find('th').length+'">'; pageStr +='每页显示<select onchange="'+funcName+'(1,this,this.value)">';
$.each(this.per_choose,function(k,v){
var selected = (data.per == v)? 'selected="selected"' : '';
pageStr += '<option '+selected+' value="'+v+'">'+v+'</option>';
});
pageStr += '</select> ' pageStr += '<a href="javascript:void(0);" class="first" onclick="'+funcName+'(1,this,'+this.per+')">首页</a>';
pageStr += '<span class="rows">共 '+this.count+' 条记录</span>';
pageStr += ' <span class="rows">第'+this.nowPage+'页 </span>';
if(this.totalPage>offset && this.nowPage>offset)
pageStr += '<a href="javascript:void(0);" class="first" onclick="'+funcName+'(1,this,'+this.per+')">首页</a>';
if(this.nowPage > 1)
pageStr += '<a href="javascript:void(0);" class="prev" onclick="'+funcName+'('+(this.nowPage-1)+',this,'+this.per+')">上一页</a>';
var p; //字符页码
for(var i=1; i<=rollPage; i++)
{
if(this.nowPage < offset)
p = i;
else if(this.nowPage + offset > this.totalPage)
p = this.totalPage-offset+i;
else
p = this.nowPage-offset+i;
//拼接字符串
if(p > 0 && p != this.nowPage)
if(p <= this.totalPage)
pageStr += '<a href="javascript:void(0);" class="num" onclick="'+funcName+'('+p+',this,'+this.per+')">'+p+'</a>';
else
break;
else
{
if(this.nowPage > 0 && this.totalPage != 1)
pageStr += '<a class="current" >'+p+'</a>';
} }
if(this.nowPage < this.totalPage)
pageStr += '<a href="javascript:void(0);" class="next" onclick="'+funcName+'('+(this.nowPage+1)+',this,'+this.per+')">下一页</a>';
if(this.totalPage>offset && (this.nowPage+offset)<this.totalPage)
pageStr += '<a href="javascript:void(0);" class="end" onclick="'+funcName+'('+this.totalPage+',this,'+this.per+')">尾页</a>';
pageStr += ' <span class="rows">共'+this.totalPage+'页</span> ';
pageStr += '</td></tr>';
return pageStr;
}
}
自己实现的ajax分页js的更多相关文章
- Ajax分页js代码
var pageIndex = 0; var pageSize = 10; $(function () { $("#btnSearch").click(function () { ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- MVC - 11(下)jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- ThinkPHP AJAX分页及JS缓存的应用
//AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右 主要实现是需要将分页中的每个链接都改为AJAX请求 //前端缓存技术:基于javascript传输的数据,只要浏览器没关,都保存在内存中 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- laraver ajax分页
,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 ); include($path); $content = ob_get_cle ...
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
随机推荐
- osg探究补充:DatabasePager类简介
简介 DatabasePager类,也就是常说的数据库分页技术,简单来说,就是在进行数据库查找时,有可能满足条件的数据很多,为了提高相应速度我们进行数据查找时进行分页查找与显示,当点击下一页时才会进行 ...
- Difference Among Mercedes Star Diagnostic Tool MB Star C3 C4 C5 C6
Mercedes Star Diagnostic Tool newly update to MB Star C6.There are many star diangostic tool in the ...
- [C#.net]ListBox对Item进行重绘,设置背景色和前景色
别的不多说了,上代码,直接看 首先设置这行,或者属性窗口设置,这样才可以启动手动绘制,参数有三个 Normal: 自动绘制 OwnerDrawFixed:手动绘制,但间距相同 OwnerDrawVar ...
- CUDA[3] Samples for accessing shared/global memory
memory model: programming model: Source: Udacity Class CS344
- Jmeter安装与实例
安装步骤: 安装环境:Windows7 安装包:JDK安装包:Jmeter安装包: 环境变量配置:变量名JAVA_HOME 值:jdk的安装路径 变量名CLASSPATH值:.;%JAV ...
- C# 多线程 举例使用
使用多线程的几种方式 (1)不需要传递参数,也不需要返回参数 ThreadStart是一个委托,这个委托的定义为void ThreadStart(),没有参数与返回值. /// <summa ...
- 理解Time-Wait
What is it? TIME-WAIT状态的主要作用在于TCP连接的拆除阶段.拆除一个TCP连接通常需要交换4个segment,如下图所示: Host1上的应用程序关闭了自己这一端的连接,使得TC ...
- 机器学习之KNN算法
1 KNN算法 1.1 KNN算法简介 KNN(K-Nearest Neighbor)工作原理:存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属 ...
- 用redux-thunk异步获取数据
概述 最近学习redux,打算用redux-thunk给todo添加异步获取数据组件.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 在todo下方,我异步获取我的react博客的标题,点击 ...
- spring 原理1:java 模拟springIOC容器
本篇博客主要是使用java代码模拟spring的IOC容器,实现依赖注入:当然只是模拟spring容器中简单的一点实现原理而已,加深一些自己对spring框架的底层原理的理解: 使用的技术:dom4j ...