dataTables插件-基本初始化

一、简介
jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。本文对dataTables插件使用做一定的记录。不常用或目前不用的方法就暂时放放只作为了解。

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>
                    Rendering engine
                th>
                <th>
                    Browser
                th>
            tr>
        thead>
        <tbody>
            <tr class="odd gradeX">
                <td>
                    Trident
                td>
                <td>
                    Internet Explorer 4.0
                td>
            tr>

二、使用方式
在 dataTables 中，参数名称的前缀用来说明参数的数据类型，很明显，b 表示布尔类型，i 表示整数类型，s 表示字符串’>字符串类型。

1.零配置方式：最简单的使用方式
头部引入所需js文件和css样式

<link  rel="stylesheet" href="media/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-1.12.3.min.js">script>
<script src="media/js/jquery.dataTables.js">script>

使用方法：

<script>
        $(document).ready(function() {
            $('#example').DataTable();
        } );
script>

表格的效果：

红框表示了四个默认的设置效果，分别用来选择每页的行数，表格的过滤器，表格的信息和换页。

使用了几个默认的参数设置：
bPaginate: 是否分页，默认为 true，分页
iDisplayLength : 每页的行数，每页默认数量:10
sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。
bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。
bFilter: 启用或禁止数据过滤，默认为 true。 注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom
bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

我们也可以通过传递一个初始化参数对象来改变这些设置。例如，下面的例子将每页的行数设置为 20 行。

$(function () {
    $("#example").dataTable(
      {
          iDisplayLength: 20
      }
    );
});

2 . 功能启用/禁用
比如，禁用bInfo：

$(document).ready(function() {
    $('#example').DataTable( {
        "info":     false
    } );
} );

效果图：

3 . 排序，asc正序 desc倒序
在官方示例中，对于表格的是否可排序是在初始化中设置的一个值来决定的

$("#example").dataTable( {  
        "sort": true, 
});  

指定单列排序：
如 ：从第0列开始，以第4列倒序排列

$(document).ready(function() {
    $('#example').dataTable( {
        "sorting": [
            [ 4, "desc" ]
        ]
    } );
} );

指定多列排序：
指定某列不可排序：

$("#example").dataTable( {  
        "columnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }]  
    });  

该值的含义为。初始化datatable，但对序号为0列的列不进行排序，别的列均可进行排序
4 . 多表格时
多个表格均不设置id值
用法：

$(document).ready(function() {
    $('table.display').DataTable();
} );

5 . 隐藏列
6 . 复杂的头部
7 . 灵活设置表格宽度
在CSS文件中设置表格父容器的宽度

div.container {
        width: 80%;
    }

8 . 记录状态功能：开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的

$(document).ready(function() {
    $('#example').DataTable( {
        stateSave: true
    } );
} );

9 . 一般页数是可呈现7页，还可以用可扩展的分页机制,pagingType选项
numbers - 只显示数字页码
simple - 只显示’Previous’ and ‘Next’ buttons
simple_numbers - ‘Previous’ and ‘Next’ buttons以及 page numbers
full - ‘First’, ‘Previous’以及’Next’ and ‘Last’ buttons
full_numbers - ‘First’, ‘Previous’, ‘Next’ and ‘Last’ buttons, plus page numbers

$(document).ready(function() {
    $('#example').DataTable( {
        "pagingType": "full_numbers"
    } );
} );

10 . 垂直滚动且不分页

$(document).ready(function() {
    $('#example').DataTable( {
        "scrollY":        "200px",
        "scrollCollapse": true,
        "paging":         false
    } );
} );

11 . 水平滚动

$(document).ready(function() {
    $('#example').DataTable( {
        "scrollX": true
    } );
} );

12 .水平垂直滚动

$(document).ready(function() {
    $('#example').DataTable( {
        "scrollY": 200,
        "scrollX": true
    } );
} );

参数大全

回调函数：

实例：