jQuery datatables使用 ( 前台页面实现分页 简单案例一 未完待续...)
EdwardSiCong 2011-09-29
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>角色设置</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<%@includefile="../taglibs.jsp"%>
<!--引入样式文件和脚本文件-->
<linkhref="${ctx}/css/common/style1.css"style="text/css"rel="stylesheet">
<linkhref="${ctx}/css/dataTables/demo_page.css"style="text/css"rel="stylesheet">
<linkhref="${ctx}/css/dataTables/demo_table_jui.css"style="text/css"rel="stylesheet">
<linkhref="${ctx}/css/dataTables/demo_table.css"style="text/css"rel="stylesheet"></head>
<scripttype="text/javascript"language="javascript"src="js/dataTables/jquery.js"></script>
<scripttype="text/javascript"language="javascript"src="js/dataTables/jquery.dataTables.js"></script>
<!--嵌入JS代码设置分页操作-->
<scripttype="text/javascript"charset="utf-8">
$(document).ready(function(){
$('#example').dataTable({
//iDisplayLength:1,//设置每页显示数量
sPaginationType:"full_numbers",//设置分页按钮
//bJQueryUI:true,//设置样式
bStateSave:true
//其他具体操作属性...
});
});
</script>
<body>
<!--显示区域-->
<fieldset>
<legend>角色管理</legend>
<formclass="feildsetclearfixdataForm">
<tableclass="gridtable"style="width:100%"id="example">
<thead><tr>
<thwidth="5%"align="center"><inputtype="checkbox"onclick="selectAll()"id="checkbox"/></th>
<thwidth="10%"align="center">用户名</th>
<thwidth="10%"align="center">真实姓名</th>
<thwidth="10%"align="center">密码</th>
<thwidth="5%"align="center">是否启用</th>
<thwidth="10%"align="center">电子邮箱</th>
<thwidth="10%"align="center">联系电话</th>
<thwidth="10%"align="center">手机号码</th>
<thwidth="10%"align="center">备注</th>
</tr>
</thead>
<tbody><c:forEachvar="user"items="${userList}">
<tr>
<tdalign="center"><inputtype="checkbox"value="${user.userId}"name="userId"/></td>
<tdalign="center">${user.userName}</td>
<tdalign="center">${user.realName}</td>
<tdalign="center">${user.password}</td>
<tdalign="center">
<c:iftest="${user.whetherStop==true}">是</c:if>
<c:iftest="${user.whetherStop==false}">否</c:if>
</td>
<tdalign="center">${user.email}</td>
<tdalign="center">${user.telephone}</td>
<tdalign="center">${user.mobilephone}</td>
<tdalign="center">${user.remarks}</td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</fieldset>
</body>
functionselectAll(){
varinterArr=document.getElementsByName("userId");
for(vari=0;i<interArr.length;i++){
if(!interArr[i].checked){
interArr[i].checked=true;
}
}
varcheckbox=document.getElementById("checkbox");
if(!checkbox.checked){
for(vari=0;i<interArr.length;i++){
interArr[i].checked=false;
}
}
}
</script>
</html>
注：必须写table的<tbody>和<thead>标签，红色区域是需要注意的地方
或参考：http://apps.hi.baidu.com/share/detail/44192495
