投稿
  1. 首页
  2. IT百科

table表格jquery分页怎么写

中国标准书号 • 2023-5-21 • IT百科 • 阅读 12

table表格jquery分页怎么写,第1张

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%>actionSmUserdomethod=listUser2",//要访问的后台地址 

data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要发送的数据 

complete : function(msg){//msg为返回的数据，在这里做数据绑定 

$("[id=ready]")remove(); 

var data = eval("("+msgresponseText+")"); 

$each(data, function(i, n){ 

var row = $("#template")clone(); 

rowfind("#userId")text(nuserId); 

rowfind("#userName")text(nuserName); 

rowfind("#depId")text(ndepId); 

rowfind("#createTime")text(ncreateTime); 

if(ncreateTime !== undefined) rowfind("#createTime")text(ncreateTime); 

rowfind("#creator")text(ncreator); 

rowfind("#menusId")text(nmenusId); 

rowfind("#isValid")text(nisValid); 

rowattr("id","ready");//改变绑定好数据的行的id 

rowappendTo("#datas");//添加到模板的容器中 

}); 

$("[id=ready]")show(); 

SetPageInfo(); 

} 

}); 

} 

function ChangeDate(date){ 

return datereplace("-","/")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+"条记录，显示第 "+(pageIndexpageSize-pageSize)+" 条 - 第 "+(pageIndexpageSize)+" 条记录"); 

} 

//AJAX方法取得分页总数 

function GetPageCount(){ 

var pageSize = $("#pageSize")val(); 

$ajax({ 

type: "get", 

dataType: "text", 

url: "<%=basePath%>actionSmUserdomethod=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) { 

documentgetElementById("first")disabled = ""; 

documentgetElementById("previous")disabled = ""; 

}else if(state1 == 0){ 

documentgetElementById("first")disabled = "disabled"; 

documentgetElementById("previous")disabled = "disabled"; 

$("#first")attr("class","default_pgFirstDisabled default_pgBtn"); 

$("#previous")attr("class","default_pgPrevDisabled default_pgBtn"); 

}if(state2 == 1){ 

documentgetElementById("next")disabled = ""; 

documentgetElementById("last")disabled = ""; 

}else if(state2 == 0){ 

documentgetElementById("next")disabled = "disabled"; 

documentgetElementById("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:thisstylebackgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:thisstylebackgroundColor='#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 = toolgetIntParameter("pageSize"); 

Integer pageIndex = toolgetIntParameter("pageIndex"); 

ResultPage res = serviceSmUserImplfindAllSmUsers(pageIndex, pageSize); 

List<SmUser> smUserList = (List<SmUser>)resgetResult(); 

JSONArray array = new JSONArray(); 

JSONObject object ; 

for(SmUser user:smUserList){ 

object = new JSONObject(); 

objectput("userId", usergetUserId()); 

objectput("userName",usergetUserName()); 

objectput("depId", usergetOrganCode()); 

objectput("createTime", usergetCreateTime()); 

objectput("creator", usergetCreator()); 

objectput("menusId", usergetMenusId()); 

objectput("isValid", (usergetValid()equals("1")"有效":"无效")); 

arrayadd(object); 

} 

AjaxToolreturnAjaxResponse(response, arraytoJSONString()); 

} 

//获取总的记录数和总页数 

public void getPageCount(ActionMapping mapping, ActionForm form, 

HttpServletRequest request, HttpServletResponse response){ 

RequestTool tool = new RequestTool(request); 

int pageSize = toolgetIntParameter("pageSize"); 

List<POJO> pojos = serviceSmUserImplfindAll(); 

int pageCount = pojossize()% pageSize > 0  (pojossize()/ pageSize+1):(pojossize()/ pageSize); 

JSONArray array = new JSONArray(); 

JSONObject object = new JSONObject(); 

objectput("pageCount", pageCount); 

objectput("totalCount", pojossize()); 

arrayadd(object); 

AjaxToolreturnAjaxResponse(response,arraytoJSONString()); 

}

场景：

springMVC+jquery+ajax+jsp实现在页面中输入数字后，点击按钮，表单中自动加载指定行数据。

1、user实体类

2、创建controller组件类。

toDymyuser（）方法用于跳转到jsp页面

getMyUserClass（）方法用于jsp页面的数据加载来源

3、新增jsp页面

1）、获取当前服务路径bathpath

2）、引入jquery包，这里直接使用的是 http://cdnstaticrunoobcom 下的jquery包，在浏览器中输入该地址可访问，即为可用

3）、引入style样式，让页面简洁美观

4）、在script中，使用ajax时，需要传入参数便于动态显示表格，所以需要与controller层交互，这里使用post的方式，并在url中引入controller中设置的地址，数据传输成功后，动态追加到htmltxt中，最后使用jquery选择器将htmltxt传到元素的html即可。

4、使用springMVC必须要配置webxml文件

5、webxml中使用到了/spring-mvc-servletxml，所以要在web-inf目录下新增该文件

6、启动tomcat，在浏览器中输入： http://localhost:8080/dyuser 。效果如下

使用jquery的each()方法遍历单元格，如果满足条件则进行相应的 *** 作

$(selector)each(function(index,element))

实例演示：在表格中按姓名查找记录，找到则突出显示，否则给出提示

创建Html元素

<div class="box">

<span>实例演示：在表格中按姓名查找记录</span><br>

<div class="content">

姓名:&nbsp;<input type="text" name="name">&nbsp;<input type="button" value="查找">

    <table>

        <tr><td>张三</td><td>175</td><td>140</td></tr>

        <tr><td>李四</td><td>170</td><td>120</td></tr>

        <tr><td>王五</td><td>185</td><td>160</td></tr>

    </table>

</div>

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='text']{width:100px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

table{border-collapse:collapse;}

td{width:80px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

selected{font-weight:bold !important; background: #ff99cc !important;color:#fff;}

编写jquery代码

$(function(){ 

$(":button")click(function() {

$("table tr")removeClass('selected');   // 还原样式

name = $("input[name='name']")val();    // 要查找的名字

flag = true;                             // 表示未查到目标

$("table tr")find("td:first")each(function() {

if($(this)html()==name){            // 如果找到了

$(this)parent("tr")addClass('selected');    // 为整行设置样式

flag = false;                    // 将未找到标记设为false

return false;                    // 提前终止循环

}

});

if(flag)                                 // 如果没找到就给出提示

alert("查无此人");  

});

});

观察效果

如果表中有相应记录

如果表中并无相应记录

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/12159571.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
中国标准书号 中国标准书号 一级用户组
0 0
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表（0条）

保存