公司没有前端,任何东西都要自己上手去做,之前做分页想着用前后端结合的方式去做,但是后来发现代码量有点大,自己也懒,所以打算用 datatables 自带的填充数据和分页。表格也是datatables自带的。下面的HTML代码上有CSS和js的链接。
用到的网址:官方的datatables 手册网址 http://www.datatables.club/manual/ 关于用ajax请求后台的例子网址 :https://datatables.net/manual/ajax 官网:中文官网:http://datatables.club/
找了几个感觉不错的博客: http://blog.csdn.net/u011072139/article/details/54312414
http://blog.csdn.net/kangguowei/article/details/72847827
http://blog.csdn.net/j7fs/article/details/77453409
http://blog.csdn.net/kangguowei/article/details/72847827
官方给出的一个很好的例子:http://www.datatables.club/blog/2016/01/28/user-share-nbh1991.html
第一步:惯例 先上图,图片上有些内容进行了模糊处理
第二步:上代码
①HTML的写法,含js
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <title>简历查询</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function() { $('#example').DataTable( { "serverSide": true, searching: true, lengthChange: true, paging: true, scrollCollapse: true, serverSide: false, search: true, processing: true, /* scrollY: 500, 表格的高度限制*/ scrollX: "100%", scrollXInner: "100%", scrollCollapse: true, jQueryUI: false, autoWidth: true, autoSearch: false, language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项搜索结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 条简历", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "未搜索到数据", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, ajax: { url: "/resume/queryList", dataSrc: '' }, "columns": [ { "data": "gender" }, { "data": "age" }, { "data": "education_bachelor" }, { "data": "work" }, { "data": "work_experience" }, { "data": "web_id" }, { "data": "resume_from" }, { "data": "update_time" }, { data: "location", render : function(data,type, full, meta) { return "<a href="+data+">查看简历</a>"; } } ] } ); } ); </script> </head> <body> <table id="example" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>性别</th> <th>年龄</th> <th>教育经历</th> <th>工作经历</th> <th>工作年限</th> <th>WEB_ID</th> <th>来自哪里</th> <th>更新时间</th> <th>查看简历</th> </tr> </thead> <tfoot> <tr> <th>性别</th> <th>年龄</th> <th>教育经历</th> <th>工作经历</th> <th>工作年限</th> <th>WEB_ID</th> <th>来自哪里</th> <th>更新时间</th> <th>查看简历</th> </tr> </tfoot> </table> </body> </html>
② 后台的controller
/** * @desc 查询所有简历的简略信息 */ @ResponseBody @RequestMapping(value="/queryList",method = RequestMethod.GET) public List<Resume> queryResumeList(){ List<Resume> list=resumService.queryResumeList(); /*request.setAttribute("list", list);*/ return list; }
③ 后台传过来的json 的格式
代码就这些,datatables不难,但是细节问题很多!!!!!加油各位 有任何不懂得可留言