您的位置：首页 > 其它

DataTable初次使用笔记

2017-03-07 16:12 225 查看

概述：DataTable是一个jQuery插件，用于生成HTML表格，功能很强大。

使用：

使用DataTable需要引入jQuery，因为他是基于jQuery的插件，然后引入DataTable的js文件和css文件即可，下面贴出该文章编写时使用的cdn。

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

然后我们需要在页面中定义一个table标签，并为其指定一个id

<table id="mTable"></table>

调用DataTable提供的初始化方法

$('#mTable').dataTable();

现在DataTable已经创建完成了，不过我们好像什么都看不到，因为没有表格数据嘛，当然是一片空白，接下来我们为这个表格加上一个表头

在table标签中加入如下代码

<table id="mTable">
<thead>
<tr>
<td>姓名</td><td>年龄</td><td>性别</td>
</tr>
</thead>
</table>

再刷新网页是不是就能看到一个表格的效果了？下面就是对表格进行各种配置了，代码全部贴出来，一个一个解释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<title>Datatable</title>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<style type="text/css">
.loading-img {
position: fixed;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<table id="mTable">
<thead>
<tr>
<td>姓名</td><td>年龄</td><td>性别</td>
</tr>
</thead>
</table>

<script type="text/javascript">
$('#mTable').dataTable({
language: {
url: '//cdn.datatables.net/plug-ins/1.10.13/i18n/Chinese.json'
},
serverSide: true,
ordering: false,
searching: false,
ajax: '/data.php',
columns: [
{data: 'name', title: '姓名'},
{data: 'age', title: '年龄'},
{data: 'sex', title: '性别'}
],

// 仅仅在表格第一次初始化完成的时候调用
initComplete: function( settings, json ) {
alert('initComplete');
},

// 表格HTML画完完的时候触发，在initComplete之前
drawCallback: function(settings) {
alert( 'drawCallback' );
},

// 每画完一行就调用一次本方法
"rowCallback": function(row, data, index) {
console.log(data, row);
}
}).on('preXhr.dt', function(e, settings, data) {
loading();
}).on('xhr.dt', function(e, settings, json, xhr) {
unloading();
});

function loading() {
var content = '<img class="loading-img" src="/loading178.gif" />';
$('body').append(content);
}

function unloading() {
$('.loading-img').remove();
}
</script>
</body>
</html>

language是指定表格所使用的语言，上面指的是用中文（官方提供的json文件cdn）

serverSize是一个很重要的参数，这个参数表明，对表格的数据分页，以及排序等操作都放到服务端去完成，启用这个参数之后，其对ajax指定的地址发起请求会带很多参数，这里暂不做讲解，不明白的朋友可以下面回复。

ordering和searching分别指定表格是否启用排序和搜索

ajax指表格中的数据源，即一个URL地址

columns指定每一列的数据绑定，其中data就是绑定的名称

最下面两个on是事件，分别表示发起ajax请求之前和请求结束的回调函数。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航