jQuery从入门到精通 jQuery表格插件datatables用法总结-职坐标

jQuery从入门到精通 jQuery表格插件datatables用法总结

沉沙 2018-06-14 来源：阅读 1582 评论 0

摘要：DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。

官方网站及其下载地址：http:/www.datatables.net

当前最新版为1.10.2，读者可点此本站下载。

其主要特点如下：

1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的

使用方法：

首先看看如下代码：

<title>DataTables example</title>
<style type="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>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">

上述代码中引入js和css文件。可以在demo里复制。注意路径地址。

接着来看看如下代码：

<script type="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>
<body id="dt_example">//此处为body的id
 
<div id="container">//*div 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<div id="demo">
<table cellpadding="5" cellspacing="0" border="1" id="example">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>
 
<tr>//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好
<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>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
</tbody>
<tfoot>
</tfoot>  
</table>
</div>    
</div>

上面就能创建出如图的效果，分页。排序。等等。

最后讲讲各各属性（主要添加的位置）

//$(document).ready(function() {
  //$('#example').dataTable( {//加载
    //"bPaginate": true,//分页按钮
    //"bLengthChange": true,//每行显示记录数
    //"bFilter": true,//搜索栏
    //"bSort": true,//排序
    //"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
    //"bAutoWidth": true } );
/

本文由职坐标整理发布，欢迎关注职坐标WEB前端jQuery频道，获取更多jQuery知识！

web前端开发规范 jquery教程总结ppt jquery实战第2版pdf

本文由 @沉沙发布于职坐标。未经许可，禁止转载。