jQuery表格插件datatables用法总结
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
官方网站及其下载地址：http:/www.datatables.net
当前最新版为1.10.2，读者可点此本站下载。
其主要特点如下：
1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的
使用方法：
首先看看如下代码：
<title>DataTablesexample</title> <styletype="text/css"title="currentStyle"> @import"../../media/css/demo_page.css"; @import"../../media/css/demo_table.css"; @import"../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css"; </style> <scripttype="text/javascript"language="javascript"src="../../media/js/jquery.js"></script> <scripttype="text/javascript"language="javascript"src="../../media/js/jquery.dataTables.js"></script> <scripttype="text/javascript"charset="utf-8">
上述代码中引入js和css文件。可以在demo里复制。注意路径地址。
接着来看看如下代码：
<scripttype="text/javascript"charset="utf-8">
$(document).ready(function(){
$('#example').dataTable({
"oLanguage":{
"sUrl":"/SSS/dataTables/de_DE.txt"
},
"bStateSave":true,
//"bJQueryUI":true,//使用jqueryui。我用的时候显示的不是很好
"sPaginationType":"full_numbers"//分页
});
});
</script>
</head>
<bodyid="dt_example">//此处为body的id
<divid="container"align="center">//*div里是table，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<divid="demo">
<tablecellpadding="5"cellspacing="0"border="1"class="display"id="example"align="center">//id别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>
<trclass="gradeX">//此处可以是gradeA,gradeX等，但是gradeB隔行换色效果很好
<td>Trident</td>
<td>Internet
Explorer4.0</td>
<td>Win95+</td>
<tdclass="center">4</td>
<tdclass="center">X</td>
</tr>
<trclass="gradeC">
<td>Trident</td>
<td>Internet
Explorer5.0</td>
<td>Win95+</td>
<tdclass="center">5</td>
<tdclass="center">C</td>
</tr>
<trclass="gradeA">
<td>Trident</td>
<td>Internet
Explorer5.5</td>
<td>Win95+</td>
<tdclass="center">5.5</td>
<tdclass="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
上面就能创建出如图的效果，分页。排序。等等。
最后讲讲各各属性（主要添加的位置）
//$(document).ready(function(){
//$('#example').dataTable({//加载
//"bPaginate":true,//分页按钮
//"bLengthChange":true,//每行显示记录数
//"bFilter":true,//搜索栏
//"bSort":true,//排序
//"bInfo":true,//Showing1to10of23entries总记录数没也显示多少等信息
//"bAutoWidth":true});
//});
//$(document).ready(function(){
//$('#example').dataTable({
//"aaSorting":[[4,"desc"]]//给列表排序，第一个参数表示数组。4就是cssgrade那列。第二个参数为desc或是asc
//});
//});
//$(document).ready(function(){
//$('#example').dataTable({
//"aoColumns":[
///*Engine*/null,//默认
///*Browser*/null,
///*Platform*/{"bSearchable":false,//不可参与搜索
//"bVisible":false},//不可见
///*Version*/{"bVisible":false},//不可见
///*Grade*/null
//]});
//});
//$(document).ready(function(){
//$('#example').dataTable({
//});
//});
//$(document).ready(function(){
//$('#example').dataTable({
//"sDom":'<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。*l-Lengthchanging*f-Filteringinput*t-Thetable!*i-Information*p-Pagination*r-pRocessing*<and>-divelements*<"class"and>-divwithaclass*Examples:<"wrapper"flipt>,<lf<t>ip>
//});
//});
//$(document).ready(function(){
//$('#example').dataTable({
//"bStateSave":true//保存状态到cookie***************很重要，当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
//});
//});
//$(document).ready(function(){
//$('#example').dataTable({
//"sPaginationType":"full_numbers"//分页，一共两种样式另一种为two_button是datatables默认
//});
//});
//$(document).ready(function(){
//$('#example').dataTable({//分页信息不是很难理解。
//"oLanguage":{
//"sLengthMenu":"Display_MENU_recordsperpage",
//"sZeroRecords":"Nothingfound-sorry",
//"sInfo":"Showing_START_to_END_of_TOTAL_records",
//"sInfoEmtpy":"Showing0to0of0records",
//"sInfoFiltered":"(filteredfrom_MAX_totalrecords)"
//}
//});
//})
$(document).ready(function(){
oTable=$('#example').dataTable({
"bJQueryUI":true,//可以添加jqury的uitheme需要添加css
"sPaginationType":"full_numbers"
});
});
默认的语言是英文的当然可以国际化：
"sUrl":"/SSS/dataTables/de_DE.txt"添加个国际化的文件就可以。名字随便路径对了就可以。我写的国际化文件内容如下，可以直接复制到txt中使用.
{
"sProcessing":"Bittewarten...",
"sLengthMenu":"显示_MENU_条",
"sZeroRecords":"没有您要搜索的内容",
"sInfo":"从_START_到_END_条记录——总记录数为_TOTAL_条",
"sInfoEmpty":"记录数为0",
"sInfoFiltered":"(全部记录数_MAX_条)",
"sInfoPostFix":"",
"sSearch":"搜索",
"sUrl":"",
"oPaginate":{
"sFirst":"第一页",
"sPrevious":"上一页",
"sNext":"下一页",
"sLast":"最后一页"
}
}
这些是datatables的基础部分。比较容易掌握。
希望本文所述对大家jQuery程序设计的学习有所帮助。