Datatables表格插件学习

头像
Corwien
    阅读 15 分钟
    3

    Datatables 是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能，可以很方便的实现分页，即时搜索和排序。

    一、简单使用

    怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。

    $(document).ready(function(){
    $('#myTable').DataTable();
});

    开始使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上，可以使用下面这两个文件：

    http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

    clipboard.png

    二、选项

    datatables中大量的选项可以用来定制你的表格展现给用户。

    1. 设置选项(Setting options)

    datatables的配置是通过设置你定义的选项来完成的，如下：

    $('#example').DataTable( {
    paging: false
} );

    通过设置paging选项，禁止表格分页(默认是打开的)

    假设你要在表格里使用滚动，你需要加上scrollY选项：

    $('#example').DataTable( {
    scrollY: 400
} );

    当然你可以组合多个选项来初始化datatables，启动滚动条，禁用分页

    $('#example').DataTable( {
    paging: false,
    scrollY: 400
} );

    如果你有其他需要可以加入更多的选项来配置你的表格，更多datatables选项，请参考

    常用选项(Common options)
    下面列举了一些比较有用的选项:

    ajax - 异步数据源配置
data - javascript数据源配置
serverSide - 开启服务器模式
columns.data - 配置每一列的数据源
scrollX - 水平滚动条
scrollY - 垂直滚动条
默认设置(Setting defaults)

    在实际项目中，可能需要用到多个表格，你使用dom选项把所有的表格设置为相同的布局，这时你可以使用$.fn.dataTable.defaults 对象处理。

    在这个例子中,我们禁用datatable中默认的搜索和排序功能,但当表初始化时启用了排序(重写默认选项)。

    // 默认禁用搜索和排序
$.extend( $.fn.dataTable.defaults, {
    searching: false,
    ordering:  false
} );
 
// 这样初始化，排序将会打开
// 搜索功能仍然是关闭
$('#example').DataTable( {
    ordering: true
} );

    http://datatables.net/manual/...

    三、服务器处理(Server-side processing)

    服务器处理

    是不是发现在处理太多 DOM 数据或者 AJAX 一次性把数据获得后，DataTables 表现的不是很满意？这是肯定的， 因为 DT 需要渲染，创建 tr/td ,所以数据越多，速度就越慢。 为了解决这个问题 DataTables 提供了 服务器模式，把本来客户端所做的事情交给服务器去处理， 比如排序（order）、分页（paging）、过滤（filter）。对于客户端来说这些操作都是比较消耗资源的， 所以打开服务器模式后不用担心这些操作会影响到用户体验。

    当你打开服务器模式的时候，每次绘制表格的时候，DataTables 会给服务器发送一个请求（包括当前分页，排序，搜索参数等等）。DataTables 会向 服务器发送 一些参数 去执行所需要的处理，然后在服务器组装好 相应的数据 返回给 DataTables。

    开启服务器模式需要使用 serverSideOption 和 ajaxOption ajax不定时一讲 选项，进一步的信息，请参考下面的 配置选项。

    1、DT自动请求的参数(Sent parameters)

    当开启了 服务器模式时，DataTables 会发送如下参数到服务器

    clipboard.png
    clipboard.png

    2、服务器需要返回的数据(Returned data)

    一旦 DataTables 发送了请求，上面的参数就会传送给服务器，那么你需要接受到这些参数并做相应的逻辑处理然后按照下面的格式讲组装好的JSON数据返回 （不是每个参数都需要接受处理，根据自己的业务需要）

    clipboard.png
    除了上面的返回参数以外你还可以加入下面的参数，来实现对表格数据的自动绑定

    clipboard.png

    四、小试牛刀

    1.ajax 获取全部数据，显示在本地

    test.html

    <html>
<head>
    <meta charset="utf-8"> 
    <title>测试Datatable-表单插件</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 </table>



</body>
<script>

// 1.本地数据
/*
$(document).ready(function() {
     var data = [
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
        [
            "Garrett Winters",
            "Director",
            "Edinburgh",
            "8422",
            "2011/07/25",
            "$5,300"
        ],
         [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
         [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
         [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
         [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
         [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
         [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
      
    ];
 
    //然后 DataTables 这样初始化：
    $('#example').DataTable( {
        data: data
    } );
} );
*/


// 2、ajax - 异步测试，数组形式

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "api/arrays.txt"
    } );
} );


///3、ajax - 对象形式  https://datatables.net/examples/ajax/objects.html
/*
$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
*/
} );

</script>

</html>

    arrays.txt

    {
  "data": [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],
    [
      "Garrett Winters",
      "Accountant",
      "Tokyo",
      "8422",
      "2011/07/25",
      "$170,750"
    ],
    [
      "Ashton Cox",
      "Junior Technical Author",
      "San Francisco",
      "1562",
      "2009/01/12",
      "$86,000"
    ],
    [
      "Cedric Kelly",
      "Senior Javascript Developer",
      "Edinburgh",
      "6224",
      "2012/03/29",
      "$433,060"
    ],
    [
      "Airi Satou",
      "Accountant",
      "Tokyo",
      "5407",
      "2008/11/28",
      "$162,700"
    ],
    [
      "Brielle Williamson",
      "Integration Specialist",
      "New York",
      "4804",
      "2012/12/02",
      "$372,000"
    ],
    [
      "Herrod Chandler",
      "Sales Assistant",
      "San Francisco",
      "9608",
      "2012/08/06",
      "$137,500"
    ],
    [
      "Rhona Davidson",
      "Integration Specialist",
      "Tokyo",
      "6200",
      "2010/10/14",
      "$327,900"
    ],
    [
      "Colleen Hurst",
      "Javascript Developer",
      "San Francisco",
      "2360",
      "2009/09/15",
      "$205,500"
    ],
    [
      "Sonya Frost",
      "Software Engineer",
      "Edinburgh",
      "1667",
      "2008/12/13",
      "$103,600"
    ],
    [
      "Jena Gaines",
      "Office Manager",
      "London",
      "3814",
      "2008/12/19",
      "$90,560"
    ],
    [
      "Quinn Flynn",
      "Support Lead",
      "Edinburgh",
      "9497",
      "2013/03/03",
      "$342,000"
    ],
    [
      "Charde Marshall",
      "Regional Director",
      "San Francisco",
      "6741",
      "2008/10/16",
      "$470,600"
    ],
    [
      "Haley Kennedy",
      "Senior Marketing Designer",
      "London",
      "3597",
      "2012/12/18",
      "$313,500"
    ],
    [
      "Tatyana Fitzpatrick",
      "Regional Director",
      "London",
      "1965",
      "2010/03/17",
      "$385,750"
    ],
    [
      "Michael Silva",
      "Marketing Designer",
      "London",
      "1581",
      "2012/11/27",
      "$198,500"
    ],
    [
      "Paul Byrd",
      "Chief Financial Officer (CFO)",
      "New York",
      "3059",
      "2010/06/09",
      "$725,000"
    ],
    [
      "Gloria Little",
      "Systems Administrator",
      "New York",
      "1721",
      "2009/04/10",
      "$237,500"
    ],
    [
      "Bradley Greer",
      "Software Engineer",
      "London",
      "2558",
      "2012/10/13",
      "$132,000"
    ],
    [
      "Dai Rios",
      "Personnel Lead",
      "Edinburgh",
      "2290",
      "2012/09/26",
      "$217,500"
    ],
    [
      "Jenette Caldwell",
      "Development Lead",
      "New York",
      "1937",
      "2011/09/03",
      "$345,000"
    ],
    [
      "Yuri Berry",
      "Chief Marketing Officer (CMO)",
      "New York",
      "6154",
      "2009/06/25",
      "$675,000"
    ],
    [
      "Caesar Vance",
      "Pre-Sales Support",
      "New York",
      "8330",
      "2011/12/12",
      "$106,450"
    ],
    [
      "Doris Wilder",
      "Sales Assistant",
      "Sidney",
      "3023",
      "2010/09/20",
      "$85,600"
    ],
    [
      "Angelica Ramos",
      "Chief Executive Officer (CEO)",
      "London",
      "5797",
      "2009/10/09",
      "$1,200,000"
    ],
    [
      "Gavin Joyce",
      "Developer",
      "Edinburgh",
      "8822",
      "2010/12/22",
      "$92,575"
    ],
    [
      "Jennifer Chang",
      "Regional Director",
      "Singapore",
      "9239",
      "2010/11/14",
      "$357,650"
    ],
    [
      "Brenden Wagner",
      "Software Engineer",
      "San Francisco",
      "1314",
      "2011/06/07",
      "$206,850"
    ],
    [
      "Fiona Green",
      "Chief Operating Officer (COO)",
      "San Francisco",
      "2947",
      "2010/03/11",
      "$850,000"
    ],
    [
      "Shou Itou",
      "Regional Marketing",
      "Tokyo",
      "8899",
      "2011/08/14",
      "$163,000"
    ],
    [
      "Michelle House",
      "Integration Specialist",
      "Sidney",
      "2769",
      "2011/06/02",
      "$95,400"
    ],
    [
      "Suki Burks",
      "Developer",
      "London",
      "6832",
      "2009/10/22",
      "$114,500"
    ],
    [
      "Prescott Bartlett",
      "Technical Author",
      "London",
      "3606",
      "2011/05/07",
      "$145,000"
    ],
    [
      "Gavin Cortez",
      "Team Leader",
      "San Francisco",
      "2860",
      "2008/10/26",
      "$235,500"
    ],
    [
      "Martena Mccray",
      "Post-Sales support",
      "Edinburgh",
      "8240",
      "2011/03/09",
      "$324,050"
    ],
    [
      "Unity Butler",
      "Marketing Designer",
      "San Francisco",
      "5384",
      "2009/12/09",
      "$85,675"
    ],
    [
      "Howard Hatfield",
      "Office Manager",
      "San Francisco",
      "7031",
      "2008/12/16",
      "$164,500"
    ],
    [
      "Hope Fuentes",
      "Secretary",
      "San Francisco",
      "6318",
      "2010/02/12",
      "$109,850"
    ],
    [
      "Vivian Harrell",
      "Financial Controller",
      "San Francisco",
      "9422",
      "2009/02/14",
      "$452,500"
    ],
    [
      "Timothy Mooney",
      "Office Manager",
      "London",
      "7580",
      "2008/12/11",
      "$136,200"
    ],
    [
      "Jackson Bradshaw",
      "Director",
      "New York",
      "1042",
      "2008/09/26",
      "$645,750"
    ],
    [
      "Olivia Liang",
      "Support Engineer",
      "Singapore",
      "2120",
      "2011/02/03",
      "$234,500"
    ],
    [
      "Bruno Nash",
      "Software Engineer",
      "London",
      "6222",
      "2011/05/03",
      "$163,500"
    ],
    [
      "Sakura Yamamoto",
      "Support Engineer",
      "Tokyo",
      "9383",
      "2009/08/19",
      "$139,575"
    ],
    [
      "Thor Walton",
      "Developer",
      "New York",
      "8327",
      "2013/08/11",
      "$98,540"
    ],
    [
      "Finn Camacho",
      "Support Engineer",
      "San Francisco",
      "2927",
      "2009/07/07",
      "$87,500"
    ],
    [
      "Serge Baldwin",
      "Data Coordinator",
      "Singapore",
      "8352",
      "2012/04/09",
      "$138,575"
    ],
    [
      "Zenaida Frank",
      "Software Engineer",
      "New York",
      "7439",
      "2010/01/04",
      "$125,250"
    ],
    [
      "Zorita Serrano",
      "Software Engineer",
      "San Francisco",
      "4389",
      "2012/06/01",
      "$115,000"
    ],
    [
      "Jennifer Acosta",
      "Junior Javascript Developer",
      "Edinburgh",
      "3431",
      "2013/02/01",
      "$75,650"
    ],
    [
      "Cara Stevens",
      "Sales Assistant",
      "New York",
      "3990",
      "2011/12/06",
      "$145,600"
    ],
    [
      "Hermione Butler",
      "Regional Director",
      "London",
      "1016",
      "2011/03/21",
      "$356,250"
    ],
    [
      "Lael Greer",
      "Systems Administrator",
      "London",
      "6733",
      "2009/02/27",
      "$103,500"
    ],
    [
      "Jonas Alexander",
      "Developer",
      "San Francisco",
      "8196",
      "2010/07/14",
      "$86,500"
    ],
    [
      "Shad Decker",
      "Regional Director",
      "Edinburgh",
      "6373",
      "2008/11/13",
      "$183,000"
    ],
    [
      "Michael Bruce",
      "Javascript Developer",
      "Singapore",
      "5384",
      "2011/06/27",
      "$183,000"
    ],
    [
      "Donna Snider",
      "Customer Support",
      "New York",
      "4226",
      "2011/01/25",
      "$112,000"
    ]
  ]
}

    注意，要和数据对象区分开：

    {
    "data": [
        {
            "user_name": "刘德华",
            "cn": "andyLau",
            "uid": "546L6LbF",
            "telephonenumber": "15820226337",
            "account_source": "大湾区",
            "businesscategory": "娱乐总监",
            "add_time": null,
            "sort": 1
        },
        {
            "user_name": "周润发",
            "cn": "Jaychou",
            "uid": "5p2O5Zu95qCL",
            "telephonenumber": null,
            "account_source": null,
            "businesscategory": null,
            "add_time": null,
            "sort": 2
        },
     ]
}

    2.服务器处理

    $(function () {
    // $("#example1").DataTable();
    $('#sso_table').DataTable({
      //开启服务器模式
      serverSide: true,
      ajax: '/data-source',
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });

    test.html 页面

    <html>
<head>
    <meta charset="utf-8"> 
    <title>测试Datatable-表单插件-服务器处理</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 </table>



</body>
<script>

$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "./data-source/index.php"
    } );
} );

</script>
</body>
</html>

    服务器端：index.php

    <?php

     
//获取Datatables发送的参数 必要
$draw = $_GET['draw'];//这个值作者会直接返回给前台
 
//排序
// $order_column = $_GET['order']['0']['column'];//那一列排序，从0开始
// $order_dir = $_GET['order']['0']['dir'];//ase desc 升序或者降序

//搜索
// $search = $_GET['search']['value'];//获取前台传过来的过滤条件
 
//分页
$start    = $_GET['start'];//从多少开始
$length   = $_GET['length'];//数据长度
$limitSql = '';

// $length = 10;
$var = $start . "-". $length;
file_put_contents('../data.txt', $var, FILE_APPEND);

$recordsTotal = 100;
$recordsFiltered = 100;

$infos = array();
for($i=0; $i < $length; $i++)
{
    $tmp = array(
      getRandChar(3),
      getRandChar(6),
      '广州',
      '珠江新城',
      date("Y-m-d H:i:s"),
      '20000',
        );

    
  $infos[] = $tmp;

}

/*
 * Output 包含的是必要的
 */
echo json_encode(array(
    "draw" => intval($draw),
    "recordsTotal" => intval($recordsTotal),
    "recordsFiltered" => intval($recordsFiltered),
    "data" => $infos
),JSON_UNESCAPED_UNICODE);





// 生成随机字符串
 function getRandChar($length)
 {
   $str = null;
   $strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
   $max = strlen($strPol)-1;

   for($i=0;$i<$length;$i++){
    $str.=$strPol[rand(0,$max)];//rand($min,$max)生成介于min和max两个数之间的一个随机整数
   }

   return $str;
  }

    相关文章：
    Datatables中文社区
    Datatables.net官网

    jquerydatatablesjavascript
    Corwien
    6.3k 声望1.6k 粉丝

    为者常成，行者常至。

    « 上一篇
    PHP安全的URL字符串base64编码和解码
    下一篇 »
    HTTP_HOST 和 SERVER_NAME 的区别

    引用和评论

    推荐阅读
    头像
    CDH6 离线安装

    Corwien赞 2阅读 4.1k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新