Datatables表格控件的使用相关网站及遇到的问题

1.官网教程链接：http://www.datatables.net/

2.基础使用可参考他人博客链接：http://blog.csdn.net/mickey_miki/article/details/8240477，这个网址上的信息很全。

3.自己碰到的问题（本人后台使用Java开发）:

Question1：datatables 可以实现实时搜索数据列表，可如何将参数传入后台？（请查看思路和代码）
（1）设置searching： true，

（2）获取搜索输入框的value值，在ajax的data属性传入参数，并注意前后台配置的参数名必须保持一致

（3）如果传入后台的数据为乱码，需先进行转码处理。

思路图：

Question2：下拉框页长为ALL时，后台处理数据的方法？

后台主要获取的三个参数： draw是请求的序号，start是数据的偏移量，length是需要返回的最大数据条数；当length = -1时，程序直接执行查询全部用户，不执行带有分页器的代码。

前端页面的参数：draw: 表示请求次数，recordsTotal: 总记录数，recordsFiltered: 过滤后的总记录数，data: 具体的数据对象数组

Question3： Datatables列排序，后台传递的参数是什么？

order[0][column]: 二维表格，而只有一维需要排序，是第一行列名的位置；所以 order 的下标为0. 该属性表示第几列需要排序。

order[0][dir]: 排序方式 ASC | DESC

前台：设置"ordering" : true,

后台的获取代码如下：（不需要像length、start等参数通过在方法中传递）

4.个人使用的基本属性

“columns":[{"data": "functionurl"},{},{}] 注：初始化列，该属性为对象数组，不需要定义的列也需要用null进行占位，functionurl字段是与数据库的字段一致
“columnsDefs”:[{"render":funtion(){}, "targets":4}] 注：和columns相似，但可用targets灵活指定列, render是通过函数根据个人需求随意改变内容值。

Example One：将修改、删除按钮放在列中显示

"columnDefs" : [
		{
			"orderable": false,
			"render" : function(data, type, row) {
				var buttons = '';
				buttons +="<a href='javascript:void(0);' onClick=\"handle_ed('" + row.id + "')\" ><i class='Hui-iconfont'></i><i class='im-pencil2'></i></a>";
				buttons +=" <a href='javascript:void(0);'  onClick=\"function_del('one','" + row.id + "')\" ><i class='Hui-iconfont'></i></a>";
				return buttons;
			},
			"targets" : 4,
		}
]

　效果图：

Example Two: 数据库的字段数据为1或者2，而页面根据判断显示是或者否　

"render": function(data, type, row) {
			 var flag = '';
			 if( row.systemflag == 1){
					 flag = "是";
			 }
                        if( row.systemflag == 2){
					 flag = "否";
			 }

			 return flag;
 },

方法中参数含义： data: 当前单元格的数据；type: 当前列的类型；row: 当前行完整的数据对象；meta: 为一个子对象,包含3个属性；

row: 当前行的索引； col: 当前列的索引； settings: 当前DataTables控件的settings对象

刷新页面：table.fnDraw(); 网上资料有的人都写table.draw()，但是在我这里会产生提示错误table.draw() is not a function, 查看源码时，可以这样用 table.api().search($(this).val()).draw(); //Here table is instance of datatable.

5.不规范书写造成错误范例

错误提示原因可能是逗号缺少，列的属性不一致，指定列的下标错误（本来有五列，确指定第六列）

6.扩展工具(列显示/隐藏、Excel、Print)

（1）列显示/隐藏

页面引入：CSS

JS

　　//此处的JS文件一定要放在名为1.10.8的文件夹下，否则会提示错误：这个可能需要1.10.8或者更高版本。

配置dom节点： "dom" : 'Blfrtip',

配置buttons属性:

"buttons": [ {
extend: 'colvis',
text: '列段显示/隐藏'
},

]

（2）Excel

页面引入：

/*如果是支持HTML5的则可以引入文件*/

配置buttons属性:

"buttons": [ {
extend: 'colvis',
text: '列段显示/隐藏'
},{

extend: 'excel'
//extend: 'excelHtml5' //支持html5导出设置

]

（3）Print

页面引入：<script type="text/javascript" src="../../static/bj/js/buttons/buttons.print.min.js"></script>

配置buttons属性:

"buttons": [ {
extend: 'colvis',
text: '列段显示/隐藏'
},{

　　extend: 'excel'
　　//extend: 'excelHtml5' //支持html5导出设置

},{

　　extend: 'print',
　　text: '打印',
　　exportOptions: {
　　//columns: ':visible'
　　}
　},

]

（4）列拖拽与列宽拖动

页面引入：

配置：/*在datatables()方法声明之外插入下面代码*/

//columns moving
new $.fn.dataTable.ColReorder( table, {
// options
} );
//使用col插件实现表格头宽度拖拽
$(".table").colResizable();

7.下面是实现的整体代码

前台代码：

  1 <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
  2 <!DOCTYPE HTML>
  3 <html>
  4 <head>
  5 <meta charset="utf-8">
  6 <meta name="renderer" content="webkit|ie-comp|ie-stand">
  7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  9 <meta http-equiv="Cache-Control" content="no-siteapp" />
 10 <LINK rel="Bookmark" href="/favicon.ico" >
 11 <LINK rel="Shortcut Icon" href="/favicon.ico" />
 12 
 13 <!-- columns show and hide css style -->
 14 <link href="../../static/datatables/css/buttons/buttons.dataTables.min.css" rel="stylesheet" type="text/css" /> 
 15 <link href="../../static/datatables/css/admin/jquery.dataTables.css" rel="stylesheet" type="text/css" />
 16 
 17 <link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" />
 18 <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" />
 19 <link rel="stylesheet" type="text/css" href="../../static/Hui-iconfont/1.0.7/iconfont.css" />
 20 <link rel="stylesheet" type="text/css" href="../../static/icheck/icheck.css" />
 21  <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" />
 22 <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" /> 
 23 
 24 <title>用户管理</title>
 25 </head>
 26 <body>
 27 <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span> 用户管理 
 28 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:void(0);" onclick="reloadTable()" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
 29 <div class="pd-20">
 30     <div class="text-c"> 
 31                            <select  class="input-text"  style="width:150px;height:30px" id="btnSelected">
 32                           <option value="1">菜单名称</option>
 33                        </select>
 34                       &nbsp;&nbsp;
 35         <input type="text" class="input-text" style="width:250px" placeholder="输入关键字"  id="keysearch" name="">
 36         <button type="submit" class="btn btn-success radius" id="btnSearch" name=""><i class="Hui-iconfont">&#xe665;</i> 查询</button>
 37     </div>
 38     <div class="cl pd-5 bg-1 bk-gray mt-20"> 
 39     <span class="l">
 40         <a href="javascript:void(0);" onclick="delall()"  class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> 
 41         <a href="javascript:void(0);" onclick="handle_add()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加功能</a>
 42     </span> 
 43  </div>
 44     <div class="mt-20">
 45     <table class="table table-border table-bordered table-hover table-bg table-sort">
 46         <thead>
 47             <tr class="text-c">
 48                     <th ><input type="checkbox" id="checkbox">全选/反选</th>
 49                     <th>菜单名称</th>
 50                     <th>菜单地址</th>
 51                     <th>是否是系统菜单</th>
 52                     <th>操作</th>
 53             </tr>
 54         </thead>
 55 
 56     </table>
 57     </div>
 58 </div>
 59 
 60 <script type="text/javascript" src="../../static/jquery/1.9.1/jquery.min.js"></script>  
 61 <script type="text/javascript" src="../../static/layer/2.1/layer.js"></script> 
 62 <script type="text/javascript" src="../../static/laypage/1.2/laypage.js"></script> 
 63 <script type="text/javascript" src="../../static/My97DatePicker/WdatePicker.js"></script> 
 64 <script type="text/javascript" src="../../static/h-ui/js/H-ui.js"></script> 
 65 <script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js"></script> 
 66 <!-- <script type="text/javascript" src="../../static/datatables/1.10.0/jquery.dataTables.min.js"></script> --> 
 67 <!-- column moving script -->
 68 <script type="text/javascript" src="../../static/datatables/js/admin/1.10.8/jquery.dataTables.js"></script>
 69 <script type="text/javascript" src="../../static/datatables/js/admin/colResizable-1.5.min.js"></script>
 70 <script type="text/javascript" src="../../static/datatables/ColReorder/js/dataTables.colReorder.js"></script>
 71 <!-- buttons hide and show -->
 72 <script type="text/javascript" src="../../static/datatables/js/buttons/dataTables.buttons.min.js"></script>
 73 <script type="text/javascript" src="../../static/datatables/js/buttons/buttons.colVis.min.js"></script> 
 74 
 75 
 76 
 77 <script type="text/javascript">
 78         
 79         var table ;
 80         $(function(){
 81             table = $('.table-sort').dataTable({
 82                 "bServerSide" : true,
 83                 "bAutoWidth" : false,
 84                 "processing" : true,
 85                 "ordering" : true,
 86                 "bFilter": true,
 87                 "searching" : true,
 88                 "order": [[ 1, "desc" ]] , 
 89                 "bPaginate" : true,
 90                 "lengthMenu": [
 91                         [ 5, 10, 20, 30, 40, 50, -1 ],
 92                         [ 5, 10, 20, 30, 40, 50, "All"]
 93                  ],
 94                 "dom" : 'Blfrtip',
 95                 "buttons": [ //for columns selective hide and show
 96                              {
 97                                 extend: 'colvis',
 98                                 text: '列段显示/隐藏'
 99                              },
100                            /*  {
101                                 extend: 'excel'
102                                 
103                             },
104                             {
105                                 extend: 'print',
106                                 text: '打印',
107                                 exportOptions: {
108                                     //columns: ':visible'
109                                 }
110                              }, */
111                  ],
112                 "ajax" : {
113                     "url" : "/functionController/datagrid",
114                     "data" : function(d) {
115                         //real-time remote search params pass to server
116                         var searchtext = $(".dataTables_wrapper .dataTables_filter input").val();
117                         if(searchtext != null){
118                             d.searchtext = encodeURI(searchtext);
119                         } 
120                         //keywords search params pass to server
121                         var sel = $('#btnSelected').val();  //columns name in selectbox
122                         if(sel == 1){
123                             d.keysearch = encodeURI($('#keysearch').val());
124                         }
125                         
126                         
127                     }
128                 },
129                 "columns" : [{
130                     "data" : ""
131                 }, {
132                     "data" : "text"
133                 }, {
134                     "data" : "functionurl"
135                 }, {
136                     "data" : "systemflag"
137                 }, {
138                     "data" : ""
139                 } ],
140                 "columnDefs" : [
141                         {
142                             "orderable": false,
143                             "render" : function(data, type, row) {
144                                 var buttons = '';
145                                     buttons +="<a href='javascript:void(0);' onClick=\"handle_ed('" + row.id + "')\" ><i class='Hui-iconfont'>&#xe6df;</i><i class='im-pencil2'></i></a>";
146                                     buttons +=" <a href='javascript:void(0);'  onClick=\"function_del('one','" + row.id + "')\" ><i class='Hui-iconfont'>&#xe6e2;</i></a>";
147                                 return buttons;
148                             },
149                             "targets" : 4,
150                         },
151                         {
152                             "sWidth": "95px",
153                             "orderable": false,
154                             "render" : function(data, type, row) {
155                                 var buttons = '';
156                                 buttons += "<input type='checkbox' value='" + row.id + "' name='checkList'>";
157                                 return buttons;
158                             },
159                             "targets" : 0,
160                         },
161                         {
162                             "render": function(data, type, row) {
163                                 var flag = '';
164                                 if( row.systemflag == 1){
165                                     flag = "是";
166                                 }
167                                 return flag;
168                             },
169                             "targets" :3,
170                             "bSearchable":true
171                         
172                         }],
173                  "language" : {
174                     "url" : "../../static/datatables/i18n/Chinese.json"
175                 } 
176             });
177             
178             //columns moving
179             new $.fn.dataTable.ColReorder( table, {
180                 // options 
181             } );
182             //使用col插件实现表格头宽度拖拽
183             $(".table").colResizable();
184             
185         });
186         /*单条件查询*/
187         $('#btnSearch').on('click', function(){
188             table.fnDraw();
189         });
190         
191         /*添加*/
192         function handle_add(){
193             layer.open({
194                 type: 2,
195                 title: '新增功能',
196                 area: ['500px','360px'],
197                 offset: '50px',
198                 maxmin: true,
199                 content: '${pageContext.request.contextPath}/functionController/toFunctionAddPage',
200                 end: function(){
201                     table.fnDraw();
202                 }
203             });
204         }
205         
206         /**全选、反选**/
207         $("#checkbox").click(
208                 function () {
209                     if (this.checked) {
210                         $("input[name='checkList']").each(function () {
211                             this.checked = true;
212                         });
213                     } else {
214                         $("input[name='checkList']").each(function () {
215                             this.checked = false;
216                         });
217                     }
218                 }
219         );
220         
221         /*编辑*/
222         function handle_ed(id){
223             layer.open({
224                 type: 2,
225                 title: ['编辑功能', 'font-size:18px'],
226                 shadeClose: true,
227                 offset: '50px',
228                 content: '/functionController/toFunctionEditPage?id='+id,
229                 shif: 2,
230                 maxmin: true,
231                 area: ['490px','360px'],
232                 end: function(){
233                     table.fnDraw();
234                 }
235             });
236         }
237         
238         /*刷新**/
239         function reloadTable(){
240             layer.msg("刷新成功");
241             table.fnDraw();
242         }
243         
244         //Delete multiple data 
245         function delall(){
246             var str = '';
247             $("input[name='checkList']:checked").each(function (i, o) {
248                     str += $(this).val();
249                     str += ",";
250             });
251              function_del("many",str);
252         }
253         /**删除数据行**/
254          function function_del(flag,id) {
255             
256              var count=0;
257                 var str = '';
258                 $("input[name='checkList']:checked").each(function (i, o) {
259                         str += $(this).val();
260                         str += ",";
261                         count++;
262                 });
263 
264                 if (str.length > 0 || id.length > 0) {
265                     
266                     if(flag == "one"){
267                         if (count>1) {
268                             layer.msg("单行删除，不支持多选");
269                             return;
270                         } 
271                     }
272                     var msg ='';
273                     if(count == 0 ){
274                         msg = "您确定删除此菜单吗？";
275                     }else{
276                         if(flag == "one"){
277                             msg = "您确定删除此菜单吗？";
278                         }else{
279                             msg = "您确定删除"+count+"个菜单吗？";
280                         }
281                     }
282                     if (!confirm(msg)) {
283                         return;
284                     }
285                     var ids = str.substr(0, str.length - 1);
286                     $.ajax({
287                         dataType: 'json',
288                         type: 'post',
289                         cache: false,
290                         url: '/functionController/remove',
291                         data: {
292                              ids: id ? id : ids,
293                         },
294                         async: false,
295                         success: function (data) {
296                             layer.msg(data.msg);
297                             table.fnDraw();
298                         } 
299                     });
300                 } else {
301                     layer.msg("至少选择一条记录操作");
302                 }
303             }
304 </script> 
305 </body>
306 </html>

View Code

后台代码：

 1 @RequestMapping("/datagrid")
 2     @ResponseBody
 3     public JSONObject allMenu(Ts_Function tmenu,String keysearch, String searchtext, String draw,String start,String length,HttpServletRequest request) {
 4         Map map = new HashMap();//条件存储
 5         JSONObject jsonObject = new JSONObject(true);
 6         JSONArray jsonArray = new JSONArray();
 7         List<HashMap<String, Object>> tmenuList;
 8         String tt = "";
 9         
10         //obtain the order params {order: column number; dir: desc/asc;  orderColumn: column name
11         String order=request.getParameter("order[0][column]");
12         String dir=request.getParameter("order[0][dir]");
13         String orderColumn = request.getParameter("columns["+order+"][data]");
14         
15         map.put("dir", dir);
16         map.put("orderColumn", orderColumn);
17         
18         if(Integer.valueOf(length) != -1){
19             int page=0;
20             int row= Integer.valueOf(length == null ? "10":length);
21             if (null!=start && null!=length) {
22                 page = Integer.valueOf(start) / Integer.valueOf(length) + 1;
23             } else {
24                 page = 1;
25                 row = 10;
26             }
27             PageHelper.startPage(page, row);
28             if(searchtext !=null){
29                 searchtext =URLDecoder.decode(searchtext, "utf-8");
30                 if(searchtext.equals("是")){
31                     searchtext = "1";
32                 }
33                 map.put("searchtext", searchtext);
34             }
35             //keywords search
36             if(keysearch !=null){
37                 keysearch =URLDecoder.decode(keysearch, "utf-8");
38                 map.put("keysearch", keysearch);
39             }
40             tmenuList = menuService.selectAll(map);
41             Page pageInfo = (Page) tmenuList;
42             jsonObject.put("draw",draw);
43             jsonObject.put("recordsTotal", pageInfo.getTotal());
44             jsonObject.put("recordsFiltered",pageInfo.getTotal());
45         }else{
46             if(searchtext !=null){
47                 tt =URLDecoder.decode(searchtext, "utf-8");
48                 if(tt.equals("是")){
49                     tt = "1";
50                 }
51             }
52             if(keysearch !=null){
53                 keysearch =URLDecoder.decode(keysearch, "utf-8");
54                 map.put("keysearch", keysearch);
55             }
56             tmenuList = menuService.selectAll(map);
57 
58             jsonObject.put("draw",draw);
59             jsonObject.put("recordsTotal", tmenuList.size());
60             jsonObject.put("recordsFiltered", tmenuList.size());
61         }
62         
63         
64         for(Map<String, Object> temp : tmenuList)
65         {
66              JSONObject info = new JSONObject();
67              //放入页面需要展示的值
68              info.put("id",temp.get("id"));
69              info.put("text",temp.get("text"));
70              info.put("functionurl",temp.get("functionurl"));
71              info.put("systemflag",temp.get("systemflag"));
72              jsonArray.add(info);
73         }
74         jsonObject.put("data",jsonArray);
75         
76         return jsonObject;
77     }

View Code

代码中的Page 和PageHelper的引用代码：import com.github.pagehelper.Page;

　　　　　　　　　　　　　　　　　　import com.github.pagehelper.PageHelper;

posted on 2016-08-18 13:38 福兰文文阅读(6616) 评论(2) 编辑收藏举报