DataTables的使用说明

2020-12-16 09:28:09 编辑 0 阅读量:508

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。有以下特点：
- 分页，即时搜索和排序
- 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试

## 一、使用
### 1. 引入
```
<link rel="stylesheet" type="text/css" href="/DataTables-1.10.7/css/jquery.dataTables.css">
 

<script type="text/javascript" charset="utf8" src="/DataTables-1.10.0/js/jquery.js"></script>
 

<script type="text/javascript" charset="utf8" src="/DataTables-1.10.7/js/jquery.dataTables.js"></script>
```
### 2. html
```
<table id="articleList" class="table table-bordered table-striped">
  <thead>
  <tr>
    <th>文章标题</th>
    <th>创建时间</th>
    <th>修改时间</th>
    <th>阅读数</th>
    <th>点赞数</th>
    <th>评论数</th>
    <th>置顶</th>
    <th>状态</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>  
	  {% for article in articles %}
	  <tr id="Article{{ article.id }}">
	  <td>{{ article.title }}</td>
	  <td>{{ article.created_time }}</td>
	  <td>{{ article.last_modified_time }}</td>
	  <td>{{ article.views }}</td>
	  <td>{{ article.likes }}</td>
	  <td>{{ article.get_comment_num }}</td>
	  <td>{{ article.topped }}</td>
	  <td>
	  {% if article.status == 'p' %}
	  <button type="button" class="btn btn-primary" style="font-size: 12px">发布</button>
	  {% elif article.status == 'd' %}
	  <button type="button" class="btn btn-info" style="font-size: 12px">存稿</button>
	  {% endif %}
	  </td>
	  <td>
	  <button onclick="EditArticle({{ article.id }})" type="button" class="btn btn-success" style="font-size: 12px">编辑</button>
	  <button onclick="DeleteArticle({{ article.id }})" type="button" class="btn btn-danger" style="font-size: 12px">删除</button>
	  <a href="{% url 'blog:detail' article.id %}"><button type="button" class="btn btn-default" style="font-size: 12px">访问</button></a>
	  </td>
	  </tr>
	  {% endfor %}
  </tbody>
</table>
```
### 3. js
```
$("#articleList").DataTable({
    'order': [[6, 'desc']], // 整个表以第7列降序排序
    'bStateSave': true, //记录所在页数
    'aLengthMenu': [[20, 40, 80, -1], [20, 40, 80, "All"]], //定义每页显示数据数量
});
```
## 二、参数说明
1、DataTables的默认配置
```
$(document).ready(function() {
$(‘#example’).dataTable();
} );
```

2、DataTables的一些基础属性配置
```
“bPaginate”: true, //翻页功能
“bLengthChange”: true, //改变每页显示数据数量
“bFilter”: true, //过滤功能
“bSort”: false, //排序功能
“bInfo”: true,//页脚信息
“bAutoWidth”: true//自动宽度
```

3、数据排序
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“aaSorting”: [
[ 4, "desc" ]
]
} );
} );
从第0列开始，以第4列倒序排列
```

4、多列排序
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“aaSorting”: [
[ 4, "desc" ], [5, "asc"]
]
} );
} );
从第0列开始，以第4列倒序排列
```
5、隐藏某些列
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“aoColumnDefs”: [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ “bVisible”: false, “aTargets”: [ 3 ] }
] } );
} );
```
6、改变页面上元素的位置
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>’
} );
} );
//l- 每页显示数量
//f – 过滤输入
//t – 表单Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<”class” and > – div with a class
//Examples: <”wrapper”flipt>, <lf<t>ip>
```

7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“bStateSave”: true
} );
} );
```
8、显示数字的翻页样式
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“sPaginationType”: “full_numbers”
} );
} );
```
9、水平限制宽度
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“sScrollX”: “100%”,
“sScrollXInner”: “110%”,
“bScrollCollapse”: true
} );
} );
```
10、使用ajax源
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“sAjaxSource”: ‘./arrays.txt’
} );
} );
```

11、使用ajax，在服务器端整理数据
```
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“sPaginationType”: “full_numbers”,
“sAjaxSource”: “./server_processing.php”,
/*如果加上下面这段内容，则使用post方式传递数据
“fnServerData”: function ( sSource, aoData, fnCallback ) {
$.ajax( {
“dataType”: ‘json’,
“type”: “POST”,
“url”: sSource,
“data”: aoData,
“success”: fnCallback
} );
}*/
“oLanguage”: {
“sUrl”: “cn.txt”
},
“aoColumns”: [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']将接收到aoColumns传递数据
} );
} );
示例：http://www.guoxk.com/html/DataTables/ajax-serverSide.html
```
要注意的是，要被dataTable处理的table对象，**必须有thead与tbody，而且结构要规整（数据不一定要完整）**，这样才能正确处理。

---
参考
- [1][jquery之DataTables的使用](http://84013524.blog.51cto.com/3253955/827083)
- [2][datatable分页指南--前台分页和后台分页](http://www.voidcn.com/blog/tomcat_2014/article/p-4908374.html)

DataTables的使用说明

附件: