<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/css/jquery.dataTables.min.css" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="<%=basePath%>/static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="<%=basePath%>/static/js/jquery.dataTables.min.js"></script>
</head>
<body>
<center>
<table class="dataTable display" id="dataTable">
<thead>
<tr>
<th><font style="font-weight: bold"><input type="checkbox" name="" value=""></font></th>
<th><font style="font-weight: bold">序号</font></th>
<th><font style="font-weight: bold">昵称</font></th>
<th><font style="font-weight: bold">爱好</font></th>
<th><font style="font-weight: bold">名次</font></th>
</tr>
</thead>
<c:forEach items="${allHobbies}" var="hobbiey">
<tr>
<td align="center"><input type="checkbox" name="" value=""></td>
<td align="center">${hobbiey.hid}</td>
<td align="center">${hobbiey.hname}</td>
<td align="center">${hobbiey.hkinds}</td>
<td align="center">${hobbiey.hnum}</td>
</tr>
</c:forEach>
</table>
<script type="text/javascript">
$(document).ready( function () {
$('#dataTable').DataTable({
"pageLength": 10, //初始化显示几条数据
"fixedHeader": true, //这个是用来固定头部
"lengthMenu": [ //显示几条数据设置
[5, 10, 20, -1],
['5 条', '10 条', '20 条', '全部']
],
"language": { // 这是修改语言的显示
buttons: {
pageLength: {
_: "显示%d条",
'-1': "全部显示"
}
},
paginate: {
first: "首条",
previous: "前一页",
next: "下一页",
last: "末页"
},
"info": "第_PAGE_页,共_PAGES_页",
"infoEmpty": "未找到相关数据",
"search": "关键字",
"zeroRecords": "未找到相关数据",
"decimal": ".",
"thousands": ","
},
"PaginationType": "full_numbers",
"ServerMethod" : "POST",
"AjaxSource" :"<%=basePath%>/hobbiey/showALLHobbies",
"columns": [
//返回的是AjaxSource的 ALLHobbies 对象-把 Hobbies 的属性放在 data 中
{ "data": "" }, //单选框
{ "data": "hid" },
{ "data": "hname" },
{ "data": "hkinds" },
{ "data": "hnum" }
],
"columnDefs":[ //列定义
{
"targets": [4],
"data": "hid",
"render": function (data, type, full) {
return "<a href='<%=basePath%>/hobbiey/updateHobbie?hid=" + full.hid + "'>修改</a> <a href='<%=basePath%>/hobbiey/delteHobbie?hid="+full.hid +"'>删除</a>";
}
}]
});
} );
</script>
</center>
</body>
</html>
需要的 CSS 和 JS 文件：
