最新消息:

第41款插件:jquery.dataTables.nightly.js表格自动化

表单插件 杨红伟 4845浏览 0评论

描述:DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先 进的互动控制,支持任何HTML表格。主要特点:自动分页处理,即时表格数据过滤,数据排序以及数据类型自动检测,自动处理列宽度,可通过CSS定制样 式,支持隐藏列,易用,可扩展性和灵活性,国际化,动态创建表格,这是一款免费的插件.

图片展示:

1

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:http://www.datatables.net/
官方打包:http://www.ijquery.cn/js/DataTables/DataTables.rar
JS下载:http://www.ijquery.cn/js/Da … taTables.nightly.js
预览: http://www.ijquery.cn/demo/DataTables
打包下载:http://www.ijquery.cn/demo/DataTables/DataTables.zip
参数说明:

“bPaginate”: true, //翻页功能
“bLengthChange”: true, //改变每页显示数据数量
“bFilter”: true, //过滤功能
“bSort”: false, //排序功能
“bInfo”: true,//页脚信息
“bAutoWidth”: true//自动宽度

JS和CSS引用代码:

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/DataTables/media/css/demo_table.css" media="all" />
<script type="text/javascript" src="http://www.ijquery.cn/js/DataTables/jquery.dataTables.nightly.js"></script>
<script>
$(document).ready(function() {
$(‘#example’).dataTable();
} );
</script>

[/js]

 

HTML代码:更多请看示例,以下截取部分

[html]

<table cellpadding="0" cellspacing="0" border="0" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>

[/html]

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址