Datatables表格插件學習

時間  2019-12-05
標籤 datatables 表格 插件 學習 简体版
原文   原文鏈接

Datatables 是一款jquery表格插件。它是一個高度靈活的工具，能夠將任何HTML表格添加高級的交互功能，能夠很方便的實現分頁，即時搜索和排序。javascript

1、簡單使用

怎樣簡單地使用DataTables？使用下方簡單的幾行代碼，一個方法初始化table。php

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

開始使用DataTables很簡單，只須要引入兩個文件， 一個css樣式文件和DataTables自己的腳本文件。在DataTables CDN上，可使用下面這兩個文件：css

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

2、選項

datatables中大量的選項能夠用來定製你的表格展示給用戶。html

1. 設置選項(Setting options)

datatables的配置是經過設置你定義的選項來完成的，以下：java

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

經過設置paging選項，禁止表格分頁(默認是打開的)jquery

假設你要在表格裏使用滾動，你須要加上scrollY選項：ios

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

固然你能夠組合多個選項來初始化datatables，啓動滾動條，禁用分頁ajax

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

若是你有其餘須要能夠加入更多的選項來配置你的表格，更多datatables選項，請參考json

經常使用選項(Common options)
下面列舉了一些比較有用的選項:bootstrap

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/...

3、服務器處理(Server-side processing)

服務器處理

是否是發如今處理太多 DOM 數據或者 AJAX 一次性把數據得到後，DataTables 表現的不是很滿意？這是確定的， 由於 DT 須要渲染，建立 tr/td ,因此數據越多，速度就越慢。 爲了解決這個問題 DataTables 提供了 服務器模式，把原本客戶端所作的事情交給服務器去處理， 好比排序（order）、分頁（paging）、過濾（filter）。對於客戶端來講這些操做都是比較消耗資源的， 因此打開服務器模式後不用擔憂這些操做會影響到用戶體驗。

當你打開服務器模式的時候，每次繪製表格的時候，DataTables 會給服務器發送一個請求（包括當前分頁，排序，搜索參數等等）。DataTables 會向 服務器發送 一些參數 去執行所須要的處理，而後在服務器組裝好 相應的數據 返回給 DataTables。

開啓服務器模式須要使用 serverSideOption 和 ajaxOption ajax不定時一講 選項，進一步的信息，請參考下面的 配置選項。

一、DT自動請求的參數(Sent parameters)

當開啓了 服務器模式時，DataTables 會發送以下參數到服務器

clipboard.png
clipboard.png

二、服務器須要返回的數據(Returned data)

一旦 DataTables 發送了請求，上面的參數就會傳送給服務器，那麼你須要接受到這些參數並作相應的邏輯處理而後按照下面的格式講組裝好的JSON數據返回 （不是每一個參數都須要接受處理，根據本身的業務須要）

clipboard.png
除了上面的返回參數之外你還能夠加入下面的參數，來實現對錶格數據的自動綁定

clipboard.png

4、小試牛刀

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
    } );
} );
*/


// 二、ajax - 異步測試，數組形式

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


///三、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官網

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程