使用jQuery实现伪分页
在之前的项目中遇到一个这样的问题,页面分为上下两部分(分别称为未选中设备信息部分和选中设备信息部分),上面是从数据库拿出来的所有的设备信息,下面是显式已选中的设备信息,页面如下所示:

可以选中其中的任意数量的设备,点击“添加到以选中设备”,就会如下图所示:

我们可以看到,在未选中设备信息部分有一个分页,这个是要和后台进行数据交互的,姑且称为“真分页”,而选中设备信息部分也有一个分页,这个并不和后台进行数据交互,仅仅是为了解决数据条数过多造成的页面过长,针对这个问题,我使用jQuery,上网查阅了一些资料,完成了如下所示的伪分页代码:
<!-- 伪分页实现 -->
<script type="text/javascript">
function pretendDevide(){
// 每页显示的条数
var everyPageNum = 10;
// 当前的页数
var current_Num = 1;
// 拿到有所有已选设备组成的数组
var tbodyNode = $("#chooseDeviceTBody tr").toArray();
// 获取数组的长度
var arrayLengrh = tbodyNode.length;
// 设置总条数
$(".totalNum").text(arrayLengrh);
// 获取总页数
totalPageNum = Math.ceil(totalPageNum = arrayLengrh/everyPageNum);
// 显示总页数
$(".totalPage").text(totalPageNum);
// 如果数组大小大于10
if(arrayLengrh > 10){
$("#chooseDeviceTBody tr").show();
// 则把后面的全部隐藏
$("#chooseDeviceTBody tr:gt(9)").hide();
}else{
// 小于十个也可以显示
$("#chooseDeviceTBody tr").show();
}
// 点击下一页按钮绑定触发事件
$(".nextPage").click(function(){
// 判断当期页码是否大于最大页码,如果大于等于,则不触发下一页
if(current_Num >= totalPageNum){
return false;
}else{
// 执行下一页
//当前页码加1
current_Num += 1;
//显示当前页码
$(".current_Num").text(current_Num);
// 让所有tr隐藏出来
$("#chooseDeviceTBody tr").hide();
//获取该页显示的起始范围和结束范围
var start = everyPageNum*(current_Num - 1);
var end = everyPageNum*current_Num;
// 判断在start和end中间的显示,其余隐藏
for(var i = start;i < end;i++){
$("#chooseDeviceTBody tr").eq(i).show();
}
}
}); // 点击上一页按钮触发事件
$(".prevPage").click(function(){
// 判断当期页码是否小于等于0,如果小于等于,则不触发上一页
if(current_Num <= 1){
return false;
}else{
// 执行上一页
//当前页码减1
current_Num -= 1;
//显示当前页码
$(".current_Num").text(current_Num);
// 让所有tr隐藏出来
$("#chooseDeviceTBody tr").hide();
//获取该页显示的起始范围和结束范围
var start = everyPageNum*(current_Num - 1);
var end = everyPageNum*current_Num;
// 判断在start和end中间的显示,其余隐藏
for(var i = start;i < end;i++){
$("#chooseDeviceTBody tr").eq(i).show();
}
}
}); // 点击尾页按钮绑定事件
$(".endPage").click(function(){
// 判断当期页码是否大于最大页码,如果大于等于,则不触发尾页
if(current_Num >= totalPageNum){
return false;
}else{
// 执行尾页
//当前页码赋值为最大页码
current_Num = totalPageNum;
//显示当前页码
$(".current_Num").text(current_Num);
// 让所有tr隐藏出来
$("#chooseDeviceTBody tr").hide();
//获取该页显示的起始范围和结束范围
var start = everyPageNum*(current_Num - 1);
var end = everyPageNum*current_Num;
// 判断在start和end中间的显示,其余隐藏
for(var i = start;i < end;i++){
$("#chooseDeviceTBody tr").eq(i).show();
}
}
});
$(".jumpTo").click(function(){
// 获取要跳转到的页码
var jumpTo = $("#jumpPageNum").val();
var jumpToInt = parseInt(jumpTo);
// 如果要跳转的页面不符合要求,则不执行相关操作
if(jumpToInt < 1 || jumpToInt > totalPageNum){
// 返回第一页
current_Num = 1;
}else{
current_Num = jumpToInt;
}
$(".current_Num").text(current_Num);
$("#chooseDeviceTBody tr").hide();
var start = everyPageNum*(current_Num - 1);
var end = everyPageNum*current_Num;
for(var i = start;i < end;i++){
$("#chooseDeviceTBody tr").eq(i).show();
}
}); // 跳转首页firstPage
$(".firstPage").click(function(){
// 判断当期页码是否小于等于1
if(current_Num <= 1){
return false;
}else{
//当前页码赋值为最小页码
current_Num = 1;
//显示当前页码
$(".current_Num").text(current_Num);
// 让所有tr隐藏出来
$("#chooseDeviceTBody tr").hide();
//获取该页显示的起始范围和结束范围
var start = everyPageNum*(current_Num - 1);
var end = everyPageNum*current_Num;
// 判断在start和end中间的显示,其余隐藏
for(var i = start;i < end;i++){
$("#chooseDeviceTBody tr").eq(i).show();
}
}
});
}
</script>
使用jQuery实现伪分页的更多相关文章
- 用jquery编写的分页插件
用jquery编写的分页插件 源码 function _pager_go(total_page) { var page_str = $("#_pager_textbox").val ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- jQuery Pagination Ajax分页插件中文详解(摘)
jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- 浅谈jQuery Pagination Ajax 分页插件的使用
插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- 基于jQuery封装的分页组件(可自定义设置)
jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...
- jQuery伪分页效果
如图,我们首先分析在一个页面存放4条内容,其余的超出隐藏(因为这里没有后台数据,所以我们把内容‘写死’),然后就是下面两个按钮(这里我们不用button,因为button有自带的提交功能),然后我们可 ...
- JQuery实现table分页
1.直接贴代码: ; //每页显示的记录条数 ; //显示第curPage页 var len; //总行数 var page; //总页数 $(function(){ len =$(; //去掉表头 ...
随机推荐
- MySQL中文问题
-- 设置客户端显示字符集 mysql>set names utf8; -- 建表时设置表的字符集和引擎 CREATE TABLE table ( `abc` char(32) NOT NULL ...
- spring的事务传播行为
1.PROPAGATION_REQUIRED:如果当前没有事务,就创建一个新事务,如果当前存在事务,就加入该事务,该设置是最常用的设置. 比如说,ServiceB.methodB的事务级别定义为PRO ...
- JQuery的一些基础知识
JQuery的核心的一些方法 each(callback) '就像循环$("Element").length; ‘元素的个数,是个属性$("Element"). ...
- 第6章 征服CSS3选择器(上)
属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进 ...
- 纯css画三角形,勾等形状
//三角形 .money-ul li.active:after { content: ""; position: absolute; bottom: 0; right: 0; bo ...
- JS原型学习笔记
1.原型是函数对象的属性,它的初始值是一个空对象,这个prototype原型对象可以添加方法和属性. 2.构造器对象查找属性和方法时先查找构造器后查找原型. 3.若构造器中的属性和原型中的属性相同,构 ...
- 洛谷P3953 逛公园(dp 拓扑排序)
题意 题目链接 Sol 去年考NOIP的时候我好像连最短路计数都不会啊qwq.. 首先不难想到一个思路,\(f[i][j]\)表示到第\(i\)个节点,与最短路之差长度为\(j\)的路径的方案数 首先 ...
- Python入门-生成器和生成器表达式
昨天我们说了迭代器,那么和今天说的生成器是什么关系呢? 一.生成器 什么是生成器?说白了生成器的本质就是迭代器. 在Python中中有三种方式来获取生成器. 1.通过生成器函数 2.通过各种推导式来实 ...
- Canvas中的save方法和restore方法
初学者也许会误认为canvas中save方法是用来保存绘图状态的图形,而restore方法是用来还原之前保存的绘图状态的图形,其实不然. save():保存当前的绘图状态. restore():恢复之 ...
- RoadFlow工作流与JUI(DWZ)前端框架的集成
此文只说明RoadFlow前端与JUI的集成,关于程序和接口请参照WebForm或MVC文档. 修改JUI配置文件dwz.frag.xml,此文件一般位于JUI根目录下. 2.修改文件js/dwz.n ...