<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>角色设置</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%@ include file="../taglibs.jsp" %>
<!--引入样式文件和脚本文件-->
<link href="${ctx}/css/common/style1.css" style="text/css" rel="stylesheet">
<link href="${ctx}/css/dataTables/demo_page.css" style="text/css" rel="stylesheet">
<link href="${ctx}/css/dataTables/demo_table_jui.css" style="text/css" rel="stylesheet">
<link href="${ctx}/css/dataTables/demo_table.css" style="text/css" rel="stylesheet"> </head>
<script type="text/javascript" language="javascript" src="js/dataTables/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/dataTables/jquery.dataTables.js"></script>
<!--嵌入JS代码设置分页操作-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#example').dataTable({
//iDisplayLength:1,//设置每页显示数量
sPaginationType: "full_numbers",// 设置分页按钮
//bJQueryUI: true, //设置样式
bStateSave: true
//其他具体操作属性...
});
});
</script>
<body>
<!-- 显示区域 -->
<fieldset>
<legend>角色管理</legend>
<form class="feildset clearfix dataForm ">
<table class="gridtable" style="width:100%" id="
example">
<thead> <tr>
<th width="5%" align="center"><input type="checkbox" onclick="selectAll()" id="checkbox"/></th>
<th width="10%" align="center">用户名</th>
<th width="10%" align="center">真实姓名</th>
<th width="10%" align="center"> 密码</th>
<th width="5%" align="center"> 是否启用</th>
<th width="10%" align="center"> 电子邮箱</th>
<th width="10%" align="center"> 联系电话</th>
<th width="10%" align="center"> 手机号码</th>
<th width="10%" align="center"> 备注</th>
</tr>
</thead>
<tbody> <c:forEach var="user" items="${userList}">
<tr>
<td align="center"><input type="checkbox" value="${user.userId}" name="userId"/></td>
<td align="center">${user.userName} </td>
<td align="center">${user.realName}</td>
<td align="center">${user.password}</td>
<td align="center">
<c:if test="${user.whetherStop==true}">是 </c:if>
<c:if test="${user.whetherStop==false}">否 </c:if>
</td>
<td align="center">${user.email }</td>
<td align="center">${user.telephone }</td>
<td align="center">${user.mobilephone }</td>
<td align="center">${user.remarks }</td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</fieldset>
</body>
function selectAll(){
var interArr = document.getElementsByName("userId");
for ( var i = 0; i < interArr.length; i++) {
if (!interArr[i].checked) {
interArr[i].checked = true;
}
}
var checkbox=document.getElementById("checkbox");
if(!checkbox.checked){
for ( var i = 0; i < interArr.length; i++) {
interArr[i].checked = false;
}
}
}
</script>
</html>
注：必须写table的<tbody>和<thead>标签，红色区域是需要注意的地方
或参考：http://apps.hi.baidu.com/share/detail/44192495
分享到：
相关推荐
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
**jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库，用于增强HTML表格。它提供了各种高级特性，如分页、排序、过滤、搜索、数据加载以及更多，大大提升了用户体验。在这...
**jQuery DataTables 知识点详解** `jQuery DataTables` 是一个强大且功能丰富的JavaScript库，用于将HTML表格转化为交互式的数据展示工具。这个库基于jQuery框架，提供了数据排序、搜索、分页以及多种自定义功能，...
通过以上知识点的讲解，我们可以看到Spring Boot、MybatisPlus和JQuery DataTables的结合使用，可以高效地实现数据展示、分页和模糊查询功能，是现代企业级Web应用中的常见实践。在实际开发中，还需要根据具体需求...
`Mvc.JQuery.Datatables`是一个非常实用的插件，它允许开发者轻松地将流行的JQuery Datatables库与ASP.NET MVC框架集成，从而实现高效、动态和交互式的表格数据展示。这个插件极大地简化了在.NET环境中使用...
jquery.dataTables.min.js是使用Datatable插件时用的脚本文件
"jquery.dataTables包.rar" 文件包含了使用这个插件所需的所有核心资源，包括JavaScript库文件和CSS样式文件，使得开发者可以快速地在自己的项目中集成并使用DataTables。 1. **基础使用**： 要使用jQuery ...
**jQuery分页插件dataTables详解** jQuery分页插件dataTables是一款强大的、灵活的、功能丰富的表格增强工具，它能够将普通的HTML表格转化为具有排序、搜索、分页、过滤等高级功能的数据展示平台。dataTables插件...
对于Java初学者来说，这是一个很好的实践项目，可以帮助他们理解如何结合使用SpringBoot、MyBatis、JSP、jQuery和DataTables.js来实现一个功能完备的前端分页搜索系统。通过学习和实践这个教程，开发者可以提升自己...
仿jquery.dataTables的分页（查询+排序）,jquery插件式开发简单示例。
本文将深入探讨使用jQuery实现简单前台表格分页的插件——`paginathing.js`。 首先，我们需要了解`jQuery`库。jQuery是由John Resig于2006年创建的，它的目标是使JavaScript编程变得简单、快捷。它通过提供简洁的...
在Web开发中，数据展示和管理是一项常见的任务，而jQuery DataTables插件为此提供了一种高效且功能丰富的解决方案。本文将深入探讨jQuery DataTables及其相关的CSS，以及如何结合使用它们来提升网页表格的交互性和...
在网页开发中，数据展示是不...通过以上步骤，你就可以使用jQuery和Java实现一个基本的表格动态分页功能。但需要注意，实际项目中可能还需要考虑错误处理、性能优化、安全问题等多个方面，确保系统的稳定性和用户体验。
1，这个项目是strut2.0 + hibernate3.0 + jquery.datatables+mysql 5.0实现的 hibernate分页（无排序，搜索，仅仅分页显示）,服务器端分页在datatables上展现，有关 datatables的知识请关注它的官网...
在Eclipse开发环境中，我们可以结合使用DataTables来创建一个动态的、交互式的表格，将TXT文件中的数据呈现在网页上，并且融入Bootstrap的样式设计，提升界面的美观性和用户体验。 ### 一、jQuery DataTables基础 ...
datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 分页，即时搜索和排序 几乎支持任何数据源：DOM， ...
在本教程中，我们将深入探讨如何使用 `jQuery` 实现分页功能，特别是利用局部刷新来优化用户体验。 1. **理解分页原理**： 分页的基本思想是将大量数据分为多个部分（页），每次只加载一页，用户可以逐页浏览。...
**jQuery DataTables 插件详解** jQuery DataTables 是一个强大且功能丰富的JavaScript库，用于将HTML表格转化为交互式数据展示工具。它支持多种高级功能，包括数据排序、列过滤、隐藏列以及更多自定义选项，使得...
一个简单的Datatables初始化示例： ```javascript $(document).ready(function() { $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "/api/data", "columns": [ { "data": "name...