DataTables table plug-in learning

Time:2020-5-23

DataTables is aJQuery table plug-in。 It is a highly flexible tool, which can add advanced interactive functions to any HTML table, and can easily realize paging, instant search and sorting.

1、 Easy to use

How to use DataTables simply? Use the following simple lines of code, a method to initialize table.

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

It’s easy to start using DataTables. You only need to import two files, a CSS style file and a script file of DataTables itself. On DataTables CDN, you can use the following two files:

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 table plug-in learning

2、 Options

datatablesA large number of options can be used to customize your form presentation to users.

1. Setting options

The configuration of DataTables is completed by setting the options you defined, as follows:

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

Disable table paging by setting the paging option (it is on by default)

If you want to use scrolling in a table, you need to add the scrolly option:

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

Of course, you can combine multiple options to initialize DataTables, start scrollbars, and disable paging

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

If you have other needs, you can add more options to configure your tables. For more DataTables options, please refer to

Common options
Here are some useful options:

Ajax - asynchronous data source configuration
Data - Javascript data source configuration
Serverside - turn on server mode
columns.data  -Configure data sources for each column
Scrollx - horizontal scroll bar
Scrolly - vertical scroll bar
Setting defaults

In a real project, you may need to use multiple tables. You can use the DOM option to set all the tables to the same layout$.fn.dataTable.defaultsObject handling.

In this example, we disable the default search and sorting functions in datatable, but enable sorting when the table is initialized (override the default options).

//Search and sorting are disabled by default
$.extend( $.fn.dataTable.defaults, {
    searching: false,
    ordering:  false
} );
 
//In this way, the sorting will be turned on
//Search is still off
$('#example').DataTable( {
    ordering: true
} );

http://datatables.net/manual/…

3、 Server side processing

Server processing

Is it found that after processing too much DOM data or Ajax obtains the data at one time, the performance of DataTables is not very satisfactory? This is for sure, because DT needs to render and create TR / TD, so the more data, the slower the speed. In order to solve this problem, DataTables provides a server mode, which refers to the server to handle what the client has done, such as order, paging and filter. For the client, these operations are relatively resource consuming, so you don’t need to worry about the impact of these operations on the user experience after opening the server mode.

When you turn on server mode, each time you draw a table, DataTables will send a request to the server (including current paging, sorting, search parameters, etc.). DataTables will send some parameters to the server to perform the required processing, and then assemble the corresponding data in the server to return to DataTables.

To enable the server mode, you need to use serversideoption and ajaxoption Ajax to talk about options from time to time. For further information, please refer to the following configuration options.

1. DT auto request parameters

When the server mode is turned on, DataTables will send the following parameters to the server

DataTables table plug-in learning
DataTables table plug-in learning

2. Data that the server needs to return (returned data)

Once the DataTables send the request, the above parameters will be sent to the server. Then you need to accept these parameters and do the corresponding logical processing, and then return the assembled JSON data according to the following format (not every parameter needs to be processed according to your own business needs)

DataTables table plug-in learning
In addition to the above return parameters, you can also add the following parameters to realize the automatic binding of table data

DataTables table plug-in learning

4、 Small test ox knife

1. Ajax obtains all data and displays it locally

test.html

<html>
<head>
    <meta charset="utf-8"> 
    < title > test datatable form plug-in < / 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></script>
    <script></script>
    <script></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. Local data
/*
$(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"
        ],
      
    ];
 
    //Then the DataTables are initialized as follows:
    $('#example').DataTable( {
        data: data
    } );
} );
*/


//2. Ajax - asynchronous test, array form

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


///3. Ajax - object form 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"
    ]
  ]
}

Note that it should be distinguished from data objects:

{
    "data": [
        {
            "user_ Name ":" Liu Dehua ",
            "cn": "andyLau",
            "uid": "546L6LbF",
            "telephonenumber": "15820226337",
            "account_ Source ":" Dawan district ",
            "Business category": "entertainment director",
            "add_time": null,
            "sort": 1
        },
        {
            "user_ Name ":" Chow Yun Fat ",
            "cn": "Jaychou",
            "uid": "5p2O5Zu95qCL",
            "telephonenumber": null,
            "account_source": null,
            "businesscategory": null,
            "add_time": null,
            "sort": 2
        },
     ]
}

2. Server processing

$(function () {
    // $("#example1").DataTable();
    $('#sso_table').DataTable({
      //Turn on server mode
      serverSide: true,
      ajax: '/data-source',
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });

test.html page

<html>
<head>
    <meta charset="utf-8"> 
    < title > test datatable - form plug-in - server processing < / 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></script>
    <script></script>
    <script></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>

Server side: index.php

<?php

     
//It is necessary to get the parameters sent by DataTables
$draw = $_ Get ['draw ']; // the value author will directly return to the foreground
 
//Sort
// $order_ column = $_ Get ['order '] ['0'] ['column ']; // sort the column, starting from 0
// $order_ dir = $_ Get ['order '] ['0'] ['dir ']; // ASE desc ascending or descending

//Search
// $search = $_ Get ['search '] ['value']; // get the filter conditions from the foreground
 
//Pagination
$start    = $_ Get ['Start ']; // how many starts
$length   = $_ Get ['length ']; // data 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),
      'Guangzhou',
      'Pearl River new town',
      date("Y-m-d H:i:s"),
      '20000',
        );

    
  $infos[] = $tmp;

}

/*
 *Output contains the necessary
 */
echo json_encode(array(
    "draw" => intval($draw),
    "recordsTotal" => intval($recordsTotal),
    "recordsFiltered" => intval($recordsFiltered),
    "data" => $infos
),JSON_UNESCAPED_UNICODE);





//Generate random string
 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) generates a random integer between min and Max
   }

   return $str;
  }

Related articles:
DataTables Chinese community
Datatables.net Official website

Recommended Today

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]