DataTables 分页 查询
程序员文章站
2022-05-23 21:02:24
...
分页 头疼不?!
用DataTables 简单 不用写分页sql
举例说明:
数据库查询:
select u.id, u.uname from user_info u
后台塞值:
List<UserInfo> userInfos = userService.getUsers(); req.setAttribute("userInfos",userInfos);
页面取值展示:
js:
- //code.jquery.com/jquery-1.12.4.js
- https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
- css:
- https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
<html> <title>Title</title> <link rel="stylesheet" href="/springmvcDemo/datatables/jquery.dataTables.min.css" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="/springmvcDemo/datatables/jquery.dataTables.min.js"></script> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <td>id</td> <td>name</td> </thead> <tbody> <c:forEach items="${userInfos}" var="userInfo"> <tr> <td>${userInfo.id}</td> <td>${userInfo.uname}</td> </tr> </c:forEach> </tbody> </table> <script> $(document).ready(function() { $('#example').DataTable(); } ); </script> </body> </html>
完成后页面展示:
是不是很简单
(我用的是本地js 所以中文是我修改的 不过功能一样)