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