datatables的使用

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

官方网址：http://www.datatables.club/

demo：https://download.youkuaiyun.com/download/hhy1006894859/10847026

一、基本使用

1、引入jquery、jquery.dataTables.min.js、jquery.dataTables.min.css

2、html代码：

 <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>ID</th>
            <th>机构编码</th>
            <th>机构名称</th>
            <th>排序项</th>
            <th>上级机构编码</th>
        </tr>
        </thead>

        <!--<tfoot>-->
        <!--<tr>-->
        <!--<th>Name</th>-->
        <!--<th>Position</th>-->
        <!--<th>Office</th>-->
        <!--<th>Age</th>-->
        <!--<th>Start date</th>-->
        <!--<th>Salary</th>-->
        <!--</tr>-->
        <!--</tfoot>-->
        <!--<tbody></tbody>-->

    </table>

3、js代码

var tableConfig = {
    /*l - Length changing 改变每页显示多少条数据的控件
        f - Filtering input 即时搜索框控件
        t - The Table 表格本身
        i - Information 表格相关信息控件
        p - Pagination 分页控件
        r - pRocessing 加载等待显示信息
    < > - div elements 代表一个div元素 <div><div>
<"#id" > - div with an id 指定了id的div元素 <div id='id'><div>
    <"class" > - div with a class 指定了样式名的div元素 <div class='class'><div>
    <"#id.class" > - div with an id and class 指定了id和样式的div元素 <div id='id' class='class'><div>*/
    // "dom": '<"search"f><"top"i>rt<"bottom"l><"page"p>',// 控制显示某部分的控件，和该控件的位置
    "dom": '<"search"f>rt<"bottom"l><"page"p>',// 控制显示某部分的控件，和该控件的位置
    // "scrollY": 200,
    scrollX:true,
    "pagingType":"full_numbers",
    language: {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "<span>搜索:</span>",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    },
    "data": [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       5421,
            "operate":"<button>删除</button>"
        },
        {
            "name": "Garrett Winters",
            "position": "Director",
            "salary": "5300",
            "start_date": "2011/07/25",
            "office": "Edinburgh",
            "extn": "8422",
            "operate":"操作"
        },
        // ...
    ],
    "columns": [
        { "data": "name" },
        { "data": "position" },
        {"data":"salary"},
        {"data":"start_date"},
        {"data":"office"},

    ]

}


$("#example").DataTable(tableConfig)

这些是基本的使用。