一、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数组
网页代码如下：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<title>jquery-datatable 版本 1.10.6</title> <style type="text/css">
/** 表格内容截取 */
table{table-layout: fixed;border-collapse: collapse;}
td{overflow: hidden;text-overflow:ellipsis;} /**/
</style>
</head>
<body>
<div>
<table border="1" id="example_2" style="width: 100%;" >
</table>
</div>
<script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>
<script type="text/javascript">
var dataSet = [
['Trident','InternetInternet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
['Webkit','Safari 1.2','OSX.3','125.5','A'],
['Webkit','Safari 1.3','OSX.3','312.8','A'],
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
];
$(document).ready(function(){
$('#example_2').dataTable( {
"data": dataSet,
"aoColumns": [
{ "title": "引擎" , "sWidth" : "30%" },
{ "title": "浏览器" , "sWidth" : "10%"},
{ "title": "平台" , "sWidth" : "20%" },
{ "title": "版本", "class": "center" , "sWidth" : "20%"},
{ "title": "等级", "class": "center" , "sWidth" : "20%"}
],
"bPaginate": true, //开关，是否显示分页器
"bServerSide": false,//服务器端分页
"bSort": false, //开关，是否启用各列具有按列排序的功能
"bSortClasses": false,
"bFilter": false, //开关，是否启用客户端过滤器
"bAutoWidth": false, //自动设置宽度关闭
"aoColumnDefs" : [ {
sDefaultContent : '',
aTargets : [ '_all' ]
} ],
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表*为 _MAX_ 条记录",
"sInfoEmpty" : "显示0到0条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
} //多语言配置
}); });
</script>
</body>
</html>
2、动态读取服务器数据
网页代码如下：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<title>jquery-datatable 版本 1.10.6</title> <style type="text/css">
/** 表格内容截取 */
table{table-layout: fixed;border-collapse: collapse;}
td{overflow: hidden;text-overflow:ellipsis;} /**/
</style>
</head>
<body>
<div>
<table id="sample_1">
<thead>
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>籍贯</th>
<th>班级</th>
<th>生日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>
$(document).ready(function(){ var oTable = $('#sample_1').dataTable( {
"sAjaxSource": "${ctx}/student/data.action",
"sServerMethod": "POST" , //以post的方式提交数据
"fnServerParams": function ( aoData ) {//此处设置查询条件，根据条件进行查询列表
aoData.push( { "name": "nage", "value": $("#name").val()} );//年龄过滤
aoData.push( { "name": "classId", "value": $("#classId").val()} );//班级id过滤
aoData.push( { "name": "birthday", "value": $("#birthday").val()} ); //生日过滤
aoData.push( { "name": "city", "value": $("#city").val()} ); //生日过滤
},
"aoColumns": [
{ "sName": "index",
"sWidth": "4%", //设置宽度
"sClass": "center",
"bSearchable": false,
"bStorable": false,
"fnRender": function (a) {
return a.iDataRow + 1;
}
},
{ "mData": "no",
"sWidth": "10%"
},
{ "mData": "name" ,
"sWidth": "10%"
},
{ "mData": "graduationDate" ,
"sWidth": "10%"
},
{ "mData": "gender" ,
"sWidth": "10%"
},
{ "mData": "city" ,
"sWidth": "10%"
},
{ "sName": "className",
"sWidth": "10%",
"sClass": "center",
"bSearchable": false,
"bStorable": false,
"fnRender": function (a) {
var result="";
jQuery.ajax({//通过classId获取班级名称
url: "${ctx}/class/"+a.aData.classId,
type: "get",
async: false, // false 为同步
dataType: "json",
success: function(data){
result = data.class.id;
}
});
return result;
}
},
{ "mData": "birthday",
"sWidth": "10%"
},
{ "sName": "action",
"sWidth": "10%",
"sClass": "center",
"bSearchable": false,
"bStorable": false,
"fnRender": function (a) {
var s = "<a href=\"${ctx}/control/monitor/rule/step1.action?rid=" + a.aData.id + "\">修改</a> ";
var e = "<a href=\"${ctx}/control/monitor/rule/detail.action?rid=" + a.aData.id + "\">详情</a> ";
return s + e;
}
}
],
"bPaginate": true, //开关，是否显示分页器
"bServerSide": true,//服务器端分页
"bSort": false, //开关，是否启用各列具有按列排序的功能
"bSortClasses": false,
"bFilter": false, //开关，是否启用客户端过滤器
"sSearch" : false, //不过滤
"sAjaxDataProp": "rows", //服务器端返回的json中对象数组对应的key
"bAutoWidth": false, //自动设置宽度关闭
"aoColumnDefs" : [ {
115 sDefaultContent : '',
aTargets : [ '_all' ]
} ],
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表*为 _MAX_ 条记录",
"sInfoEmpty" : "显示0到0条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
} //多语言配置
});
});
</script>
</body>
</html>
服务器端代码如下：
/**
* 列表数据返回，jquery-data-table（此处采用springmvc实现）
* @param iDisplayStart 忽略前面的记录数
* @param iDisplayLength 页面大小
* @param request
* @return
* @throws Exception
*/
@RequestMapping("/data")
@ResponseBody
public Map<String, Object> jsonList(@RequestParam("iDisplayStart") int iDisplayStart,
@RequestParam("iDisplayLength") int iDisplayLength, HttpServletRequest request) throws Exception {
Map<String, Object> params = new HashMap<String, Object>();
params.setParameter("_currpage", iDisplayStart + 1);//转换成当前页号
params.setParameter("_pagesize", iDisplayLength);//页面大小 //查询条件
params.setParameter("name", request.getParameter("name"));
params.setParameter("classId", request.getParameter("classId"));
params.setParameter("birthday", request.getParameter("birthday"));
params.setParameter("city", request.getParameter("city")); List datas = null;
int total = 0;
try {
total = this.getService().count(params);//总记录数
datas = this.getService().query(params);//当前页面记录
} catch (Exception e) {
LOGGER.error("jsonListAction异常", e);
Map<String, Object> rtn = new HashMap<String, Object>();
rtn.put("code", "0");
rtn.put("error", "查询参数异常：" + e.getMessage());
return rtn;
}
Map<String, Object> result = new HashMap<String, Object>();
result.put("iTotalDisplayRecords", total);
result.put("iTotalRecords", total);
result.put("rows", datas);
return result;
}
服务器端返回的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" }]}