Summary of DataTables
After using DataTables for some time, it is a very powerful table plug-in. Keep updating.
Official website: https://datatables.net/
introduce
A simple demo
<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.js"></script> </head> <body> <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>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> // .... </tbody> </table> <script> $(document).ready(function () { $('#myTable').DataTable(); }); </script> </body>
DataTables provide a variety of skins, which are introduced as needed.
Basic configuration
Shows common settings
<script> $('#myTable').DataTable({ "language": { "lengthMenu": "display _MENU_ strip", "zeroRecords": "no data", "paginate": { "first": "First page", "last": "last page", "next": "next page", "previous": "previous page" } }, 'dom': '<"top">rt<"bottom"p><"clear">', // layout 'processing': true, // Show load reminders 'serverSide': true, // Server paging 'paging': true, // Paging "ordering": false, // Sort or not "info": false, // Show show info 'searching': true, // Use Search api or not 'searchDelay': 350, // Search delay 'ajax': { 'url': '/api/news/page', 'type': 'post' }, // Request path and method "columns": [ // Bound column // Unbound value { "data": null }, // Bind values and customize rendering { "data": "image", render: (data, type, full) => { return '<img src="' + getImageUrl(data) + '" width=150 />'; } }, { "data": "title" }, { "data": "intro" }, { "data": "status", render: (data, type, full) => { return publishStatus(data); } }, { "data": "createDate", render: (data, type, full) => { return dateFormat(data) } }, { "data": "publishDate", render: (data, type, full) => { return dateFormat(data) } }, { "data": "updateDate", render: (data, type, full) => { return dateFormat(data) } }, // Last column operation column - bound to id, easy to operate { "data": "id", render: (data, type, full) => { return createButton(data); } }, ], // Callback function after request "fnDrawCallback": function (oSettings) { // Get response var json = $.parseJSON(oSettings.jqXHR.responseText); // Set sequence number this.api().column(0).nodes().each(function (cell, i) { cell.innerHTML = i + 1; }); } }); function dateFormat(date) { if (!$.isEmptyObject(date) || date == '' || date == null) { return 'empty'; } return moment(date).format('YYYY-MM-DD HH:mm'); } function createButton(id) { return `<div> <button type="button" class="btn btn-success btn-sm" onclick="publishById(` + id + `)">release</button> <button type="button" class="btn btn-info btn-sm" onclick="editById(` + id + `)">edit</button> <button type="button" class="btn btn-danger btn-sm" onclick="deleteById(` + id + `)">delete</button> </div>` }; </script>
Server paging
The main data passed by the front end: draw, start, length
- draw request times
- Where to start? Note that this is not a page number
- Length one page length
Page numbers should be calculated by yourself
json format returned by the server
{ "draw": 1, "recordsTotal": 3, "recordsFiltered": 3, "data": [ { "id": 1, "title": "xxxxxxxx", "content": "yyyyyyy" } // .... ] }
search
The search of datatables is very powerful, but it often needs to be customized.
Search must be set to use the Search API, instead of the search filter of datatables, which can be hidden by setting the dom. Call the Search API manually
summary
The function is very powerful, there are very detailed documents on the official website, and there are also very powerful plug-ins.