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中对象数组对应的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" }]}