前台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服务器 ...
随机推荐
- HTML的内联元素换行问题
一般a.span.label多个组合,需要换行时,使用以下CSS来处理: white-space: nowrap; display: inline-block;
- [译]AngularJS Service vs Factory - Once and for all
原文: http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html Service和Fa ...
- 基础知识系列☞MSSQL→约束
遇到一个数据库设计很渣的系统··· 本来一个约束就能解决的问题·以前建库的时候也不设计好···
- ubuntu安装ssh
为了解决远程连接ubuntu服务器控制端,方便操作.ubuntu不同的版本安装方式一致!首先在ubuntu服务器下安装SSH服务linux安装命令:sudo apt-get install opens ...
- Logistic 回归(sigmoid函数,手机的评价,梯度上升,批处理梯度,随机梯度,从疝气病症预测病马的死亡率
(手机的颜色,大小,用户体验来加权统计总体的值)极大似然估计MLE 1.Logistic回归 Logistic regression (逻辑回归),是一种分类方法,用于二分类问题(即输出只有两种).如 ...
- androids-addjavascriptinterface-equivalent-in-ios
http://stackoverflow.com/questions/7103159/androids-addjavascriptinterface-equivalent-in-ios
- iOS中AOP与Method Swizzling 项目中的应用
引子:项目中需要对按钮点击事件进行统计分析,现在项目中就是在按钮的响应代码中添加点击事件,非常繁琐.所以使用了AOP(面向切面编程),将统计的业务逻辑统一抽离出来. 项目中添加的开源库:https:/ ...
- iOS开发——UI进阶篇(七)程序启动原理、打电话、发短信
一.Info.plist常见的设置 1.建立一个工程后,会在Supporting files文件夹下看到一个“工程名-Info.plist”的文件,该文件对工程做一些运行期的配置,非常重要,不能删除 ...
- iOS开发——UI基础-UIImage,UIImageView的使用
1.UIImage 创建UIImage的两种方法 UIImage *image = [UIImage imageNamed:imageNmae]; UIImage *image = [UIImage ...
- python 函数的调用 和执行 小知识
1.符号表 执行一个函数会引入一个用于函数的局部变量的新符号表. 更确切地说, 函数中的所有的赋值都是将值存储在局部符号表: 而变量引用首先查找局部符号表, 然后是上层函数的局部符号表, 然后是全局符 ...