灵感来自datatables官网

和http://blog.csdn.net/star535X/article/details/50060427 这个人写的很棒很全面

1 关于js

 1 $(function() {
 2     $("#aaa, #bbb, #ccc, #ddd").unbind("change").bind({//aaa bbb……分别是四个下拉框 选中时触发ajax 使用语句table.ajax.reload();
 3         change : function(){
 4             table.ajax.reload();
 5         }
 6     });
 7     table=$('#list_tab').DataTable({
 8         "aLengthMenu": [[10, 15, 20], [10, 15, 20]],//搜索栏显示
 9         "order": [[2, "desc"]],//第2列的数据倒序排序 此条会通过参数传给服务器
10         "processing": true,//代码没加载完成时 会显示加载中…
11         "searching": false,//关闭datatables自带搜索功能（没什么用）
12         "bPaginate": true, //翻页功能
13         "bLengthChange": true, //改变每页显示数据数量
14         "bFilter": true, //过滤功能
15         "bSort": true, //排序功能
16         "serverSide": true,//服务器端处理数据
17         "sPaginationType": "full_numbers",      //翻页界面类型
18         //"sAjaxSource": "/orderCenter/dataTable",
19         //"fnServerData":retrieveData, //与后台交互获取数据的处理函数
20         "oLanguage":    //DataTable中文化 把提示语之类的换成中文
21         {
22             "sProcessing": "正在加载中......",
23             "sLengthMenu": "每页显示 _MENU_ 条记录",
24             "sZeroRecords": "对不起，查询不到相关数据！",
25             "sEmptyTable": "表中无数据存在！",
26             "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
27             "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
28             "sSearch": "搜索",
29             "oPaginate": {
30                 "sFirst": "首页",
31                 "sPrevious": "上一页",
32                 "sNext": "下一页",
33                 "sLast": "末页"
34             }
35         },
36         ajax: {
37             "type": "POST",
38             "url": '/orderCenter/dataTable',
39             "data": function (data) {//在此处对data（datatables传给服务器端的数据）进行处理 data.start是从哪个数据开始，data.length是页面长度 通过这两个参数可以分页 
40 　　　　　　　　　　　　　　　　　　　　　　//currentPage pageSize 是我们项目需要的参数 为了改动不大在data中加了这两个参数
41                 var order = data.order;
42                 data.currentPage = data.start / data.length + 1;
43                 data.pageSize = data.length;
44                 data.orderColumn = data.order[0].column;//此处order[0].column是第几列要排序
45                 data.orderDir = data.order[0].dir;//此处是asc desc
46 
47                 data.aaa= $("#aaa").val();//aaa bbb……可以在此处给data添加参数 这是自定义搜索栏传值的方式
48                 data.bbb= $("#bbb").val();
49                 data.ccc= $("#ccc").val();
50                 data.ddd= $("#ddd").val();
51             },
52         },
53         "bPaginate": true,// 分页按钮
54         "sPaginationType": "full_numbers",//用这个参数显示的页码工具比较全 除了"full_numbers"还有‘two_button’
55         "columns": [
56             {"data": null, "title": "第一列", 'sClass': "text-center", "orderable": false},//data 数据 如果复杂逻辑可以写在回调fnRowCallback中否则可以直接返回aoData的属性
57             {"data": "properties1.aaa", "title": "第二列", 'sClass': "text-center", "orderable": false},//'sClass': "text-center"居中
58             {"data": null, "title": "第三列", 'sClass': "text-center", "orderable": false},//"orderable": false是否可排序（true界面上会有排序按钮）
59             {"data": null, "title": "第四列", 'sClass': "text-center", "orderable": false},
60             {"data": "properties2", "title": "第五列", 'sClass': "text-center", "orderable": false},
61         ],
62         "fnRowCallback": function (nRow, aData) {//注意参数顺序不可变
63             $result = aData.properties1.aaa+ '<br/>' + aData.properties2;//在这写单元格里的html代码
64             $('td:eq(0)', nRow).html($result);//在这里分别给1 3 4列赋值
65             $('td:eq(2)', nRow).html($result);
66             $('td:eq(3)', nRow).html($result);
67         }
68     });
69 });

 

2关于ajax传参

ajax返回的数据实体类按照这个格式就ok

1     private Long iTotalRecords;//实际的行数
2     private Long iTotalDisplayRecords;//过滤之后，实际的行数
3     private Integer draw;//datatables传过来的参数 原样返回
4     private List<T> aaData;//返回实体

 

想说的都写在注释里 不懂的可以参照 http://blog.csdn.net/star535X/article/details/50060427或者问我

么么哒晚安~！