To do a good job, he must sharpen his tools

This series of articles introduces the front-end plug-ins that I used in the development process of operation and maintenance system. The first two articles respectively introduced the use of Duallistbox plug-in and Select2 plug-in. This one started the conquest of Databases

Databases is a jquery-based table plug-in, which is mainly used to optimize tables. It supports table pagination, search, sorting, table display, asynchronous loading and many other useful functions

Project address: datatables.net/

The basic use

The JS and CSS files you need to use are located in the media directory under the project code. You need to put the corresponding files in this directory into your project

  1. To introduce CSS/JS files, we need to introduce Jquery first because Datatables are based on Jquery. Here we directly introduce the CDN address
<! Jquery --> <script SRC ="https://code.jquery.com/jquery-3.2.1.min.js"></script> <! <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
Copy the code
  1. Initialize the Datatables
<table id="myTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ops Coffee</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>18</td>
            <td>2011/04/25</td>
            <td>The $320,800</td> </tr> <! Donna Snider</ TD > < TD >Customer Support</ TD > < TD >New York</ TD > < TD >27</ TD > < TD >2011/01/25</ TD >  <td>The $112,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

$(document).ready( function() {$('#myTable').DataTable();
});
Copy the code
  1. Complete the above two steps to see the page look like this

Function on/off

In the default interface, in addition to the original table, additional contents such as search, column sorting, pagination, and information display are added to the table. If one or more contents are not needed, you can hide them by setting the following Settings

$('#myTable').DataTable({
    "paging": false."ordering": false."info": false."searching": false});Copy the code

Paging: Controls whether paging is enabled. This function is enabled by default. After paging is enabled, the number of rows on a page in the upper left corner of the table and paging in the lower right corner of the table will be displayed

This command is enabled by default. The first column is ordered by default

Info: Controls whether to display the information in the lower left corner of the table. This function is enabled by default

Searching: Controls whether to display the searchin the upper right corner of the table

Sorting configuration

A single order

You can use order to set the columns of the initial sort and the direction of the sort

"order": [[3,"desc" ]],
Copy the code

Column numbers start at 0 by default, and the 3 here actually corresponds to column 4. Note that all of the following uses column numbers start at 0

Note: After stateSave is enabled, columnDefs will become invalid. Do not set both parameters at the same time

Multi-column sorting

Order can also be configured to sort multiple columns at the same time

"order": [[3,"desc"], [0,"desc" ]],
Copy the code

If the three columns are the same, the sorting is performed by column 0

Hidden columns

ColumnDefs can be used to set column properties

"columnDefs": [{"targets": [2]."visible": false."searchable": false
    },
    {
        "targets": [3]."visible": false,}]Copy the code

Targets: specifies a column

Visible: Indicates whether it can be displayed

Searchable: Searchable or not. This column can still be searched if visable is set to false but searchable is not set

Note: After stateSave is enabled, columnDefs will become invalid. Do not set both parameters at the same time

Language configuration

The default prompts are in English and can be set to Chinese by using Language

"language": {
    "decimal": ""."emptyTable": Data in table is empty."info": "Display results of _START_ to _END_, total _TOTAL_ entries"."infoEmpty": "Display 0 to 0 results, total 0"."infoFiltered": "(filtered by _MAX_ result)"."InfoPostFix": ""."thousands": ","."lengthMenu": "Display _MENU_ results"."loadingRecords": "Loading..."."processing": "Under treatment..."."search": "Search."."zeroRecords": "No match."."Paginate": {
        "sFirst": "Home page"."sPrevious": "Previous page"."sNext": "Next page"."sLast": "Back"
    },
    "Aria": {
        "sSortAscending": ": Sort this column in ascending order"."sSortDescending": ": Sort this column in descending order"}}Copy the code

State to keep

StateSave uses HTML5’s localStorage and sessionStorageAPIs to store state data locally in the browser, which will load automatically when you refresh the page. These states can be your sort information, current page number, entered search data, and so on

"stateSave": true.Copy the code

Page type

You can set the page type by using pagingType

"pagingType": "simple_numbers".Copy the code

Simple_numbers: The type displays the previous page, next page button, and page number, which is also the default pagination type

The other types of paging are as follows:

Numbers: Displays only page numbers

Simple: Displays only the previous and next buttons

Full: displays only the home, back, previous, and next buttons

Full_numbers: displays the front page, back page, previous page, next page button and page number

First_last_numbers: Displays the home page, end page button, and page number

Scroll to the configuration

If the width and height of the table exceed the specified size, perform the following operations to add scroll bars

"scrollX": "true"."scrollY": "200px"."scrollCollapse": true.Copy the code

ScrollX: Allows horizontal scroll bars

ScrollY: Sets the height of the vertical body. The vertical scroll bar appears when the height is exceeded

ScrollCollapse: Set to automatically shrink the body height when the data occupation height is smaller than the height set by scrollY

Complete Demo

For your convenience, I have written a complete demo, which you can view online or download the code to apply to your own projects

Online Demo address: demo.ops-coffee.cn/datatables/

Github source address: github.com/ops-coffee/…

Other instructions

Because Datatables are so varied and widely used, more advanced uses such as asynchronous data loading, adding edit and delete buttons, and adjusting the display of page functions will be explained in the next article

Related articles recommended reading:

  • Front-end plug-in for Select2 use
  • Bootstrap Dual Listbox for the front-end plug-in