datatables 填充json数据和分页【亲测可用】

最新推荐文章于 2022-08-09 09:05:05 发布

DreamWeaver_Zhou

最新推荐文章于 2022-08-09 09:05:05 发布

阅读量9.8k

点赞数 6

分类专栏： java编程中的问题

执法必严违法必究

本文链接：https://blog.csdn.net/DreamWeaver_zhou/article/details/79399874

版权

java编程中的问题专栏收录该内容

129 篇文章 3 订阅

订阅专栏

公司没有前端，任何东西都要自己上手去做，之前做分页想着用前后端结合的方式去做，但是后来发现代码量有点大，自己也懒，所以打算用 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不难，但是细节问题很多！！！！！加油各位有任何不懂得可留言

DreamWeaver_Zhou

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
11
评论
datatables 填充json数据和分页【亲测可用】

公司没有前端，任何东西都要自己上手去做，之前做分页想着用前后端结合的方式去做，但是后来发现代码量有点大，自己也懒，所以打算用 datatables 自带的填充数据和分页。表格也是datatables自带的。下面的HTML代码上有CSS和js的链接。用到的网址：官方的datatables 手册网址 http://www.datatables.club/manual/ 关于用
复制链接

扫一扫