DataTables示例 对集结号游戏进行流水处理以减少Ajax分页调用

服务器端处理在您的服务器上可能非常困难,因为它会对服务器进行Ajax调用 对于每个提出的提款要求。在具有大量页面浏览量的网站上,您可能 最终用自己的应用程序对自己的服务器进行DDoS!

此示例显示了一种减少访问服务器的Ajax调用数量的技术。 缓存的集结号游戏多于每次绘制所需的集结号游戏。这是通过拦截Ajax调用和路由来完成的 通过集结号游戏缓存控制;使用缓存中的集结号游戏(如果有),并制作Ajax 如果没有要求。 阿贾克斯 请求的这种拦截是通过给 ajaxDT 选项功能。该功能 然后执行决定是否需要另一个Ajax调用或是否可以从缓存中获取集结号游戏的逻辑 used.

请记住,此缓存仅用于分页;必须清除其他管道 使用服务器端处理时,自完整集结号游戏集以来的排序和搜索等交互, 仅在服务器上可用。

名称 位置 办公室 扩展 开始日期 薪水
名称 位置 办公室 扩展 开始日期 薪水

下面显示的Javascript用于初始化此显示的表 example:

// // Pipelining function for 集结号游戏表。 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' // 阿贾克斯 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 集结号游戏表。 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 阿贾克斯 // 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: 'scripts/server_processing.php', pages: 5 // number of pages to cache } ) } ); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载集结号游戏。下面显示了已加载的最新集结号游戏。这个集结号游戏 将在加载任何其他集结号游戏时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.