码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-18 14:26:00      阅读:630      评论:0      收藏:0      [点我收藏+]

标签:

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  <!-- columns show and hide css style -->

<link href="../../static/datatables/css/buttons/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="../../static/datatables/css/admin/jquery.dataTables.css" rel="stylesheet" type="text/css" />

       JS    <!-- buttons hide and show -->

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

        <script type="text/javascript" src="lib/datatables/1.10.8/jquery.dataTables.js"></script>  

        <script type="text/javascript" src="../../static/datatables/js/buttons/dataTables.buttons.min.js"></script>

<script type="text/javascript" src="../../static/datatables/js/buttons/buttons.colVis.min.js"></script>

   配置dom节点:  "dom" : ‘Blfrtip‘,

   配置buttons属性:

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

]

(2)Excel

  页面引入:<!-- excel export data-->

    <script type="text/javascript" src="lib/datatables/js/excel/buttons.flash.min.js"></script>   //此文件导出可以兼容IE9以上

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

<script type="text/javascript" src="lib/datatables/js/excel/jszip.min.js"></script>
<script type="text/javascript" src="lib/datatables/js/excel/buttons.html5.min.js"></script>

   配置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)列拖拽与列宽拖动

页面引入:     <!-- column moving script -->

<script type="text/javascript" src="lib/datatables/js/ColReorder/colResizable-1.5.min.js"></script>
<script type="text/javascript" src="lib/datatables/js/ColReorder/dataTables.colReorder.js"></script>

配置:/*在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;

 

 

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

标签:

原文地址:http://www.cnblogs.com/alvin-perfect/p/5780988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!