dataTables在显示表格的时候,果然是个好东西,支持排序/搜索/分页/...
官网:http://www.datatables.net/
demo:
<script src=".../jquery-1.4.4.min.js" type="text/javascript"></script>
<script src=".../jquery.dataTables.min.js" type="text/javascript"></script>
<link type="text/css" href=".../datatable.css" rev="stylesheet" rel="stylesheet"></script>
<link type="text/css" href=".../datatable_jui.css" rev="stylesheet" rel="stylesheet"></script>
<link type="text/css" href=".../jquery-ui-1.8.7.custom.css" rev="stylesheet" rel="stylesheet">
<script type="text/javascript">
<!--
function initTable(){
$('#table_id').dataTable({
"bJQueryUI" : true,
"aaSorting" : [ [0, 'asc' ], [ 3, 'asc' ] ],/*默认排序*/
"aLengthMenu" : [ [ 10, 20, 50, -1 ], [ 10, 20, 50, "All" ] ],
"iDisplayLength": 20,/*默认显示长度*/
});
}
$("document").ready(initTable);
//-->
</script>
<style>
<!--
table{
width:100%;
}
-->
</style>
<div style="width:500px;">
<table id="table_id">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead>
<tbody>
<tr><td>Trident</td><td>Internet Explorer 4.0</td><td>Win 95+</td><td class="center"> 4</td><td class="center">X</td></tr>
<tr><td>Trident</td><td>Internet Explorer 3.0</td><td>Win 96+</td><td class="center"> 4</td><td class="center">X</td></tr>
<tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>
<tr><td>Trident</td><td>Internet Explorer 5.0</td><td>Win 98+</td><td class="center"> 4</td><td class="center">X</td></tr>
<tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>
<tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>
<tr><td>Gecko</td><td>Camino 1.0</td><td>OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></tfoot>
</table>
</div>
难度升级:
var sDom = '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"<"table_title"><"title_select">l<"right"><"clear">>rt<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>';
function initTable(){
$('#table_id').dataTable({
"bJQueryUI" : true,
"bFilter": false,/*不用搜索栏*/
"iDisplayLength": 6,/*默认显示长度*/
"aaSorting" : [ [ 3, 'asc' ] ],/*默认排序*/
"aLengthMenu" : [ [ 6, -1 ], [ 6, "All" ] ],/*可选长度*/
"bStateSave": true,/*记录cookie(记的东西太多了,不太建议用)*/
"oLanguage": {/*汉化*/
"sLengthMenu": "每页显示 _MENU_ 行",
"sZeroRecords": "没有记录",
"sInfo": "当前显示 _START_ ~ _END_ 条,共 _TOTAL_ 条记录",
"sInfoEmpty": "当前显示 0 ~ 0 条,共 0 条记录",
"sInfoFiltered": "(从 _MAX_ 条记录中搜索)"
},
"sDom": sDom,/*tool工具条设置http://datatables.net/release-datatables/examples/basic_init/dom.html(不要被吓倒,很简单的)*/
"bAutoWidth": false,/*取消自动设置表格宽度(这个说来话长,吃了不少苦才挖出来的宝)*/
"aoColumnDefs": [{ "bVisible": false, "aTargets": [ 2 ] }],/*隐藏第三列*/
});
$('#table_id_wrapper .table_title').html('我的表格');
}
$("document").ready(initTable);
此外
在html页的table上进行渲染,会有一个渲染表的动作,解决办法:
1、hidden渲染好了再出来show出来;
2、datatables可以通过js/ajax等传数据进来(但是这样的话,没法直接对tr / td设置css属性等)