DataTables是一个jQuery的表格插件，本文为大家分享了表格插件datatables用法，介绍了基础的部分知识，具体内容如下
一、初始化
在页面中
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
js中初始化
$(document).ready( function () {
$('#table_id').DataTable();
} );
二、常用配置
在初始化的时候可以通过一些常用的配置项对表格进行配置，这是我在项目中实际用到的
$("#vivo_table_list").dataTable({
pageLength: 10, //更改初始页面长度 （每页的行数）
processing: true, //显示正在处理字符串
serverSide: false, // 服务器模式，这一点非常奇怪*
ordering: true, // 是否启用Datatables排序
searching: false, // 开启搜索
autoWidth: false,
zeroRecords: "没有查询数据",
destroy: true, // 从当前上下文销毁掉Datatables对象 (妹搞懂)
pagingType: "input", // 分页按钮种类显示选项
language: {
url: "cn.txt" // 本地化
},
dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)
ajax: {
url: "/url",
type: "post", // ajax请求的类型 **
data: function () {
return that.getQueryParams(); // ajax的参数
}
},
columns: [
{title: "id", data: "id", orderable: true},
{title: "uid", data: "uid", orderable: false},
{title: "昵称", data: "nick", orderable: false},
{title: "姓名", data: "name", orderable: false},
{title: "电话", data: "tel", orderable: false},
{title: "申请时间", data: "stimeshow", orderable: true},
{title: "状态", data: "statshow", orderable: false},
{
title: "操作", orderable: false, render: function (data,type,full) {
return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
