Jquery DataTables相关示例

最新推荐文章于 2024-08-01 11:09:48 发布

weixin_33725807

最新推荐文章于 2024-08-01 11:09:48 发布

阅读量90

点赞数

文章标签： javascript json ui ViewUI

一、Jquery-DataTables

DataTables 是jquery的一个开源的插件。它具有高度灵活的特性，基于渐进增强的基础，可以为任何表格添加交互。它特性如下：

提供分页，搜索和多列排序；
支持所有类型的数据源：
DOM，javascript，Ajax和服务器端的处理；
简洁的主题，DataTables,JQuery UI，Bootstrap，Foundation；
支持各种扩展，包括编辑器, 表格工具, 固定列等；
丰富的可配置选项、富有表现力的api；

　　DataTabels下载地址为：http://www.datatables.net/download/index。这里使用到的版本是1.10.6。

二、示例代码

1、数据源为javascript数组

　　网页代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 
  5 <meta charset="utf-8"/>
  6 <title>jquery-datatable 版本  1.10.6</title>
  7     
  8     <style type="text/css"> 
  9     /** 表格内容截取 */
 10     table{table-layout: fixed;border-collapse: collapse;}
 11     td{overflow: hidden;text-overflow:ellipsis;} /**/
 12     </style>
 13 </head>
 14 <body>
 15     <div>
 16         <table border="1"  id="example_2"  style="width: 100%;" >
 17         </table>        
 18     </div>
 19 <script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script> 
 20 <script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>  
 21 <script type="text/javascript">
 22 var dataSet = [
 23     ['Trident','InternetInternet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Explorer 4.0','Win 95+','4','X'],
 24     ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
 25     ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
 26     ['Trident','Internet Explorer 6','Win 98+','6','A'],
 27     ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
 28     ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
 29     ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
 30     ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
 31     ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
 32     ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
 33     ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
 34     ['Gecko','Camino 1.5','OSX.3+','1.8','A'],
 35     ['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
 36     ['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
 37     ['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
 38     ['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
 39     ['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
 40     ['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
 41     ['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
 42     ['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
 43     ['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
 44     ['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
 45     ['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
 46     ['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
 47     ['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
 48     ['Gecko','Epiphany 2.20','Gnome','1.8','A'],
 49     ['Webkit','Safari 1.2','OSX.3','125.5','A'],
 50     ['Webkit','Safari 1.3','OSX.3','312.8','A'],
 51     ['Webkit','Safari 2.0','OSX.4+','419.3','A'],
 52     ['Webkit','Safari 3.0','OSX.4+','522.1','A'],
 53     ['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
 54     ['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
 55     ['Webkit','S60','S60','413','A'],
 56     ['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
 57     ['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
 58     ['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
 59     ['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
 60     ['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
 61     ['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
 62     ['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
 63     ['Presto','Opera for Wii','Wii','-','A'],
 64     ['Presto','Nokia N800','N800','-','A'],
 65     ['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
 66     ['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
 67     ['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
 68     ['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
 69     ['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
 70     ['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
 71     ['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
 72     ['Misc','NetFront 3.1','Embedded devices','-','C'],
 73     ['Misc','NetFront 3.4','Embedded devices','-','A'],
 74     ['Misc','Dillo 0.8','Embedded devices','-','X'],
 75     ['Misc','Links','Text only','-','X'],
 76     ['Misc','Lynx','Text only','-','X'],
 77     ['Misc','IE Mobile','Windows Mobile 6','-','C'],
 78     ['Misc','PSP browser','PSP','-','C'],
 79     ['Other browsers','All others','-','-','U']
 80 ];
 81 $(document).ready(function(){     
 82     $('#example_2').dataTable( {
 83         "data": dataSet,
 84         "aoColumns": [
 85             { "title": "引擎" , "sWidth" : "30%" },
 86             { "title": "浏览器" , "sWidth" : "10%"},
 87             { "title": "平台" , "sWidth" : "20%" },
 88             { "title": "版本", "class": "center" , "sWidth" : "20%"},
 89             { "title": "等级", "class": "center" , "sWidth" : "20%"}
 90         ],
 91         "bPaginate": true, //开关，是否显示分页器
 92         "bServerSide": false,//服务器端分页
 93         "bSort": false, //开关，是否启用各列具有按列排序的功能
 94         "bSortClasses": false,
 95         "bFilter": false, //开关，是否启用客户端过滤器 
 96         "bAutoWidth": false, //自动设置宽度关闭 
 97         "aoColumnDefs" : [ {
 98             sDefaultContent : '',
 99             aTargets : [ '_all' ]
100         } ],
101         "oLanguage": {
102             "sProcessing": "正在加载中......",
103             "sLengthMenu": "每页显示 _MENU_ 条记录",
104             "sZeroRecords": "对不起，查询不到相关数据！",
105             "sEmptyTable": "表中无数据存在！",
106             "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
107             "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
108             "sInfoEmpty" : "显示0到0条记录",
109             "sSearch": "搜索",
110             "oPaginate": {
111                 "sFirst": "首页",
112                 "sPrevious": "上一页",
113                 "sNext": "下一页",
114                 "sLast": "末页"
115             }
116         } //多语言配置
117     });   
118 
119 });
120 </script>                                            
121 </body>
122 </html>

2、动态读取服务器数据

　　网页代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 
  5 <meta charset="utf-8"/>
  6 <title>jquery-datatable 版本  1.10.6</title>
  7     
  8     <style type="text/css"> 
  9     /** 表格内容截取 */
 10     table{table-layout: fixed;border-collapse: collapse;}
 11     td{overflow: hidden;text-overflow:ellipsis;} /**/
 12     </style>
 13 </head>
 14 <body>
 15     <div>     
 16         <table  id="sample_1">
 17             <thead>
 18             <tr>
 19                 <th>序号</th>
 20                 <th>学号</th>
 21                 <th>姓名</th>
 22                 <th>年龄</th>
 23                 <th>性别</th>     
 24                 <th>籍贯</th>
 25                 <th>班级</th>
 26                 <th>生日</th>
 27                 <th>操作</th>
 28             </tr>
 29             </thead> 
 30             <tbody>
 31             </tbody>
 32         </table>
 33     </div>
 34 <script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script> 
 35 <script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>  
 36 $(document).ready(function(){ 
 37         
 38      var oTable = $('#sample_1').dataTable( {  
 39         "sAjaxSource": "${ctx}/student/data.action",
 40         "sServerMethod": "POST" ,   //以post的方式提交数据
 41         "fnServerParams": function ( aoData ) {//此处设置查询条件，根据条件进行查询列表
 42         　　aoData.push( { "name": "nage", "value": $("#name").val()} );//年龄过滤
 43         　　aoData.push( { "name": "classId", "value": $("#classId").val()} );//班级id过滤
 44          　 aoData.push( { "name": "birthday", "value": $("#birthday").val()} );  //生日过滤
 45          　 aoData.push( { "name": "city", "value": $("#city").val()} );  //生日过滤
 46         },  
 47         "aoColumns": [
 48             {  "sName": "index",
 49                 "sWidth": "4%", //设置宽度
 50                 "sClass": "center",
 51                 "bSearchable": false,
 52                 "bStorable": false,
 53                 "fnRender": function (a) {
 54                     return a.iDataRow + 1;
 55                 }
 56             },
 57             {    "mData": "no", 
 58                 "sWidth": "10%"
 59             },
 60             {    "mData": "name" ,
 61                 "sWidth": "10%"
 62             },
 63             {    "mData": "graduationDate" ,
 64                 "sWidth": "10%"
 65             },
 66             {    "mData": "gender" ,
 67                 "sWidth": "10%"
 68             },
 69             {    "mData": "city" ,
 70                 "sWidth": "10%"
 71             },
 72             {    "sName": "className",
 73                 "sWidth": "10%",
 74                 "sClass": "center",
 75                 "bSearchable": false,
 76                 "bStorable": false,
 77                 "fnRender": function (a) {
 78                 var result="";
 79                     jQuery.ajax({//通过classId获取班级名称
 80                         url: "${ctx}/class/"+a.aData.classId,
 81                         type: "get",
 82                         async: false,  // false 为同步
 83                         dataType: "json",
 84                         success: function(data){
 85                             result = data.class.id;
 86                         }
 87                     });
 88                     return result; 
 89                 }
 90             },
 91             {    "mData": "birthday", 
 92                 "sWidth": "10%"
 93             },
 94             {    "sName": "action",
 95                 "sWidth": "10%",
 96                 "sClass": "center",
 97                 "bSearchable": false,
 98                 "bStorable": false,
 99                 "fnRender": function (a) {
100                     var s = "<a  href=\"${ctx}/control/monitor/rule/step1.action?rid=" + a.aData.id + "\">修改</a> ";  
101                     var e = "<a  href=\"${ctx}/control/monitor/rule/detail.action?rid=" + a.aData.id + "\">详情</a> ";  
102                     return s + e;  
103                 }
104             }
105         ],
106         "bPaginate": true, //开关，是否显示分页器
107         "bServerSide": true,//服务器端分页
108         "bSort": false, //开关，是否启用各列具有按列排序的功能
109         "bSortClasses": false,
110         "bFilter": false, //开关，是否启用客户端过滤器
111         "sSearch" : false, //不过滤
112         "sAjaxDataProp":  "rows",  //服务器端返回的json中对象数组对应的key
113         "bAutoWidth": false, //自动设置宽度关闭
114         "aoColumnDefs" : [ {
115　　　　　　  sDefaultContent : '',
116         　　aTargets : [ '_all' ]
117         } ],
118         "oLanguage": {
119             "sProcessing": "正在加载中......",
120             "sLengthMenu": "每页显示 _MENU_ 条记录",
121             "sZeroRecords": "对不起，查询不到相关数据！",
122             "sEmptyTable": "表中无数据存在！",
123             "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
124             "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
125             "sInfoEmpty" : "显示0到0条记录",
126             "sSearch": "搜索",
127             "oPaginate": {
128                 "sFirst": "首页",
129                 "sPrevious": "上一页",
130                 "sNext": "下一页",
131                 "sLast": "末页"
132             }
133         } //多语言配置
134     }); 
135 });
136 </script>                                            
137 </body>
138 </html>

　　服务器端代码如下：

 1 /** 
 2      * 列表数据返回，jquery-data-table（此处采用springmvc实现）
 3      * @param iDisplayStart 忽略前面的记录数
 4      * @param iDisplayLength 页面大小
 5      * @param request
 6      * @return
 7      * @throws Exception
 8      */
 9 @RequestMapping("/data")
10     @ResponseBody
11     public Map<String, Object> jsonList(@RequestParam("iDisplayStart") int iDisplayStart,
12             @RequestParam("iDisplayLength") int iDisplayLength, HttpServletRequest request) throws Exception {
13         Map<String, Object> params = new HashMap<String, Object>();
14         params.setParameter("_currpage", iDisplayStart + 1);//转换成当前页号
15         params.setParameter("_pagesize", iDisplayLength);//页面大小
16         
17         //查询条件
18         params.setParameter("name", request.getParameter("name"));
19         params.setParameter("classId", request.getParameter("classId"));
20         params.setParameter("birthday", request.getParameter("birthday")); 
21         params.setParameter("city", request.getParameter("city")); 
22         
23         List datas = null;
24         int total = 0;
25         try {
26             total = this.getService().count(params);//总记录数
27             datas = this.getService().query(params);//当前页面记录
28         } catch (Exception e) {
29             LOGGER.error("jsonListAction异常", e);
30             Map<String, Object> rtn = new HashMap<String, Object>();
31             rtn.put("code", "0");
32             rtn.put("error", "查询参数异常：" + e.getMessage());
33             return rtn;
34         }
35         Map<String, Object> result = new HashMap<String, Object>();
36         result.put("iTotalDisplayRecords", total);
37         result.put("iTotalRecords", total); 
38         result.put("rows", datas);
39         return result;
40     }

　　服务器端返回的json数据格式如下：

{"iTotalDisplayRecords":30, "iTotalRecords":30, "rows":[
{"id": "0001", "name" : "张三", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "北京" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "李四", "no" : "090002", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "上海" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "王二", "no" : "090003", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "杭州" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "赵六", "no" : "090004", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "张三2", "no" : "090005", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "张三3", "no" : "090006", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "张三4", "no" : "090007", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "张三5", "no" : "090008", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "张三6", "no" : "090009", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : "张三7", "no" : "0900010", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001"},
{"id": "0001", "name" : "张三8", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" }]}