Jquery.DataTable插件使用

DataTable插件是一款基于jquery的表格插件，其官网地址为

下面简单描述该插件的使用方法

安装DataTable

从官网下载最新版本的插件，再在页面中应用相应的js和css文件

DataTable使用

DataTable支持多种使用方法分别是基于静态html表格

一个例子

<table id="table_id_example" 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><!--初始化Datatables-->$(document).ready( function () { $('#table_id_example').DataTable();} );

详细例子

通常情况下我们都是基于Server端的数据动态生成表格因此主要使用Ajax的方式生成表格因此重点介绍基于服务端的表格

首先也需要在html页面指定表格主体

<table class="table display" id="datatable_xs"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>民族</th> <th>年级</th> <th>班号</th> <th>院系</th> <th>政治面貌</th> <th>在校状态</th> </tr> </thead></table>//表格生成$('#datatable_xs').DataTable({ "processing": true, "searching": true, "serverSide": true, "ajax": { "url": "/scuvc/jw/xs/listJson", }, "columns": [ {"data": "xh"}, {"data": "xm"}, {"data": "xbdm"}, {"data": "mzdm"}, {"data": "rxnd"}, {"data": "xzbmc"}, {"data": "jgmc"}, {"data": "zzmmdm"}, {"data": "zxztm"} ] });

这样就生成了一个基本的基于服务端的表格，其中columns中的data对应项与服务端传递回来的json数组一一对应，如果传递的json数据无法对应则会报错并且只会生成一个空表格。

该表格配置中包含了一些简单的配置属性

"processing": true,//数据加载时显示进度都没条"searching": true,//启用搜索功能"serverSide": true,//启用服务端分页（这是使用Ajax服务端的必须配置）

这只是一个简单的服务端的datable，通常情况下服务端分页都会包含一些页面参数，例如页码、每页条数等等这时候就需要对datatable进行进一步的配置。

下面将给出一个详细的实例，也是前面同一个表格

$('#datatable_xs').DataTable({ language: { "url": "js/assets/plugins/tables/datatables/datatables_language.json" }, "processing": true, "searching": true, "serverSide": true, "ajax": { "url": "/scuvc/jw/xs/listJson", "data": function (d) { var info = $('#datatable_xs').DataTable().page.info(); d.pageNo = info.page;} }, "columns": [ {"data": "xh"}, {"data": "xm"}, {"data": "xbdm"}, {"data": "mzdm"}, {"data": "rxnd"}, {"data": "xzbmc"}, {"data": "jgmc"}, {"data": "zzmmdm"}, {"data": "zxztm"} ] });//通过datatable的api获取当前页码用于服务端分页var info = $('#datatable_xs').DataTable().page.info();

国际化

通常情况下生成的表格都是英文表格，因此需要进行本地化，datatable通过引入一个json数组文件实现本地化datatables_language.json

{ "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": ": 以降序排列此列" }}

然后在生成表格的时候引入就行了

language: { "url": "js/assets/plugins/tables/datatables/datatables_language.json" }

搜索

通常都会给表格提供检索功能，datatable内置了检索功能，但是默认的检索苟能不够强大，通常情况我们都会自己构建检索框，下面将简单介绍构建一个简单的自定义检索功能

首先启用datatable的检索功能

"searching": true,

此时在表格上方就出现了一个默认的输入框，下面我们将对表格进行改造生成我们自己想要的检索框

首先修改html页面，在表格代码前面添加一个form表单用于承载各输入框

<form class="form-inline"> <div class="form-group"> <label for="xsjb_xh">关键字</label> <input type="text" class="form-control" id="xsjb_xh" name="xh"> </div> <button type="button" class="btn btn-default" id="xsjbxx">查询</button></form> $('#datatable_xs').DataTable({ language: { "url": "js/assets/plugins/tables/datatables/datatables_language.json" }, "processing": true, "searching": true, "serverSide": true, "ajax": { "url": "/scuvc/jw/xs/listJson", "data": function (d) { var info = $('#datatable_xs').DataTable().page.info(); d.pageNo = info.page; var xh = $('#xsjb_xh').val(); //指定检索参数名称，后台参数名为extraSerach d.extraSerach=xh; } }, "dom": '<l<t>ip>', "columns": [ {"data": "xh"}, {"data": "xm"}, {"data": "xbdm"}, {"data": "mzdm"}, {"data": "rxnd"}, {"data": "xzbmc"}, {"data": "jgmc"}, {"data": "zzmmdm"}, {"data": "zxztm"} ] }); //点击提交按钮重新绘制表格，并将输入框中的值赋予检索框 $('#xsjbxx').click(function () { var xh = $('#xsjb_xh').val(); var table = $('#datatable_xs').DataTable(); table.search(xh).draw(); });在表格option配置里面有一个dom属性，这个属性就是用来配置自定义输入框，同时将系统默认输入框隐藏，但是在提交的时候会将自定义输入框的值传递到默认隐藏的输入框进行提交，因此如果有多个输入框需要加入特定的字符串分隔不同的输入框内容，例如不同输入框之间通过|进行连接如：aa|bb之类的方式"dom": '<l<t>ip>',

本处的自定义输入框参看下面的自定义dom

自定义dom

本处直接复制

DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

我们需要了解的是 HTML DOM，什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型HTML 的标准编程接口W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

其次，Datatables里所谓的DOM是什么？

domOption dom不定时一讲 也是指 html 元素。

用过Datatables的朋友应该都知道，默认情况下，表格都会有左上角的 改变每页显示条数、右上角的 搜索框、 左下角的 表格信息 ，右下角的 分页信息 、表格中部 数据加载等待框 以及 表格 本身，这都是Datatables所谓的 DOM。它们实际上就是一个 div 包裹起来的 select、input或者其他 HTML 标签。

那么Datatables有以下的定义：

l 代表 length，左上角的改变每页显示条数控件f 代表 filtering，右上角的过滤搜索框控件t 代表 table，表格本身i 代表 info，左下角的表格信息显示控件p 代表 pagination，右下角的分页控件r 代表 processing，表格中间的数据加载等待提示框控件B 代表 button，Datatables可以提供的按钮控件，默认显示在左上角既然都是 html 元素，那么他们的位置，是否显示这些都是可以控制的，我们管这个叫 DOM定位

最后，我们怎么摆放这些控件的位置，或者我不想看到她？

因为 domOption dom不定时一讲 的默认值是 lfrtip ,所以表格初始化后都是 左上角是长度控制，右上角是过滤框，中间是表格和数据加载等待，左下角是表格信息展示，右下角是分页控件。

上面的 lfrtip 被Datatables处理后的代码如下：

<!-- 我是显示在左上角的，控制每页显示数据的条数 --><div> <select> <option>10</option> </select></div><!-- 我是显示在右上角的，可以过滤数据的输入框 --><div> <input type="text"></div><!-- 我是等待加载提示，默认是不可以看到的哦 --><div><span>加载中...</span></div><!-- 我就是表格啊，在中间，最重要的位置 --><div> <table></table></div><!-- 我显示在左下角，用来告诉大家表格的信息 --><div> 显示第 1 至 9 项结果，共 9 项</div><!-- 我显示在右下角，用来控制表格的分页 --><div> <a>首页</a> <a>1</a> <a>2</a> <a>...</a> <a>尾页</a></div>

当然上面的标签，和实际的可能会有些不一样，但是大致的布局就是这样，我想大家应该能够看明白了。

下面再介绍三个标签，是Datatables自己定义的，通过这三个标签，Datatables就可以任你摆布了

< > - 这个尖括号就代表 html标签里的 <div></div><”className” > - 代表添加了class的div <div class="className"></div><”#id” > - 代表添加了id的div <div id="id"></div>认识了上面三个标签后，我们看看下面的代码（以Bootstrap css框架为例）：

 var table = $("#example").DataTable({ "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>" });下面是最终的 html 代码：<div id="example_wrapper" class="dataTables_wrapper form-inline"> <div class="row"> <div class="col-sm-6"> <div class="dataTables_length" id="example_length"> <label><select name="example_length" aria-controls="example" class="form-control input-sm"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> records per page</label> </div> </div> <div class="col-sm-6"> <div id="example_filter" class="dataTables_filter"> <label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="example"/></label> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <table id="example" class="table table-striped table-bordered dataTable" role="grid" aria-describedby="example_info" style="width: 1304px;"> <thead> <tr role="row"> <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column descending" aria-sort="ascending" style="width: 27px;"></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="序号: activate to sort column ascending" style="width: 77px;">序号 </th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="标题: activate to sort column ascending" style="width: 570px;">标题 </th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="连接: activate to sort column ascending" style="width: 481px;">连接 </th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="sorting_1">1</td> <td>1</td> <td><a href="Online Program knowledge share and study platform" target="_blank">Online Program knowledge share and study platform</a></td> <td>;/td> </tr> <tr role="row" class="even"> <td class="sorting_1">2</td> <td>2</td> <td><a href="Share Code Gbtags" target="_blank">Share Code Gbtags</a></td> <td>;/td> </tr> <tr role="row" class="odd"> <td class="sorting_1">3</td> <td>3</td> <td><a href="Online live Gbtags" target="_blank">Online live Gbtags</a></td> <td>;/td> </tr> </tbody> <tfoot> <tr> <th rowspan="1" colspan="1"></th> <th rowspan="1" colspan="1">序号</th> <th rowspan="1" colspan="1">标题</th> <th rowspan="1" colspan="1">连接</th> </tr> </tfoot> </table> </div> </div> <div class="row"> <div class="col-sm-5"> <div class="dataTables_info" id="example_info" role="status" aria-live="polite"> Showing 1 to 3 of 4 entries </div> </div> <div class="col-sm-7"> <div class="dataTables_paginate paging_simple_numbers" id="example_paginate"> <ul class="pagination"> <li class="paginate_button previous disabled" aria-controls="example" tabindex="0" id="example_previous"><a href="#">Previous</a></li> <li class="paginate_button active" aria-controls="example" tabindex="0"><a href="#">1</a></li> <li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">2</a></li> <li class="paginate_button next" aria-controls="example" tabindex="0" id="example_next"><a href="#">Next</a></li> </ul> </div> </div> </div></div>

哎呀，懵逼了，这么多，tm看不懂~~ 我能理解，下面讲个简单点的。说之前需要让大家知道的是，不要想的很复杂，这真是一个简单的问题。

var table = $('#example').DataTable( { "dom": '<"wrapper"flipt>'} );

这个应该很简单，起码 dom 指定的值只有一行，上面那个居然有三个，看着就晕，那么这个初始化代码被Datatables处理后是这样的：

<div class="wrapper"> {filter} {length} {information} {pagination} {table} </div>

这里就没有把具体的 html 都贴出了 ，{filter} 就是指的 具体的 html 代码 ，为了直观的演示，用这个代替表示

再看几个：

 var table = $('#example').DataTable( { "dom": '<lf<t>ip>' } );

处理后是这样的：

 <div> {length} {filter} <div> {table} </div> {information} {pagination} </div>再来一个： var table = $('#example').DataTable( { "dom": '<"top"i>rt<"bottom"flp><"clear">' } );结果如下： <div class="top"> {information} </div> {processing} {table} <div class="bottom"> {filter} {length} {pagination} </div> <div class="clear"></div>