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

来源：互联网发布：网络公开课网站编辑：程序博客网时间：2024/05/17 04:53

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

0 0