DataTable實現分頁
<%@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%>
<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">
<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 border="1" 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 檔案：
