table表格jquery分页怎么写
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.pageCount);
$(“#totalCount“).val(data.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》
html页面代码如下：
复制代码代码如下:
《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》
后台action中代码如下：
复制代码代码如下:
//分页获取用户信息
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是什么 在网站中有什么作用
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。所以在网站设计中使用jQuery可以写更少的代码实现更多的功能。而且它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。-分页
扩展资料：
jQuery的语言特点：
1、快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
2、提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
3、创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。-query
参考资料：百度百科——jQuery
JavaScript和jQuery和java都是怎样的关系
您好，JavaScript是客户端脚本语言，jQuery属于基于JavaScript上面的函数库，里面封装了很多易于操作的函数，，注意：这两个与java毫无关系，java属于一个后端语言，与JavaScript和jQuery毫无关系
-分页
