DataTable实现分页

最新推荐文章于 2026-05-10 16:59:57 发布

原创最新推荐文章于 2026-05-10 16:59:57 发布 · 1w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#DataTable分页

DataTable 专栏收录该内容

5 篇文章

订阅专栏

该博客展示了如何在网页中使用DataTable插件实现数据的分页显示。通过配置初始显示记录数、固定表头、自定义语言选项，并设置Ajax数据源，实现了动态加载和操作数据的功能。

<%@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%>">

<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 文件：