使用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 =$(; //去掉表头 ...
随机推荐
- Python基础学习总结(四)
6.高阶特性 6.1迭代 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration).在Python中,迭代是通过for ... ...
- CSS3之 :nth-child(n)语法讲解
语法: E:nth-child(n){ sRules } * 匹配父元素索引为n的子元素E :nth-child(n) 让你匹配到父元素的任一子元素: Figure 1:<section id= ...
- svn怎么下载代码到本地
1. 在我们安装好svn时,在指定的目录中点击鼠标右键SVN Checkout,弹出以下窗口.(在文件夹下各自建好前后台的文件夹分别check) 2. 在URL of repository:(存储库的 ...
- package和package-lock区别;dependencies和devDependencies区别
package和package-lock package.json: 主要用来定义项目中需要依赖的包 package-lock.json: 在 npm install时候生成一份文件,用以记录当前状态 ...
- IE6 行内定义成块元素后高度失效
问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...
- mysql索引是什么?索引结构和使用详解
索引是什么 mysql索引: 是一种帮助mysql高效的获取数据的数据结构,这些数据结构以某种方式引用数据,这种结构就是索引.可简单理解为排好序的快速查找数据结构.如果要查“mysql”这个单词,我们 ...
- Java 使用Log4J进行日志操作
使用Log4J进行日志操作 Log4J简介 Log4J是Apache的一个开放源代码项目,它是一个日志操作包,通过使用Log4J,可以指定日志信息输出的目的地,如控制台.文件.CUI组件.NT ...
- 浅谈回归Regression(一)
一.什么是回归? 孩子的身高是否与父母有关? 实际上,父母和孩子的身高是受到回归效应影响的.在时间纵轴上受影响.具有随机性的事物,无不遵循这一规律. 只要数据足够大,人类的身高或者智商,都有趋于平均值 ...
- SQL 截取字符
select SUBSTRING('123,abcdefg',charindex(',','123,abcdefg',0)+1,LEN('123,abcdefg')-charindex(',','12 ...
- angularJS web应用SEO
javascript给网站带来丰富的用户体验,越来越多的网站开始应用angularjs/emberjs这类MVC来开发web应用,可以说能够使用native方式来看法的手机app基本都可以使用替代的j ...