Jquery.DataTable使用

Jquery.DataTable插件使用

安装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>  
    $(document).ready( function () { $('#table_id_example').DataTable(); } );

详细例子

<table class="table display" id="datatable_xs"> 学号 姓名 性别 民族 年级 班号 院系 政治面貌 在校状态 
  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"} ] });

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

$('#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" } 

搜索

"searching": true, 

 
  

    class= 
   "form-inline"> 
   

     class= 
    "form-group"> 
    for="xsjb_xh">关键字 
    type= "text" class= "form-control" id= "xsjb_xh" name= "xh">  
   
 
   type="button" class="btn btn-default" id="xsjbxx">查询 
  
 $('#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": ' 
   
     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": ' 
  
    ip>', 
  

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

自定义dom

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

HTML DOM 是：

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

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

那么Datatables有以下的定义：

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

上面的 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就可以任你摆布了

1. < > – 这个尖括号就代表 html标签里的
2. <”className” > – 代表添加了class的div
3. <”#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>http://www.gbtags.com/gb/index.htm    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>http://www.gbtags.com/gb/listcodereplay.htm    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>http://www.gbtags.com/gb/gbliveclass.htm    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看不懂~~ 我能理解，下面讲个简单点的。说之前需要让大家知道的是，不要想的很复杂，这真是一个简单的问题。

 <div class="wrapper"> {    filter} {length} {information} {pagination} {table}   div>    这里就没有把具体的 html 都贴出了 ，{filter} 就是指的 具体的 html 代码 ，为了直观的演示，用这个代替表示再看几个：    var table = $('#example').DataTable( { "dom": '         ip>'     } ); 处理后是这样的： 

再来一个：

var table = $('#example').DataTable( { "dom": '<"top"i>rt<"bottom"flp><"clear">' } ); 

{processing}
{table}

“`