jQuery外掛程式 dataTable Ajax分頁功能實現，jquerydatatable

jQuery外掛程式 dataTable Ajax分頁功能實現，jquerydatatable

jQuery 的外掛程式 dataTables 是一個優秀的表格外掛程式，提供了針對錶格的排序、瀏覽器分頁、伺服器分頁、篩選、格式化等功能。需要可以到 dataTables 的網站 http://www.datatables.net/ 下載這個指令碼庫。

在網頁開發過程中，我們可能會從後台讀入資料建表。當資料過大時，可能導致建表時間過長，於是就需要實現Ajax分頁功能，代碼如下：

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 DataTables//$.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    }, opts );     // Private variables for storing the cache    var cacheLower = -1;    var cacheUpper = null;    var cacheLastRequest = 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.clearCache = 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( cacheLastRequest.order ) ||                  JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||                  JSON.stringify( request.search )  !== JSON.stringify( cacheLastRequest.search )        ) {            // properties changed (ordering, columns, searching)            ajax = true;        }                 // Store the request for checking next time around        cacheLastRequest = $.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 submit                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 ( cacheLower != 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.clearCache = true;    } );} );  //// DataTables initialisation//$(document).ready(function() {    $('#example').dataTable( {        "processing": true,        "serverSide": true,        "ajax": $.fn.dataTable.pipeline( {            url: '',//幕後處理URL，如：“scripts/server_processing.php”            pages: 5 // 預讀5頁        } )    } );} );

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"    ]  ]}