使用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 =$(; //去掉表头 ...
随机推荐
- Redis整合spring总结
一:Redis简介: Redis是一个开源(BSD许可)的内存数据结构存储,用作数据库,缓存和消息代理. 简单来说,它是一个以(key,value)的形式存储数据的数据库. 官网:https://re ...
- form表单在发送到服务器时候编码方式
enctype(编码方式):规定了form表单在发送到服务器时候编码方式.有如下的三个值可选: 1.application/x-www-form-urlencoded.默认的编码方式.但是在用文本的传 ...
- thinkphp怎么把数据库中的列的值存到下拉框中
1. 先去数据库中查值,查询整个数据表,结果为二维数组. $project = M("project"); $cell = $project->where(array('st ...
- pyhton中list的基本操作
list:可以按规则,按顺序,存取大量数据 1.增 append() 在列表尾部追加元素 insert() 按照列表索引添加元素 extend() 迭代添加元素,一次添加多个元素 2.删 pop() ...
- hdu 1159 Common Subsequence(最长公共子序列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1159 Common Subsequence Time Limit: 2000/1000 MS (Jav ...
- Vue2.0中的系统指令
v-on注册事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Incorrect string value: '\xE8\xAF\xAD\xE6\x96\x87' for column 'name' at row 1
报错的原因就是在执行插入时对Name这个字段被赋予了错误的字符串值:’\xE4\xB8\xAD\xE6\x96\x87’ 实际上就函数里面的变量接收到的值编码格式跟它定义的不一致. 使用navicat ...
- JDBC URL格式定制
数据库URL制定: 当加载的驱动程序,可以建立程序中使用DriverManager.getConnection()方法的连接.为方便参考,让列出了三个重载DriverManager.getConnec ...
- WebRequest的get及post提交
static string get_html(string url) { var request = WebRequest.Create(url); var response = request.Ge ...
- C#接收WebSphere MQ中文乱码问题
最近在用IBM的WebSphere MQ做数据传输,客户端操作系统Windows,服务器是AIX,我们用的都是UTF-8编码,但是联调时发现带中文的都出现了乱码.折腾了好久才发现问题,原来是CCSID ...