Re:从零开始的实习生活03----Datatables的使用说明

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"
                },
            ]
        });
    } );