使用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 =$(; //去掉表头 ...
随机推荐
- [android] 天气app布局练习(三)
主要练习LinearLayout和layout_weight属性 <RelativeLayout xmlns:android="http://schemas.android.com/a ...
- CF Dima and Salad 01背包
C. Dima and Salad time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- MyBatis_注解式开发
一.注解式开发 mybatis的注解主要替换映射文件. 二.基础语法 注解首字母大写,因为注解与类.接口是同一级别的(类同一层级的:类,接口,注解,枚举).一个注解,后台对应着一个@interface ...
- ExceptionHelper异常工具类
using System;using System.Collections.Generic;using System.Text; namespace JiaWel.Utilities{ public ...
- IE 8兼容:<meta http-equiv="X-UA-Compatible" content="IE=edge" /> X-UA-Compatible的解释
前言:9月份开始了,大四也真正的到来了.深知自己网页布局还有很大的缺陷,接下来打算从工作中抽时间出来模仿着一些互联网公司的网站.顺便把基础理论知识打好. 第一个目标:小米官网:后续会把练习的项目放到g ...
- 图片大于div时的居中显示
当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden:这时即使外层div设置了水平垂直居 ...
- 项目经验:GIS<MapWinGIS>建模第六天
针对管网的暴管发生情况的,关阀分析,能够更快,更及时给施工作人员找到最近需要关停的阀门点,及受影响的管网段,如在这个区域内,还能找到受影响需要停水的用户
- 弧形菜单(Android)
弧形菜单(Android) 前言:公司需求,自己写的一个弧形菜单! 效果: 开发环境:AndroidStudio2.2.1+gradle-2.14.1 涉及知识:1.自定义控件,2.事件分发等 部分代 ...
- string 替换字符串
C++的string提供了replace方法来实现字符串的替换,但是对于将字符串中某个字符串全部替换这个功能,string并没有实现,我们今天来做的就是这件事.首先明白一个概念,即string替换所有 ...
- You must not call setTag() on a view Glide is targeting when use Glide
以下代码是一个显示图片的RecyclerView 的Adapter用到的,当点击图片,跳到另一个Activity显示大图.RecyclerView 与ListView不同 然而没有setOnClick ...