Datatables是一款基于jquery的表格插件,功能非常强大,用它来做表格还是不错的。这篇文章的主要目的帮助刚接触Datatables的程序猿的童鞋们快速上手,想要了解更多关于Datatables的特性可以访问Datatables的官网查看。附上传送门(Datatables官网)。下面开始我们的正文……
安装
在Datatables官网上,首先介绍的一种安装方法就是引入CDN上的一个css文件和一个js文件。
CSS: //cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
JS: //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
这样可以实现Datatables的基本的功能,当然Datatables的安装不止这一种,还可以通过Npm和Bower来安装。如果你想获取Datatables的所有文件可以下载Datatables的发布包,里面有Datatables的所有文件,以及它所有的栗子。这里附上Datatables发布包的传送门(下载)
使用
1.最基本的栗子
//引入文件
<link rel="stylesheet" href="/stylesheets/jquery.dataTables.min.css">
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery.dataTables.min.js"></script>
//HTML
<table id="example" cellspacing="0" width="100%">
------
<tr>
---------
<td></td>
---------
<tr>
------
</table>
//JS代码
$(document).ready(function() {
$('#demo1').DataTable();
} );
效果图:
2.修改表格样式
看了上面的效果图发现这样子的样式似乎有那么点不好看,可能是自己low了欣赏不了,不过没关系,Datatables提供多种样式来满足需求,具体的样式支持情况,可以去官网上查看,这里我们就不细讲了。小编我比较喜欢bootstrap的风格,下面我将以bootstrap为例,讲解如何修改Datatables的样式。
##bootstrap自己的css
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
#datatables的bootstrap样式
<link rel="stylesheet" href="/stylesheets/dataTables.bootstrap.min.css">
##jquery
<script src="/javascripts/jquery.js"></script>
##datatables核心js库
<script src="/javascripts/jquery.dataTables.min.js"></script>
##支持bootstrap的js库
<script src="/javascripts/dataTables.bootstrap.min.js"></script>
//HTML
<table id="demo2" class="table table-striped table-bordered" >
......
</table>
//JS
$(document).ready(function() {
$('#demo2').DataTable();
} );
效果图:
3.使用ajax
官网上给很多ajax的例子,这里我将其稍微整合了,给出一个比较常用的例子,其他的操作有兴趣的小伙伴们可以去官网上查看。
//HTML
<div class="text-right" style="padding: 30px 20px 10px 0">
<input class="searchStr" type="text" placeholder="根据工号搜索"/><button id="btn-search" type="button" class="btn btn-primary btn-sm">搜索</button>
</div>
<table id="demo3" class="table table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>工号</th>
<th>入职时间</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
//JS
$(document).ready(function() {
var option={
"bLengthChange":false,//不允许动态改变每页显示条数
"searching": false,//搜索区域隐藏
"ajax": {
"url": "/data//ajax_obj.json",
"type": "post",
"data":{
searchStr:$(".searchStr").val()
},
"dataSrc": "demo3",
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" },
{"defaultContent":"<a href='#' >查看详情</a>"},
],
}
var table=$('#demo3').DataTable(option);
$("#btn-search").on("click",function () {
table.settings()[0].ajax.data={
searchStr: $(".searchStr").val()
}
table.ajax.reload();
});
} );
效果图:
4.语言国际化
//JS
$(document).ready(function() {
$('#demo4').DataTable({
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} );
效果图:
5.去掉其自带的某些东西
$(document).ready(function() {
$('#demo5').DataTable({
"bPaginate":false,//翻页功能
"bLengthChange":false,//改变每页显示数据数量
"bInfo":false,//页脚信息
"bFilter":false,//过滤
"bSort":false,//排序
"displayLength":10//每页显示条数
});
} );
其中displayLength可以改变每页显示条数
标注图
6.不同的分页样式
pagingType属性有四个值可供选择,来修改分页样式
simple : 只有上一页、下一页两个按钮
simple_numbers : 除了上一页、下一页两个按钮还有页数按钮,Datatables默认是这个
full :有四个按钮首页、上一页、下一页、末页
full_numbers : 除首页、上一页、下一页、末页四个按钮还有页数按钮
7.垂直水平限制高度
垂直滚动
$(document).ready(function() {
$('#demo7').DataTable({
"scrollY": "200px",
"scrollCollapse":true
});
} );
水平滚动
$(document).ready(function() {
$('#demo8').DataTable({
"scrollX": "100%",
"scrollXInner": "110%",
});
} );
8.columnDefs属性
和 columns(Option) 参数很像,这个参数允许你给指定列设置选项,应用到一个或这多个列。而不像 columnsOption 需要每列都要定义这个参数是一个列定义对象数组,通过使用 columnDefs.targetsDT 选项,告诉Datatables是定义的是那一列,他可以是下列情况:
a) 0或者正整数-列从左到右是从0开始
b) 一个负数-列从右到左的索引(-1代表最后一列)
c) 一个字符串-将字符串和类名匹配列
d) 字符串”_all”-所有列
另外, targets可以同时指定多列,接受一个数组(比如 targets: [ -1, -2 ] )
举个栗子
//设置某列的宽度
$(document).ready(function() {
$('#demo9').DataTable({
"columnDefs": [
{
"targets": 2,
"width":"60px"
},
]
});
} );