//设置分页
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. Job中织梦标签的调用

    织梦CMS是一个好东东, 可以让一个网站更好维护和管理, 唯一让我感到忧桑的就是经常在搭后台的时候记不住那些标签,,无奈只能去看手册,有相同的案例直接COPY过来,直接用就OK~~~其实CMS这个东西 ...

  2. Java实现zip压缩多个文件下载

    为了更好的演示,首先创建一个文件实体FileBean,包含了文件路径和文件名称: package com.javaweb.entity; import java.io.Serializable; /* ...

  3. PHP 使用命名空间(namespace),实现自动加载

    示例: #/DB/MySql.class.php也就是DB文件夹下有MySql.class.php文件 namespace DB; class MySql { public function __co ...

  4. JVM执行引擎总结(读《深入理解JVM》) 早期编译优化 DCE for java

    execution engine: 运行时栈current stack frame主要保存了 local variable table, operand stack, dynamic linking, ...

  5. lustre文件系统部署流程

    # 1 准备工作### 1.1 添加以太网址添加以太网地址,使得gio017可以访问到需要安装的节点.修改gio017上的/etc/hosts,将需要批量操作的节点名以如下方式添加.```[gio01 ...

  6. 下位机多个".c, .h"文件的相互包含及排版

    一.背景: 自从接触单片机编程以来,由于工作上的需要,不可避免的时常会接手别人的代码,但常常由于上一位同事的编码随意性有点大,导致可读性非常的差,有时候不得不完全舍弃原有代码,推倒重来,无形中增加了工 ...

  7. 深入理解Java虚拟机之读书笔记三 内存分配策略

    一般的内存分配是指堆上的分配,但也可能经过JIT编译后被拆散为标量类型并间接地在栈上分配.对象主要分配在新生代的Eden区上,如果启动了本地线程分配缓冲,将按线程优先在TLAB上分配,少数情况下直接分 ...

  8. leetcode 173. Binary Search Tree Iterator

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...

  9. 2016移动端web5分钟速成(适合新手)

    http://www.w3cfuns.com/notes/20813/fecbb840a2574cf712a8625f88a7ab3a.html

  10. Win10主题打不开,自动弹出桌面图标设置

    把官方下载的主题文件扩展名改成.deskthemepack,然后双击主题文件就可以正常使用了.