Datatables表格插件學習

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

Datatables表格插件學習

二、選項

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 會發送如下參數到伺服器

Datatables表格插件學習

2、伺服器需要傳回的資料(Returned data)

一旦 DataTables 發送了請求，上面的參數就會傳送給伺服器，那麼你需要接受到這些參數并做相應的邏輯處理然後按照下面的格式講組裝好的JSON資料傳回（不是每個參數都需要接受處理，根據自己的業務需要）

Datatables表格插件學習

除了上面的傳回參數以外你還可以加入下面的參數，來實作對表格資料的自動綁定

Datatables表格插件學習

四、小試牛刀

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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <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官網

Datatables表格插件學習

一、簡單使用

二、選項

1. 設定選項(Setting options)

三、伺服器處理(Server-side processing)

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

2、伺服器需要傳回的資料(Returned data)

四、小試牛刀

1.ajax 擷取全部資料，顯示在本地

2.伺服器處理

繼續閱讀

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

Cloud Studio初體驗

NOSQL安全攻擊

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

php——水印

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題