你的位置:首页 > Java教程

[Java教程]Jquery DataTables相关示例


一、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中对象数组对应的key113     "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   @ResponseBody11   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" }]}