JQuery dataTable Ajax paging implementation, jquerydatatable

JQuery dataTable Ajax paging implementation, jquerydatatable

The dataTables plug-in of jQuery is an excellent table plug-in that provides functions such as table sorting, browser paging, server paging, filtering, and formatting. You need to go to the dataTables website to http://www.datatables.net/download this script library.

During webpage development, we may read data from the background to create tables. When the data size is too large, the table creation time may be too long, so you need to implement the Ajax paging function. The Code is as follows:

HTML:

<table id="example" class="display" width="100%" cellspacing="0">        <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>

JS:

/// Pipelining function for DataTables. to be used to the 'ajax 'option of Ables // $. fn. dataTable. pipeline = function (opts) {// Configuration options var conf = $. extend ({pages: 5, // number of pages to cache url: '', // script url data: null, // function or object with parameters to send to the server // matching how 'ajax. data 'Works in DataTables method: 'get' // Ajax HTTP method}, o Pts); // Private variables for storing the cache var cacheLower =-1; var cacheUpper = null; var cachelstrequest = null; var cacheLastJson = null; return function (request, drawCallback, settings) {var ajax = false; var requestStart = request. start; var drawStart = request. start; var requestLength = request. length; var requestEnd = requestStart + requestLength; if (settings. clearCache ){// API requested that the cache be cleared ajax = true; settings. export ache = false;} else if (cacheLower <0 | requestStart <cacheLower | requestEnd> cacheUpper) {// outside cached data-need to make a request ajax = true ;} else if (JSON. stringify (request. order )! = JSON. stringify (cachelstrequest. order) | JSON. stringify (request. columns )! = JSON. stringify (cachelstrequest. columns) | JSON. stringify (request. search )! = JSON. stringify (cachelstrequest. search) {// properties changed (ordering, columns, searching) ajax = true;} // Store the request for checking next time around cachelstrequest = $. extend (true, {}, request); if (ajax) {// Need data from the server if (requestStart <cacheLower) {requestStart = requestStart-(requestLength * (conf. pages-1); if (requestStart <0) {requestStart = 0;} CacheLower = requestStart; cacheUpper = requestStart + (requestLength * conf. pages); request. start = requestStart; request. length = requestLength * conf. pages; // Provide the same 'data' options as DataTables. if ($. isFunction (conf. data) {// As a function it is executed with the data object as an arg // for manipulation. if an object is returned, it is used as the // data object to submi T var d = conf. data (request); if (d) {$. extend (request, d) ;}} else if ($. isPlainObject (conf. data) {// As an object, the data given extends the default $. extend (request, conf. data);} settings. jqXHR = $. ajax ({"type": conf. method, "url": conf. url, "data": request, "dataType": "json", "cache": false, "success": function (json) {cacheLastJson = $. extend (true, {}, json); if (cach ELower! = DrawStart) {json. data. splice (0, drawStart-cacheLower);} json. data. splice (requestLength, json. data. length); drawCallback (json) ;}}) ;}else {json =$. extend (true, {}, cacheLastJson); json. draw = request. draw; // Update the echo for each response json. data. splice (0, requestStart-cacheLower); json. data. splice (requestLength, json. data. length); drawCallback (json) ;}}; // Register an API method that will empty the pipelined data, forcing an Ajax // fetch on the next draw (I. e. 'table. clearPipeline (). draw () ') $. fn. dataTable. api. register ('clearpipeline () ', function () {return this. iterator ('table', function (settings) {settings. export ache = true ;}); // DataTables initialisation // $ (document ). ready (function () {$ ('# example '). dataTable ({"processing": true, "serverSide": true, "ajax": $. fn. dataTable. pipeline ({url: '', // processing URL in the background, for example," scripts/server_processing.php "pages: 5 // pre-read 5 pages })});});

Response data:

{  "draw": 2,  "recordsTotal": 57,  "recordsFiltered": 57,  "data": [    [      "Tiger",      "Nixon",      "System Architect",      "Edinburgh",      "25th Apr 11",      "$320,800"    ],    [      "Timothy",      "Mooney",      "Office Manager",      "London",      "11th Dec 08",      "$136,200"    ],    [      "Unity",      "Butler",      "Marketing Designer",      "San Francisco",      "9th Dec 09",      "$85,675"    ],    [      "Vivian",      "Harrell",      "Financial Controller",      "San Francisco",      "14th Feb 09",      "$452,500"    ],    [      "Yuri",      "Berry",      "Chief Marketing Officer (CMO)",      "New York",      "25th Jun 09",      "$675,000"    ],    [      "Zenaida",      "Frank",      "Software Engineer",      "New York",      "4th Jan 10",      "$125,250"    ],    [      "Zorita",      "Serrano",      "Software Engineer",      "San Francisco",      "1st Jun 12",      "$115,000"    ]  ]}