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

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

我们可以看到,在未选中设备信息部分有一个分页,这个是要和后台进行数据交互的,姑且称为“真分页”,而选中设备信息部分也有一个分页,这个并不和后台进行数据交互,仅仅是为了解决数据条数过多造成的页面过长,针对这个问题,我使用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实现伪分页的更多相关文章

  1. 用jquery编写的分页插件

    用jquery编写的分页插件 源码 function _pager_go(total_page) { var page_str = $("#_pager_textbox").val ...

  2. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  3. jQuery Pagination Ajax分页插件中文详解(摘)

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  4. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  5. 浅谈jQuery Pagination Ajax 分页插件的使用

    插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...

  6. 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作

    PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...

  7. 基于jQuery封装的分页组件(可自定义设置)

    jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...

  8. jQuery伪分页效果

    如图,我们首先分析在一个页面存放4条内容,其余的超出隐藏(因为这里没有后台数据,所以我们把内容‘写死’),然后就是下面两个按钮(这里我们不用button,因为button有自带的提交功能),然后我们可 ...

  9. JQuery实现table分页

    1.直接贴代码: ; //每页显示的记录条数 ; //显示第curPage页 var len; //总行数 var page; //总页数 $(function(){ len =$(; //去掉表头 ...

随机推荐

  1. Java 重写(Override)与重载(Overload)区别

    2019-04-1217:31:19 (1)方法重载是一个类中定义了多个方法名相同,而他们的参数的数量不同或数量相同而类型和次序不同,则称为方法的重载(Overloading). (2)方法重写是在子 ...

  2. 同步ajax请求

    /* * 发送同步ajax请求的函数 CreateBy 秋水 */ function syncAjax(data) { var resp = null; $.ajax({ type : "P ...

  3. hdu Anniversary party 树形DP,点带有值。求MAX

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  4. maven项目在eclipse中debug

    作为新手,出现bug后,debug找出bug还是很重要的,能节约大量找bug的时间 1.选中项目,右键点击-->run as -->run configurations 2.在run co ...

  5. JavaScript中callee,caller,argument的理解

    argument代表当前函数的参数数组: 1.callee的用法: argument.callee表示谁引用的这个函数 其他解释:(arguments.callee表示引用当前正在执行的函数,或者说是 ...

  6. 日常捕获的野生知识 - javascript获取屏幕大小

    刚刚接触JavaScript,涉及到 document , window 的一些基本知识不是很了解,今天为了一个屏幕大小折腾了半天,幸好找到了很好的例子学习. 代码如下: <html> & ...

  7. Apache服务器运维笔记(2)----使用<IfDefine>容器实现不同的配置

    还有一种方法用来实现不同配置的Apache服务器启动,就是在一个配置文件中使用<IfDefine name> ... </IfDefine> 容器来定义,在<IfDefi ...

  8. Python爬虫教程-14-爬虫使用filecookiejar保存cookie文件(人人网)

    Python爬虫教程-14-爬虫使用filecookiejar保存cookie文件(人人网) 上一篇介绍了利用CookieJar访问人人网,本篇将使用filecookiejar将cookie以文件形式 ...

  9. 【Python】directory字典类型

    它的基本格式是(key是键,value是值): d = {key1 : value1, key2 : value2 } Example dir = {'Mic':1,'Sun':2} for k in ...

  10. M-AddTwoNumbers-未完成

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...