前台js分页,自己手写逻辑2
//设置分页
var pageSize = 10;
//设置一次显示多少页
var pageLimit = 5;
$(function(){
$.post("rest/rtdbfix/listAll",{start:0,limit:pageSize},function(result){
console.log(result);
if(!result || result.length==0){
return;
}
//计算当前有多少页
var pageTotal = Math.ceil(result[0].recordsTotal/pageSize);
//当前页数
var currentPage = 0;
//临时变量,比较数目大小
var count = 0;
//比较当前应显示多少数据
if(result[0].recordsTotal<=pageSize){
count = msg.length;
}else{
count = pageSize;
}
//存储内容
var temp = "<table><tr><td>SUID</td><td>SNAME</td><td>SPOTTYPE</td><td>SUNIT</td><td>LIMITUPPER</td><td>LIMITLOWER</td><td>NLEVEL</td><td>SVALUE</td></tr>";
for(var i=0;i<result.length;i++){
var str = "<tr><td>"+result[i].suid+"</td>"
+"<td>"+result[i].sname+"</td>"
+"<td>"+result[i].spottype+"</td>"
+"<td>"+result[i].sunit+"</td>"
+"<td>"+result[i].limitupper+"</td>"
+"<td>"+result[i].limitlower+"</td>"
+"<td>"+result[i].nlevel+"</td>"
+"<td>"+result[i].svalue+"</td>";
temp += str;
}
temp += "</table>";
//分页
temp += '<div>'
+'<a href="javascript:void(0)" onclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
+'<a href="javascript:void(0)" onclick="changePage('+((0-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
//如果总页数大于设置的页数,则
if(pageTotal>pageLimit){
for(var i=0;i<pageLimit;i++){
temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
}
temp += '<a style="cursor: not-allowed;">......</a>';
}else{
for(var i=0;i<pageTotal;i++){
temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
}
}
temp += '<a href="javascript:void(0)" onclick="changePage('+((0+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
+'<a href="javascript:void(0)" onclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
+'</div>'; $("#content").html(temp);
});
});
function changePage(start,pageTotal,currentPage){
if(start<0){
start = 0;
currentPage+=1;
}
if(currentPage>pageTotal){
start = start - pageSize;
currentPage-=1;
}
$.ajaxSetup({async : false});
$.post("rest/rtdbfix/listAll",{start:start,limit:pageSize},function(result){
if(!result || result.length==0){
return;
}
var temp = "<table><tr><td>SUID</td><td>SNAME</td><td>SPOTTYPE</td><td>SUNIT</td><td>LIMITUPPER</td><td>LIMITLOWER</td><td>NLEVEL</td><td>SVALUE</td></tr>";
for(var i=0;i<result.length;i++){
var str = "<tr><td>"+result[i].suid+"</td>"
+"<td>"+result[i].sname+"</td>"
+"<td>"+result[i].spottype+"</td>"
+"<td>"+result[i].sunit+"</td>"
+"<td>"+result[i].limitupper+"</td>"
+"<td>"+result[i].limitlower+"</td>"
+"<td>"+result[i].nlevel+"</td>"
+"<td>"+result[i].svalue+"</td>";
temp += str;
}
temp += "</table>";
//分页
temp += '<div>'
+'<a href="javascript:void(0)" onclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
+'<a href="javascript:void(0)" onclick="changePage('+((currentPage-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
if(pageTotal > pageLimit){
//判断如果是小于当前页数
if(currentPage<Math.ceil(pageLimit/2)){
for(var i=0;i<pageLimit;i++){
temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
}
temp += '<a style="cursor: not-allowed;">......</a>';
//判断尾页
}else if(pageTotal<(currentPage+Math.ceil(pageLimit/2))){
temp += '<a style="cursor: not-allowed;">......</a>';
for(var i=(pageTotal-pageLimit);i<pageTotal;i++){
temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
}
//判断中间页
}else{
temp += '<a style="cursor: not-allowed;">......</a>';
for(var i=(currentPage-Math.ceil(pageLimit/2)+1);i<(pageLimit+currentPage-Math.ceil(pageLimit/2)+1);i++){
temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
}
temp += '<a style="cursor: not-allowed;">......</a>';
}
}else{
for(var i=0;i<pageTotal;i++){
temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
}
}
temp += '<a href="javascript:void(0)" onclick="changePage('+((currentPage+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
+'<a href="javascript:void(0)" onclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
+'</div>'; $("#content").html(temp);
});
}
前台js分页,自己手写逻辑2的更多相关文章
- Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...
- JS / Egret 单笔手写识别、手势识别
UnistrokeRecognizer 单笔手写识别.手势识别 UnistrokeRecognizer : https://github.com/RichLiu1023/UnistrokeRecogn ...
- 前台js分页,自己手写逻辑
js代码如下: //设置分页 var pageSize = 10; //设置一次显示多少页 var pageLimit = 5; $(function(){ //查询所有内容 $.post(ctx + ...
- 五四青年节,今天要学习。汇总5道难度不高但可能遇到的JS手写编程题
壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...
- 待实践二:MVC3下的3种验证 (1)前台 jquery validate验证 (2)MVC实体验证 (3)EF生成的/自己手写的 自定义实体校验(伙伴类+元素据共享)
MVC3下的3种验证 (1):前台Jquery Validate脚本验证 引入脚本 <script src="../js/jquery.js" type="text ...
- django 常用方法总结 < 手写分页-上传头像-redis缓存,排行 ...>
1.不使用自带模块<Paginator>的手写分页功能views.pydef post_list(request): page = request.GET.get('page', 1) # ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 手写Express.js源码
上一篇文章我们讲了怎么用Node.js原生API来写一个web服务器,虽然代码比较丑,但是基本功能还是有的.但是一般我们不会直接用原生API来写,而是借助框架来做,比如本文要讲的Express.通过上 ...
- 手写Koa.js源码
用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...
随机推荐
- gflags
一.安装配置 下载地址: https://code.google.com/p/gflags/downloads/list 解压安装: tar zxvf gflags-2.0.tar.gz && ...
- jQuery.Callbacks 源码解读二
一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...
- caller和callee
我们先来看下caller. caller:返回一个对函数(该函数调用了当前函数)的引用. functionName.caller:functionName对象是所执行函数的名称. 说明 对于函数来说, ...
- Ubuntu 16.10 虚拟机安装记录
一定要选自定义. 这里一定要选 稍后安装操作系统 都是坑! 启动时出现'SMBus Host Controller not enabled'错误提示,进不到图形界面. 解决办法:1.在启动Ubunt ...
- C++你不知道的那些事儿—C++语言的15个晦涩特性
这个列表收集了 C++ 语言的一些晦涩(Obscure)特性,是我经年累月研究这门语言的各个方面收集起来的.C++非常庞大,我总是能学到一些新知识.即使你对C++已了如指掌,也希望你能从列表中学到一些 ...
- Maven 跳过测试目录
在命令行使用 mvn install -Dmaven.skipTests 或 mvn install -Dmaven.test.skip=true 或在pom.xml设置 <build> ...
- C\C++ 字符串的格式化与类型转化
字符串格式化 1.sscanf int sscanf(const char *buffer,const char *format,[argument ]...) 取到指定字符为止的字符串.如在下例中, ...
- Keepalived高可用集群介绍
1.Keepalived服务介绍 Keepalived起初是专为LVS设计的,专门用来监控LVS集群系统中各个服务节点的状态,后来又加入了VRRP的功能,因此除了配合LVS服务外,也可以为其他服务(n ...
- FineUI第十二天---锚点布局
锚点布局的典型结构: <x:Panel Layout="Anchor" runat="server"> <Items ...
- WordPress文章浏览历史插件
选自:http://www.ludou.org/wordpress-recently-viewed.html 最近有很多网友问我,露兜博客右边栏底部的 您刚刚看过 栏目是怎么实现.其实我也是参考的这篇 ...