//设置分页
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的更多相关文章

  1. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  2. JS / Egret 单笔手写识别、手势识别

    UnistrokeRecognizer 单笔手写识别.手势识别 UnistrokeRecognizer : https://github.com/RichLiu1023/UnistrokeRecogn ...

  3. 前台js分页,自己手写逻辑

    js代码如下: //设置分页 var pageSize = 10; //设置一次显示多少页 var pageLimit = 5; $(function(){ //查询所有内容 $.post(ctx + ...

  4. 五四青年节,今天要学习。汇总5道难度不高但可能遇到的JS手写编程题

    壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...

  5. 待实践二:MVC3下的3种验证 (1)前台 jquery validate验证 (2)MVC实体验证 (3)EF生成的/自己手写的 自定义实体校验(伙伴类+元素据共享)

    MVC3下的3种验证 (1):前台Jquery Validate脚本验证 引入脚本 <script src="../js/jquery.js" type="text ...

  6. django 常用方法总结 < 手写分页-上传头像-redis缓存,排行 ...>

    1.不使用自带模块<Paginator>的手写分页功能views.pydef post_list(request): page = request.GET.get('page', 1) # ...

  7. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  8. 手写Express.js源码

    上一篇文章我们讲了怎么用Node.js原生API来写一个web服务器,虽然代码比较丑,但是基本功能还是有的.但是一般我们不会直接用原生API来写,而是借助框架来做,比如本文要讲的Express.通过上 ...

  9. 手写Koa.js源码

    用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...

随机推荐

  1. JS禁止WEB页面鼠标事件大全

    <!--禁止鼠标右键代码-->:<noscript><ifra:<scriptlanguage=javas:<!--:if(window.Event):doc ...

  2. Java当中的内存分配以及值传递问题内存解析

    首先必须说明作为Java程序员对于内存只要有大致的了解就可以了,如果你对Java当中的某一个知识点在不需要分析内存分配过程的情况下可以掌握,那就大可不必去研究内存.如果你对知识点已经掌握,那么你应该把 ...

  3. 深入分析,理解jQuery.Deferred源码

    前言: 如果你对jQuery.Callback回调对象不了解,或者只掌握其方法,但是没有通过阅读源码理解,可以先阅读 前一章jQuery.Callbacks源码解读二,因为只有完全理解jQuery.C ...

  4. 开始使用pycharm了

    我将python的主力开发工具从eclipse+pydev切换到pycharm社区版了. 选择pycharm 的原因:1. pycharm可以实时按照pep8的规范检查code style和namin ...

  5. Java 7 Concurrency Cookbook 翻译 序言

    在日常的Java代码开发过程中,很难免地有对多线程的需求,掌握java多线程和并发的机制也是Java程序员写出更健壮和高效代码的基础.笔者找寻国内已出版的关于Java多线程和并发的的中文书籍和翻译书籍 ...

  6. javascript基础07

    javascript基础07 1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有 ...

  7. STM32通用定时器(转载)

    STM32的定时器功能很强大,学习起来也很费劲儿. 其实手册讲的还是挺全面的,只是无奈TIMER的功能太复杂,所以显得手册很难懂,我就是通过这样看手册:while(!SUCCESS){看手册-}才搞明 ...

  8. mysql的安装以及基本操作

    一.在Linux 下安装MySQL ubuntu 下可以直接使用apt-get . centos 下yum源有没有就不知道了. 1. sudo apt-get install mysql-server ...

  9. mysql 查询某个日期时间段,每天同一时间段的数据

    mysql 查询某个日期时间段,每天同一时间段的数据: SELECT * FROM t_a01_eltable WHERE DATE_FORMAT(acqtime,'%Y-%m-%d')>='2 ...

  10. 5-python学习——条件语句

    5-python学习——条件语句 5-python学习——条件语句 条件语句if else形式 if else条件语句说明 测试一下 编程语言一般都由这么几个部分组成 变量 条件分支语句 循环语句 函 ...