Jquery.DataTable的基本使用

最新推荐文章于 2023-03-25 17:51:22 发布

玩名堂_

最新推荐文章于 2023-03-25 17:51:22 发布

阅读量3.4k

点赞数 1

分类专栏： Web开发 jQuery 文章标签： jquery 插件管理

本文链接：https://blog.csdn.net/qq_33535433/article/details/78398479

版权

Web开发同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

当我们做后台的各种管理系统的时候，经常有各种表格操作，如果自己写js的话那工作量真的太大了，而现在就有一款基于jquery的表格插件—DataTable，这是它的中文网:http://datatables.club/

安装DataTable

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

DataTable使用

一个简单例子

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

详细例子

通常情况下我们都是基于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>
<script>
    $('#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();
    });
</script>

在表格option配置里面有一个dom属性，这个属性就是用来配置自定义输入框，同时将系统默认输入框隐藏，但是在提交的时候会将自定义输入框的值传递到默认隐藏的输入框进行提交，因此如果有多个输入框需要加入特定的字符串分隔不同的输入框内容，例如不同输入框之间通过|进行连接如：aa|bb之类的方式
"dom": '<l<t>ip>',

用过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标签里的
<”className” > - 代表添加了class的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>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>

玩名堂_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery.DataTable的基本使用

当我们做后台的各种管理系统的时候，经常有各种表格操作，如果自己写js的话那工作量真的太大了，而现在就有一款基于jquery的表格插件—DataTable，这是它的中文网:http://datatables.club/安装DataTable从官网下载最新版本的插件，再在页面中应用相应的js和css文件DataTable使用一个简单例子table id="table
复制链接

扫一扫