基于jquery實現(xiàn)的表格分頁實現(xiàn)代碼
更新時間:2011年06月21日 22:57:38 作者:
該方法的運用是從后臺數(shù)據(jù)庫中一次性取出所有的數(shù)據(jù),運用Jquery把一部分數(shù)據(jù)隱藏起來,事實上數(shù)據(jù)還是全部在html頁面中
具體代碼如下:
引用js和css文件有:
<link ID="skin" rel="stylesheet" type="text/css" href="css/config.css">
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/skin.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.table.js"></script>
頁面代碼:
<table id="userTable" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;" >
<thead>
<tr class="fixheader">
<td noWrap width="5%">選擇</td>
<td noWrap width="10%">用戶ID<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap width="10%">用戶名稱<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap width="10%">所在科室<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>創(chuàng)建時間<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>創(chuàng)建人<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>菜單集名稱<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>是否有效<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
</tr>
</thead>
<tbody style="display:">
<c:forEach items="${userList}" var="smUser">
<tr height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;">
<td align="center"><input type="checkbox"></td>
<td class="tdc">${smUser.userId }</td>
<td class="tdc">${smUser.userName }</td>
<td class="tdc">${smUser.organCode }</td>
<td class="tdc">${smUser.createTime }</td>
<td class="tdc">${smUser.creator }</td>
<td class="tdc">${smUser.menusId }</td>
<td class="tdc">${smUser.valid }</td>
</tr>
</c:forEach>
</tbody>
</table>
<script language="javascript" type="text/javascript">
$("#userTable").tablePaging();
</script>
此處要特別注意的是要講table的表頭加上<thread></thread>標(biāo)簽,且注意此處的table的id為userTable,這個在后面Js文件的引用中十分重要,一句$("#userTable").tablePaging();會去執(zhí)行jquery.table.js中的代碼。
后臺action的代碼如下:
public ActionForward listUser(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
List<POJO> pojos = serviceSmUserImpl.findAll();
List<SmUser> smUserList = new ArrayList<SmUser>();
for(POJO pojo:pojos){
smUserList.add((SmUser)pojo);
}
request.setAttribute("userList",smUserList);
return mapping.findForward("smUserList");
}
運用jquery實現(xiàn)表格分頁打包
引用js和css文件有:
復(fù)制代碼 代碼如下:
<link ID="skin" rel="stylesheet" type="text/css" href="css/config.css">
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/skin.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.table.js"></script>
頁面代碼:
復(fù)制代碼 代碼如下:
<table id="userTable" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;" >
<thead>
<tr class="fixheader">
<td noWrap width="5%">選擇</td>
<td noWrap width="10%">用戶ID<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap width="10%">用戶名稱<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap width="10%">所在科室<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>創(chuàng)建時間<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>創(chuàng)建人<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>菜單集名稱<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>是否有效<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
</tr>
</thead>
<tbody style="display:">
<c:forEach items="${userList}" var="smUser">
<tr height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;">
<td align="center"><input type="checkbox"></td>
<td class="tdc">${smUser.userId }</td>
<td class="tdc">${smUser.userName }</td>
<td class="tdc">${smUser.organCode }</td>
<td class="tdc">${smUser.createTime }</td>
<td class="tdc">${smUser.creator }</td>
<td class="tdc">${smUser.menusId }</td>
<td class="tdc">${smUser.valid }</td>
</tr>
</c:forEach>
</tbody>
</table>
<script language="javascript" type="text/javascript">
$("#userTable").tablePaging();
</script>
此處要特別注意的是要講table的表頭加上<thread></thread>標(biāo)簽,且注意此處的table的id為userTable,這個在后面Js文件的引用中十分重要,一句$("#userTable").tablePaging();會去執(zhí)行jquery.table.js中的代碼。
后臺action的代碼如下:
復(fù)制代碼 代碼如下:
public ActionForward listUser(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
List<POJO> pojos = serviceSmUserImpl.findAll();
List<SmUser> smUserList = new ArrayList<SmUser>();
for(POJO pojo:pojos){
smUserList.add((SmUser)pojo);
}
request.setAttribute("userList",smUserList);
return mapping.findForward("smUserList");
}
運用jquery實現(xiàn)表格分頁打包
相關(guān)文章
基于jQuery實現(xiàn)網(wǎng)頁進度顯示插件
這篇文章主要介紹了基于jQuery實現(xiàn)網(wǎng)頁進度顯示插件的實現(xiàn)方法以及源碼下載,十分的詳細,并自帶2種皮膚,這里推薦給小伙伴們。2015-03-03
bootstrap中日歷范圍選擇插件daterangepicker的使用詳解
daterangepicker是bootstrap的一個日歷插件 主要用來選擇時間段的插件 這個插件很好用也很容易操作 。這篇文章主要介紹了bootstrap中日歷范圍選擇插件daterangepicker的使用詳解,需要的朋友可以參考下2018-04-04
jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面(附源碼)
這篇文章主要介紹了jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面,并分享了源碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-10-10
jquery實現(xiàn)微博文字輸入框 輸入時顯示輸入字數(shù) 效果實現(xiàn)
這篇文章介紹了用jquery實現(xiàn)微博文字輸入框 輸入時顯示輸入字數(shù)的效果,有需要的朋友可以參考一下2013-07-07
Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象,Map()方法詳解以及數(shù)組中查詢某值是否存在
今天小編就為大家分享一篇關(guān)于Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象|Map()方法詳解以及數(shù)組中查詢某值是否存在,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01
IE10中flexigrid無法顯示數(shù)據(jù)的解決方法
這篇文章主要介紹了IE10中flexigrid無法顯示數(shù)據(jù)的解決方法的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery實現(xiàn)仿騰訊微博滑出效果報告每日天氣的方法
這篇文章主要介紹了jQuery實現(xiàn)仿騰訊微博滑出效果報告每日天氣的方法,涉及jQuery鼠標(biāo)事件及css樣式操作技巧,需要的朋友可以參考下2015-05-05

