[TOC]
## 插件DataTables表格插件使用
### （一）插件介绍
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
参考手册：http://www.datatables.club/reference/#options
> 分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源
开始使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上，可以使用下面这两个文件：
CSS：http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
JS：http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table
~~~
$(document).ready(function(){
$('#myTable').DataTable();
});
~~~
### （二）整合TP5使用
#### 1、html结构
~~~
<div class="ibox-content">
<form method="post" class="form-horizontal" action="{:url('deleteAll')}" data-type="ajax">
<input type="hidden" name="catid" value="{$infoList[0]['catid']}" />
<div class="row">
<div class="col-sm-8 m-b-xs">
<!-- 添加和删除按钮 -->
</div>
</div>
<div class="table-responsive">
<table id="dataTables-example" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
~~~
> 完整content.html
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 树形视图</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link rel="shortcut icon" href="favicon.ico">
<link href="__ADMIN__/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="__ADMIN__/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="__ADMIN__/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="__ADMIN__/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="__ADMIN__/css/animate.min.css" rel="stylesheet">
<link href="__ADMIN__/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<link href="__ADMIN__/css/admin.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>{$catname ? $catname : '暂无'}列表</h5>
</div>
<div class="ibox-content">
<form method="post" class="form-horizontal" action="{:url('deleteAll')}" data-type="ajax">
<input type="hidden" name="catid" value="{$infoList[0]['catid']}" />
<div class="table-responsive">
<table id="dataTables-example" class="table table-striped">
<thead>
<tr>
<th><input id="isCheckAll" type="checkbox" class="i-checks"></th>
<th>ID</th>
<th>标题</th>
<th>发布人</th>
<th>发布时间</th>
<th>浏览量</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
</div>
<script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script>
<script src="__ADMIN__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__ADMIN__/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="__ADMIN__/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="__ADMIN__/js/content.min.js?v=1.0.0"></script>
<script src="__ADMIN__/js/plugins/iCheck/icheck.min.js"></script>
<script>
$(document).ready(function() {
$("#dataTables-example").dataTable({
"serverSide": true,
"ajax": {
"url": "{:url('getDataTables',['id'=>input('id')])}",
"data": function(d) {
d.extra_search = "title|username";
}
},
"ordering": false, //禁用全局排序
"order": [0, '`order` desc'],
"lengthMenu": [5, 10, 20, 50, 100],
// "dom": '<l <"#normalToos">f>t<ip>',
"dom": "<'row'<'#normalToos.col-xs-4'><'col-xs-8'f>>" +
"<'row'<'col-xs-12't>>" +
"<'row'<'col-xs-6'li><'col-xs-6'p>>",
"language": {
"zeroRecords": "没有检索到数据",
"lengthMenu": "每页 _MENU_ 条记录 ",
"search": "搜索 ",
"info": "共 _PAGES_ 页，_TOTAL_ 条记录，当前显示 _START_ 到 _END_ 条",
"paginate": {
"previous": "上一页",
"next": "下一页",
}
},
"columns": [{
render: function(data, type, row, meta) {
return '<input type="checkbox" class="i-checks" name="ids[' + row.id + ']">';
}
}, {
data: "id"
}, {
data: "title"
}, {
data: "username"
}, {
data: "inputtime"
}, {
data: "views"
}, {
data: "operate"
}, ],
"drawCallback": function() {
normal_init();
},
"initComplete": function() {
$("#normalToos").append("<div class='m-b-xs'>" +
"<div class='btn-group hidden-xs' id='exampleTableEventsToolbar' role='group'>" +
"<button type='submit' class='btn btn-sm btn-outline btn-default' title='添加'>" +
"<i class='glyphicon glyphicon-plus' aria-hidden='true'></i></button>" +
"<button type='submit' class='btn btn-sm btn-outline btn-default' title='删除'>" +
"<i class='glyphicon glyphicon-trash' aria-hidden='true'></i></button></div></div>");
}
});
});
</script>
<script src="__ADMIN__/js/plugins/layer/layer.min.js"></script>
<script src="__ADMIN__/js/layer_hplus.js"></script>
</body>
</html>
~~~
#### 2、js实现
~~~
<script>
$(document).ready(function() {
$("#dataTables-example").dataTable({
"serverSide": true,
"ajax": {
"url": "{:url('getDataTables',['id'=>input('id')])}",
"data": function(d) {
d.extra_search = "title|username";
}
},
"ordering": false, //禁用全局排序
"order": [0, '`order` desc'],
"lengthMenu": [5, 10, 20, 50, 100],
// "dom": '<l <"#normalToos">f>t<ip>',
"dom": "<'row'<'#normalToos.col-xs-4'><'col-xs-8'f>>" +
"<'row'<'col-xs-12't>>" +
"<'row'<'col-xs-6'li><'col-xs-6'p>>",
"language": {
"zeroRecords": "没有检索到数据",
"lengthMenu": "每页 _MENU_ 条记录 ",
"search": "搜索 ",
"info": "共 _PAGES_ 页，_TOTAL_ 条记录，当前显示 _START_ 到 _END_ 条",
"paginate": {
"previous": "上一页",
"next": "下一页",
}
},
"columns": [{
render: function(data, type, row, meta) {
return '<input type="checkbox" class="i-checks" name="ids[' + row.id + ']">';
}
}, {
data: "id"
}, {
data: "title"
}, {
data: "username"
}, {
data: "inputtime"
}, {
data: "views"
}, {
data: "operate"
}, ],
"drawCallback": function() {
normal_init();
},
"initComplete": function() {
$("#normalToos").append("<div class='m-b-xs'>" +
"<div class='btn-group hidden-xs' id='exampleTableEventsToolbar' role='group'>" +
"<button type='submit' class='btn btn-sm btn-outline btn-default' title='添加'>" +
"<i class='glyphicon glyphicon-plus' aria-hidden='true'></i></button>" +
"<button type='submit' class='btn btn-sm btn-outline btn-default' title='删除'>" +
"<i class='glyphicon glyphicon-trash' aria-hidden='true'></i></button></div></div>");
}
});
});
</script>
~~~
#### 3、php处理
~~~
// datatables插件请求地址
public function getDataTables($id = 0) {
// 请求数据
// draw:1 请求次数
// columns[0][data]:0 设置列的数据源，即如何从整个Table的数据源(object / array)中获得
// columns[0][name]: 为列设定一个别名
// columns[0][searchable]:true 在该列上允许或者禁止过滤搜索记录
// columns[0][orderable]:true 在该列上允许或者禁止排序功能
// columns[0][search][value]: 该列的搜索条件
// columns[0][search][regex]:false 允许或者禁止对在搜索字符串中出现的正则表达式字符强制编码
// order[0][column]:0 指定排序的列
// order[0][dir]:asc 指定排序列的方式：升序或降序
// start:0 起始下标
// length:10 每页记录数
// search[value]: 全局搜索条件
// search[regex]:false 允许或者禁止对在搜索字符串中出现的正则表达式字符强制编码
// 返回数据
// "draw": 请求次数
// "recordsTotal": 数据总数
// "recordsFiltered": 过滤之后的记录总数
// "data": 返回数据
if($id){
//获取请求过来的数据
$getParam = request()->param();
$draw = $getParam['draw'];
//排序
$orderSql = $getParam['order'][0]['dir'];
//自定义查询参数
$extra_search = $getParam['extra_search'];
// 获取表名
$tablename = getModInfoById($id, 'tablename');
// 总记录数
$recordsTotal = Db::name($tablename)->where('catid',$id)->count();
//过滤条件后的总记录数
$search = $getParam['search']['value'];
$recordsFiltered = strlen($search) ? Db::name($tablename)->where('catid',$id)->where($extra_search,'like','%'.$search.'%')->count() : $recordsTotal;
//分页
$start = $getParam['start']; //起始下标
$length = $getParam['length']; //每页显示记录数
//根据开始下标计算出当前页
$page = intval($start/$length) + 1;
$config = ['page'=>$page, 'list_rows'=>$length];
$list = Db::name($tablename)->where('catid',$id)->where($extra_search,'like','%'.$search.'%')->order($orderSql)->paginate(null,false,$config);
$lists = [];
if(!empty($list)){
foreach ($list as $key => $value) {
$lists[$key] = $value;
$lists[$key]['operate'] = "<a href='". url('index',['id'=>$value['id']]) ."' title='编辑'><i class='fa fa-edit text-navy'></i></a>
<a name='delete' href='". url('delete',['id'=>$value['id'], 'catid'=>$value['catid']]) ."' title='删除'><i class='fa fa-trash-o text-navy'></i></a>";
}
}
} else{
$draw = 1;
$recordsTotal = 0;
$recordsFiltered = 0;
$lists = [];
}
$data = array(
"draw"=>$draw,
"recordsTotal"=>$recordsTotal, //数据总数
"recordsFiltered"=>$recordsFiltered, //过滤之后的记录总数
"data"=>$lists
);
echo json_encode($data);
~~~
## （三）部分列靠左、居中显示
### 1、实现功能
> （1）表头居中
（2）部分td的text靠左排列，部分居中，部分靠右
### 2、css样式
```
<style>
.table th {
text-align: center;
}
.align_left {
text-align: left;display:block;
}
.align_right {
text-align: right;
}
.align_center {
text-align: center;
}
</style>
```
### 3、渲染表格，部分代码
```
"columns": [{
render: function(data, type, row, meta) {
return '<input type="checkbox" class="i-checks" name="ids[' + row.id + ']">';
}
}, {
data: "id"
}, {
//data: "title"
"data": function (data) {
return '<span class="align_left">'+data.title+'</span>';
}
}, {
data: "username"
}, {
data: "inputtime"
}, {
data: "views"
}, {
data: "operate"
}, ],
```
### 4、参考网址
>DataTables 如何实现部分列的text靠左、部分列的text居中？
https://ask.csdn.net/questions/681091?sort=votes_count
### 5、注意事项
span默认行内元素，设置text-align没用，要设置为块级元素才行
`.align_right,.align_center{display:block}`
或者span改为div
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作