基于Jquery实现表格动态分页实现代码
当页面点击分页图标时，程序会自动去后台获取对应页数的记录。
关键代码如下：
需要引入的css和js文件有：
代码如下:
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link>
<link ID="skin" rel="stylesheet" type="text/css" href="<%=basePath %>css/config.css" />
<script language="javascript" type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
<script language="jscript" type="text/javascript">
var pageIndex = 1; //当前页数
$(function(){
GetPageCount();//获取分页数量以及总的记录条数
$("#load").hide();//隐藏loading提示
$("#template").hide();//隐藏模板
ChangeState(0,1);//设置翻页按钮的初始状态
bind();//绑定第一页的数据
//第一页按钮click事件
$("#first").click(function(){
pageIndex = 1;
ChangeState(0,1);
bind();
});
//上一页按钮click事件
$("#previous").click(function(){
pageIndex -= 1;
ChangeState(-1,1);
if(pageIndex <= 1){
pageIndex = 1;
ChangeState(0,-1);
}
bind();
});
//下一页按钮click事件
$("#next").click(function(){
pageIndex += 1;
ChangeState(1,-1);
if(pageIndex>=pageCount)
{
pageIndex = pageCount;
ChangeState(-1,0);
}
bind(pageIndex);
});
//最后一页按钮click事件
$("#last").click(function(){
pageIndex = pageCount;
ChangeState(1,0);
bind(pageIndex);
});
//每页显示记录条数select事件
$("#pageSize").change(function(){
bind();
})
});
//AJAX方法取得数据并显示到页面上
function bind(){
$("#load").show();
var pageSize = $("#pageSize").val();
$.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "<%=basePath%>actionSmUser.do?method=listUser2",//要访问的后台地址
data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要发送的数据
complete : function(msg){//msg为返回的数据，在这里做数据绑定
$("[id=ready]").remove();
var data = eval("("+msg.responseText+")");
$.each(data, function(i, n){
var row = $("#template").clone();
row.find("#userId").text(n.userId);
row.find("#userName").text(n.userName);
row.find("#depId").text(n.depId);
row.find("#createTime").text(n.createTime);
if(n.createTime !== undefined) row.find("#createTime").text(n.createTime);
row.find("#creator").text(n.creator);
row.find("#menusId").text(n.menusId);
row.find("#isValid").text(n.isValid);
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
$("[id=ready]").show();
SetPageInfo();
}
});
}
function ChangeDate(date){
return date.replace("-","/").replace("-","/");
}
//设置第几页/共几页的信息
function SetPageInfo(){
var pageCount = $("#pageCount").val();
var totalCount = $("#totalCount").val();
var pageSize = $("#pageSize").val();
$("#pageinfo").html(" 第<input class='default_pgCurrentPage' id='pageIndex' type='text' value='"+pageIndex+
"' style='width: 30px' /> 页" + "/" +"共 "+pageCount+"页"+
" 检索到 "+totalCount+"条记录，显示第 "+(pageIndex*pageSize-pageSize)+" 条 - 第 "+(pageIndex*pageSize)+" 条记录");
}
//AJAX方法取得分页总数
function GetPageCount(){
var pageSize = $("#pageSize").val();
$.ajax({
type: "get",
dataType: "text",
url: "<%=basePath%>actionSmUser.do?method=getPageCount",
data: "pageSize="+pageSize ,
async: false,
success: function(msg){
var data = eval("("+msg+")");
$("#pageCount").val(data[0].pageCount);
$("#totalCount").val(data[0].totalCount);
}
});
}
//改变翻页按钮状态
function ChangeState(state1,state2){
$("#first").attr("class","default_pgFirst default_pgBtn");
$("#previous").attr("class","default_pgPrev default_pgBtn");
$("#next").attr("class","default_pgNext default_pgBtn");
$("#last").attr("class","default_pgLast default_pgBtn");
if(state1 == 1) {
document.getElementById("first").disabled = "";
document.getElementById("previous").disabled = "";
}else if(state1 == 0){
document.getElementById("first").disabled = "disabled";
document.getElementById("previous").disabled = "disabled";
$("#first").attr("class","default_pgFirstDisabled default_pgBtn");
$("#previous").attr("class","default_pgPrevDisabled default_pgBtn");
}if(state2 == 1){
document.getElementById("next").disabled = "";
document.getElementById("last").disabled = "";
}else if(state2 == 0){
document.getElementById("next").disabled = "disabled";
document.getElementById("last").disabled = "disabled";
$("#next").attr("class","default_pgNextDisabled default_pgBtn");
$("#last").attr("class","default_pgLastDisabled default_pgBtn");
}
}
</script>
<body>
<div>
<div>
<br />
<table id="datas" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;">
<tr class="fixheader">
<th width="14%">
用户ID</th>
<th width="14%">
用户名称</th>
<th width="14%">
所在科室</th>
<th width="14%">
创建时间</th>
<th width="14%">
创建人</th>
<th width="14%">
菜单集名称</th>
<th width="14%">
是否有效</th>
</tr>
<tr id="template" height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;">
<td id="userId" class="tdc">
</td>
<td id="userName" class="tdc">
</td>
<td id="depId" class="tdc">
</td>
<td id="createTime" class="tdc">
</td>
<td id="creator" class="tdc">
</td>
<td id="menusId" class="tdc">
</td>
<td id="isValid" class="tdc">
</td>
</tr>
</table>
</div>
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
LOADING....
</div>
<div class="default_pgContainer" >
<div class="default_container">
<div class="default_pgPanel" id="skinDiv">
<table class="default_pgToolbar">
<tr>
<td class="black_pgCurrentPage">
<select id="pageSize" name="pageSize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</td>
<td>
<div id="first" class="default_pgFirst default_pgBtn" />
</td>
<td>
<div id="previous" class="default_pgPrev default_pgBtn" />
</td>
<td class="default_separator">
</td>
<td>
<div id="next" class="default_pgNext default_pgBtn" />
</td>
<td>
<div id="last" class="default_pgLast default_pgBtn" />
</td>
<td class="default_separator">
</td>
<td>
<span id="pageinfo"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="test"></div>
<input type="hidden" id="pageCount" style="width: 45px" />
<input type="hidden" id="totalCount" style="width: 45px" />
</body>
//分页获取用户信息
public void listUser2(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
RequestTool tool = new RequestTool(request);
Integer pageSize = tool.getIntParameter("pageSize");
Integer pageIndex = tool.getIntParameter("pageIndex");
ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize);
List<SmUser> smUserList = (List<SmUser>)res.getResult();
JSONArray array = new JSONArray();
JSONObject object ;
for(SmUser user:smUserList){
object = new JSONObject();
object.put("userId", user.getUserId());
object.put("userName",user.getUserName());
object.put("depId", user.getOrganCode());
object.put("createTime", user.getCreateTime());
object.put("creator", user.getCreator());
object.put("menusId", user.getMenusId());
object.put("isValid", (user.getValid().equals("1")?"有效":"无效"));
array.add(object);
}
AjaxTool.returnAjaxResponse(response, array.toJSONString());
}
//获取总的记录数和总页数
public void getPageCount(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
RequestTool tool = new RequestTool(request);
int pageSize = tool.getIntParameter("pageSize");
List<POJO> pojos = serviceSmUserImpl.findAll();
int pageCount = pojos.size()% pageSize > 0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize);
JSONArray array = new JSONArray();
JSONObject object = new JSONObject();
object.put("pageCount", pageCount);
object.put("totalCount", pojos.size());
array.add(object);
AjaxTool.returnAjaxResponse(response,array.toJSONString());
}
文件打包下载
相关推荐
-
jquery DataTable实现前后台动态分页
整理文档,搜刮出一个jquery DataTable实现前后台动态分页,稍微整理精简一下做下分享. html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>测试页面<
-
基于Jquery实现表格动态分页实现代码
当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty
-
基于jquery实现表格无刷新分页
本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre
-
利用jQuery中的ajax分页实现代码
本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下 把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.pageAjax(url,functionName,showDIv); 这里的url是你要请求的ajax
-
基于jQuery实现表格内容的筛选功能
废话不多说了,直接给大家贴关键代码了.具体代码如下所示: <html> <head> <title>表格内容的筛选</title> <link type="text/css" rel="stylesheet" href="css/contains.css" /> <style type="text/css"> table { width: 50%; bor
-
基于jQuery使用Ajax动态执行模糊查询功能
使用Ajax动态执行模糊查询功能 •必须:需要一个执行查询的接口: 说明: 1.搜索模块仅仅使用了boostrap的样式以及Jquery.js文件 2.因为我使用的layui的弹出层里面做的搜索ifram,所以确定和取消按钮的关闭当前页面的功能都是layui的方式,如果不是ifram的窗口仅仅在当前窗口执行的情况下,可以使用下面的语句来进行关闭当前页面的操作: window.opener=null; window.open('','_self'); window.close(); 效果展示: 引
-
基于jQuery实现交互体验社会化分享代码附源码下载
先给大家展示下效果图,看看是不是亲想要的效果,如果满足您的要求请继续往下阅读. 效果展示 源码下载 基于jQuery交互体验社会化分享代码.这是一款鼠标点击分享按钮向右滑出腾讯微博,新浪微博,QQ空间,豆瓣,微信,二维码分享等分享平台. html代码: <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';clear:both;width:160px;margin:0 auto;"&
-
jquery实现的伪分页效果代码
本文实例讲述了jquery实现的伪分页效果代码.分享给大家供大家参考,具体如下: 这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期待大家关注. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W
-
基于jquery实现的树形菜单效果代码
本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
-
基于.net standard 的动态编译实现代码
在上篇文章[基于.net core 微服务的另类实现]结尾处,提到了如何方便自动的生成微服务的客户端代理,使对于调用方透明,同时将枯燥的东西使用框架集成,以提高使用便捷性.在尝试了基于 Emit 中间语言后,最终决定使用生成代码片段然后动态编译的模式实现. 1.背景: 其一在前文中,我们通过框架实现了微服务面向使用者的透明调用,但是需要为每个服务写一个客户端代理,显得异常繁琐,其二项目中前端站点使用了传统的.Net Framework 框架,后端微服务我们使用了.Net Core 框架改造,短时
-
jQuery给表格添加分页效果
本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下 1. 新建一个Table,添加十行数据 <table cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <t