jQuery插件 dataTable Ajax分页功能实现

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