說明：本文是使用jstl動態加載數據而不是直接使用dataTable加載數據，datatable僅提供分頁支持
第一步：導入相關文件
<!--引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
第二步：給table標籤添加id或者class
<table id="user_table" border="1"></table>
第三步：初始化datatable,自定義配置
$("#user_table").dataTable({
//關閉搜索框
"searching": false,
//關閉排序
ordering: false,
//允許分頁
"paging":true,
//支持國際化，將顯示文字轉爲中文
language:{
//執行狀態
"sProcessing" : "處理中...",
//左上角選擇每頁數量
"sLengthMenu" : "每頁 _MENU_ 條記錄",
//左下角總數和當前頁
"sInfo" : "第 _PAGE_ 頁 ( 總共 _PAGES_ 頁，_TOTAL_ 條記錄 )",
"sInfoEmpty" : "無記錄",
// "search": "搜索：",
"oPaginate" : {
"sFirst" : "首頁",
"sPrevious" : "上頁",
"sNext" : "下頁",
"sLast" : "末頁"
}
}
});
附博主前端代碼：
<%@ page contentType="text/html;charset=UTF-8"
language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<!--引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<style>
.main{
width: 960px;
margin: 20px auto;
}
#user_table td{
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<table id="user_table" border="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>password</th>
</tr>
</thead>
<tbody>
<c:forEach items="${users}" var="user">
<tr>
<td>${user.userId}</td>
<td>${user.userName}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
<td>${user.password}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</body>
<script>
$(function () {
$("#user_table").dataTable({
//關閉搜索框
"searching": false,
//關閉排序
ordering: false,
//允許分頁
"paging":true,
//支持國際化，將顯示文字轉爲中文
language:{
//執行狀態
"sProcessing" : "處理中...",
//左上角選擇每頁數量
"sLengthMenu" : "每頁 _MENU_ 條記錄",
//左下角總數和當前頁
"sInfo" : "第 _PAGE_ 頁 ( 總共 _PAGES_ 頁，_TOTAL_ 條記錄 )",
"sInfoEmpty" : "無記錄",
//右下角按鈕
"oPaginate" : {
"sFirst" : "首頁",
"sPrevious" : "上頁",
"sNext" : "下頁",
"sLast" : "末頁"
}
}
});
})
</script>
</html>
實現效果：
更多datatable插件相關使用可查看：DataTable官方文檔