前台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服务器 ...
随机推荐
- GOF业务场景的设计模式-----工厂模式
定义:定义一个用于创建对象的接口,让子类决定实例化哪一个类,工厂方法使一个类的实例化延迟到其子类. 工厂方法模式 基本代码 interface IProduct { public void produ ...
- php从零开始
吐槽:今天开始撸PHP了,从此前端少了个小白,PHP多了个小白... 本白从3年前陆陆续续开始一会儿撸会儿PHP一会儿撸前端.前端撸的比较多,PHP撸的比较少,当然本白撸php大多都是被逼的!! 然后 ...
- Android中实现圆角矩形及半透明效果。
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们为了美观,有时候需要使用圆角矩形,或半透明之类的效果,在网页设计中很容易实现.但在Android开发中 ...
- 清除浮动(clearfix hack)
eg:
- PHP团队 编码规范 & 代码样式风格规范
一.基本约定 1.源文件 (1).纯PHP代码源文件只使用 <?php 标签,省略关闭标签 ?> : (2).源文件中PHP代码的编码格式必须是无BOM的UTF-8格式: (3).使用 U ...
- ajax异步提交数据动态更改select选项
<!DOCTYPE html> <html> <head> <title></title> <script src="../ ...
- .Net的要知道的一些事
1.什么是.NET?什么是CLI?什么是CLR?IL是什么?JIT是什么,它是如何工作的?GC是什么,简述一下GC的工作方式? .Net是微软推出的框架 CLI是公共语言接口(规范) CLR是公共语言 ...
- Android开源项目(二)
第二部分 工具库 主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过 ...
- Android内存性能优化(内部资料总结)
eoe上看到的一个很好的文章 摘抄了下来留着自己看看 刚入门的童鞋肯能都会有一个疑问,Java不是有虚拟机了么,内存会自动化管理,我们就不必要手动的释放资源了,反正系统会给我们完成.其实Java中没有 ...
- TCP(传输控制协议)和三次握手和四次断开
TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793定义.在简化的计算机网络OSI模型中, ...