js简单分页,可用
//翻页调用
var pageSize = 1;
var counts = 1;
var current_page = 1;
var rows,total;
search(); //查询所有 function search(){
current_page = 1;
$.ajax({
type: "POST",
url: "findList",
data: {name : $('#searchname').val()},
success: function(data){
total = data.length;
counts = Math.ceil(total/pageSize);
counts = counts == 0 ? 1 : counts;
rows = data;
PageCallback();
}
});
} function PageCallback(){
$("#Result").text("");
$("#pagecount").text("1/1");
var flag = current_page*pageSize;
for(var i=(current_page-1)*pageSize;i<(flag>total?total:flag);i++) {
var v = rows[i];
parentnode = v.parentnode == null ? '' : v.parentnode;
parentName = v.parentName == null ? '' : v.parentName;
description = v.description == null ? '' : v.description;
var html = "<tr>";
html += "<td align='center' valign='middle'>" + v.id + "</td>";
html += "<td align='center' valign='middle'>" + v.name + "</td>";
html += "<td align='center' valign='middle'>" + v.organizationId + "</td>";
html += "<td align='center' valign='middle'>" + v.description + "</td>";
html += "<td align='right' valign='middle'>";
html += "<a class='yichu' href='javascript:void(0)' onclick=edit('";
html += v.id + "','" + v.name + "','" + v.isroot + "','" + parentnode + "','" + parentName + "','" + v.status + "','" + description ;
html += "'); >查看/修改</a>";
var zTree = $.fn.zTree.getZTreeObj("orgTree");
html += "<a class='yichu' href='javascript:void(0)' onclick=del('" + v.id + "'); >删除</a></td>";
html += "</tr>"; $("#Result").append(html);
}
$("#pagecount").text(current_page + "/" + counts );
} //上一页
function prePage(){
if(current_page == 1)
return;
current_page--;
PageCallback();
} //下一页
function nextPage(){
if(current_page == counts)
return;
current_page ++;
PageCallback();
} jsp如下:
<div class="user_query" style="margin-top: 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr class="title">
<td width="7%" align="center" valign="middle">组织编号</td>
<td width="13%" align="center" valign="middle">组织名称</td>
<td width="22%" align="center" valign="middle">层级标识</td>
<td width="21%" align="center" valign="middle">说明</td>
<td width="37%" align="right" valign="middle" class="user_join"><a
href="javascript:void(0)" onclick="add();">添加组织</a></td>
</tr>
</thead>
<tbody id="Result">
</tbody>
</table>
</div>
<div class="users_fanye">
<ul>
<li class="nex" onclick="prePage();">上一页</li>
<li class="nex" id="pagecount">1/1</li>
<!-- <li class="nex">2/2</li> -->
<li class="nex" onclick="nextPage();">下一页</li>
</ul>
</div>
js简单分页,可用的更多相关文章
- Js 简单分页(一)
网上有很多分页的插件 但是没有自己想要的 上代码吧,只有分页部分代码,css 省略了 html <div class="bar2 fr" id="pagecontr ...
- Js 简单分页(二)
此次使用了http://www.purecss.org/ 的前端Css 效果图 上代码 //更新分页工具栏的效果展示 function updatepagetoolshow(){ //判断当前页 及 ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- JavaScript简单分页,兼容IE6,~3KB
简介 兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-pa ...
- 使用Vs2005打造简单分页浏览器(1)原创
原文:使用Vs2005打造简单分页浏览器(1)原创 使用Vs2005打造简单分页浏览器(1)原创1引言2功能3实现过程以及关键点4总结5不足之处6其他7 代码下载 1 引言很早就有搞一个浏览器的 ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
随机推荐
- 从Google开源RE2库学习到的C++测试方案
最近因为科研需求,一直在研究Google的开源RE2库(正则表达式识别库),库源码体积庞大,用C++写的,对于我这个以前专供Java的人来说真的是一件很痛苦的事,每天只能啃一点点.今天研究了下里面用到 ...
- nyoj 236心急的C小加 动态规划( java)
sort函数用法: #include<algorithm> using namespace std; sort(a,a+len;cmp) //a-->数组名, len-- ...
- superF12
superF12是开发内嵌ie内核的桌面客户端时的一个调试工具
- 自己总结的USB数据结构及其描述符
背景: USB理论知识光看着空想总觉着丢三落四,好像哪里没法理解到位,自己做个总结. 正文: 1. USB通信的最基本单位是“包”.如果把“包”肢解的话,可以分为各种“域”(7类,即一串二进制数.每类 ...
- 【C语言入门教程】4.3 多维数组
多维数组是指拥有多组小标的数组,维数的限制有具体编译器决定.多维数组的一般声明形式为: 数据类型 数组名[长度1][长度2]......[长度n]; 数组的总长度等于每组下标长度的乘积.多维数组使用连 ...
- mysql的隐式转化
MySQL隐式转化整理 前几天在微博上看到一篇文章:价值百万的 MySQL 的隐式类型转换感觉写的很不错,再加上自己之前也对MySQL的隐式转化这边并不是很清楚,所以就顺势整理了一下.希望对大家有所帮 ...
- FadeTop – 定时休息提醒工具
FadeTop 是款定时休息提醒工具,其特色是当设定时间到达时,将桌面渐变为指定的颜色,强制提醒但不影响桌面的任何操作 FadeTop is a visual break reminder for W ...
- input注意事项
一.更改place-holder颜色 input::-webkit-input-placeholder { color: #D6D0CA !important; /* WebKit browsers ...
- Effective Java 学习笔记之创建和销毁对象
一.考虑用静态工厂方法代替构造器 1.此处的静态工厂方法是指返回指为类的对象的静态方法,而不是设计模式中的静态工厂方法. 2.静态工厂方法的优势有: a.使用不同的方法名称可显著地表明两个静态工厂方法 ...
- SNMP详解
简单网络管理协议(SNMP)是TCP/IP协议簇的一个应用层协议.在1988年被制定,并被Internet体系结构委员会(IAB)采纳作为一个短期的网络管理解决方案:由于SNMP的简单性,在Inter ...