├── LICENSE ├── README.md └── js ├── dataTables.pageLoadMore.js └── dataTables.pageLoadMore.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Gyrocode LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery DataTables PageLoadMore 2 | ============================== 3 | 4 | PageLoadMore is a plug-in for the jQuery DataTables that allows to load more content with "Load More" button. 5 | 6 | More information and examples are available at 7 | [gyrocode.com/articles/jquery-datatables-load-more-button](https://www.gyrocode.com/articles/jquery-datatables-load-more-button/). 8 | 9 | 10 | Copyright 11 | --------- 12 | 13 | Gyrocode LLC, [gyrocode.com](https://www.gyrocode.com) 14 | 15 | 16 | License 17 | ------- 18 | 19 | MIT License, [opensource.org/licenses/MIT](http://www.opensource.org/licenses/MIT) 20 | -------------------------------------------------------------------------------- /js/dataTables.pageLoadMore.js: -------------------------------------------------------------------------------- 1 | /*! dataTables.pageLoadMore.js 1.0.2 2 | * Copyright (c) Gyrocode LLC (www.gyrocode.com) 3 | * License: MIT License 4 | */ 5 | /** 6 | * @summary Allows to load more content with "Load More" button 7 | * @version 1.0.2 8 | * @file dataTables.pageLoadMore.js 9 | * @author [Gyrocode LLC](http://www.gyrocode.com/articles/jquery-datatables-pagination-with-load-more-button/) 10 | * @contact https://www.gyrocode.com/contacts/ 11 | * @copyright Copyright (c) Gyrocode LLC 12 | * @license MIT License 13 | */ 14 | 15 | (function($) { 16 | 17 | // 18 | // Loads only portion of the data 19 | // 20 | $.fn.dataTable.pageLoadMore = function(opts){ 21 | // Configuration options 22 | var conf = $.extend({ 23 | url: '', // script url 24 | data: null, // function or object with parameters to send to the server 25 | // matching how `ajax.data` works in DataTables 26 | method: 'GET' // Ajax HTTP method 27 | }, opts); 28 | 29 | return function (request, drawCallback, settings){ 30 | if(!settings.hasOwnProperty('pageLoadMore')){ 31 | var api = new $.fn.dataTable.Api(settings); 32 | var info = api.page.info(); 33 | 34 | settings.pageLoadMore = { 35 | pageLength: info.length, 36 | cacheLastRequest: null, 37 | cacheLastJson: null 38 | }; 39 | } 40 | 41 | var pageResetMore = false; 42 | 43 | if(settings.pageLoadMore.cacheLastRequest){ 44 | if( JSON.stringify(request.order) !== JSON.stringify(settings.pageLoadMore.cacheLastRequest.order) || 45 | JSON.stringify(request.columns) !== JSON.stringify(settings.pageLoadMore.cacheLastRequest.columns) || 46 | JSON.stringify(request.search) !== JSON.stringify(settings.pageLoadMore.cacheLastRequest.search) 47 | ){ 48 | pageResetMore = true; 49 | } 50 | } 51 | 52 | // Store the request for checking next time around 53 | settings.pageLoadMore.cacheLastRequest = $.extend(true, {}, request); 54 | 55 | if(pageResetMore){ 56 | settings.pageLoadMore.cacheLastJson = null; 57 | request.length = settings.pageLoadMore.pageLength; 58 | } 59 | 60 | request.start = request.length - settings.pageLoadMore.pageLength; 61 | request.length = settings.pageLoadMore.pageLength; 62 | 63 | 64 | // Provide the same `data` options as DataTables. 65 | if($.isFunction (conf.data)){ 66 | // As a function it is executed with the data object as an arg 67 | // for manipulation. If an object is returned, it is used as the 68 | // data object to submit 69 | var d = conf.data(request); 70 | if(d){ 71 | $.extend(request, d); 72 | } 73 | } else if($.isPlainObject(conf.data)){ 74 | // As an object, the data given extends the default 75 | $.extend(request, conf.data); 76 | } 77 | 78 | // Cancel an existing request 79 | var xhr = settings.pageLoadMore.jqXHR; 80 | if(xhr && xhr.readyState !== 4){ 81 | xhr.abort(); 82 | } 83 | 84 | settings.pageLoadMore.jqXHR = $.ajax({ 85 | 'type': conf.method, 86 | 'url': conf.url, 87 | 'data': request, 88 | 'dataType': 'json', 89 | 'cache': false, 90 | 'success': function(json){ 91 | if(settings.pageLoadMore.cacheLastJson){ 92 | json.data = settings.pageLoadMore.cacheLastJson.data.concat(json.data); 93 | } 94 | 95 | settings.pageLoadMore.cacheLastJson = $.extend(true, {}, json); 96 | 97 | drawCallback(json); 98 | } 99 | }); 100 | }; 101 | }; 102 | 103 | 104 | // 105 | // Resets page length to initial value on the next draw 106 | // 107 | $.fn.dataTable.Api.register('page.resetMore()', function(){ 108 | return this.iterator('table', function (settings){ 109 | var api = this; 110 | if(settings.hasOwnProperty('pageLoadMore')){ 111 | api.page.len(settings.pageLoadMore.pageLength); 112 | } 113 | }); 114 | }); 115 | 116 | 117 | // 118 | // Determines whether there is more data available 119 | // 120 | $.fn.dataTable.Api.register('page.hasMore()', function(){ 121 | var api = this; 122 | var info = api.page.info(); 123 | return (info.pages > 1) ? true : false; 124 | }); 125 | 126 | 127 | // 128 | // Loads more data 129 | // 130 | $.fn.dataTable.Api.register('page.loadMore()', function(){ 131 | return this.iterator('table', function (settings){ 132 | var api = this; 133 | var info = api.page.info(); 134 | 135 | if(info.pages > 1){ 136 | if(!settings.hasOwnProperty('pageLoadMore')){ 137 | settings.pageLoadMore = { pageLength: info.length }; 138 | } 139 | 140 | api.page.len(info.length + settings.pageLoadMore.pageLength).draw('page'); 141 | } 142 | }); 143 | }); 144 | 145 | })(jQuery); 146 | -------------------------------------------------------------------------------- /js/dataTables.pageLoadMore.min.js: -------------------------------------------------------------------------------- 1 | /*! dataTables.pageLoadMore.js 1.0.2 2 | * Copyright (c) Gyrocode LLC (www.gyrocode.com) 3 | * License: MIT License 4 | */ 5 | (function($){$.fn.dataTable.pageLoadMore=function(opts){var conf=$.extend({url:"",data:null,method:"GET"},opts);return function(request,drawCallback,settings){if(!settings.hasOwnProperty("pageLoadMore")){var api=new $.fn.dataTable.Api(settings);var info=api.page.info();settings.pageLoadMore={pageLength:info.length,cacheLastRequest:null,cacheLastJson:null};}var pageResetMore=false;if(settings.pageLoadMore.cacheLastRequest){if(JSON.stringify(request.order)!==JSON.stringify(settings.pageLoadMore.cacheLastRequest.order)||JSON.stringify(request.columns)!==JSON.stringify(settings.pageLoadMore.cacheLastRequest.columns)||JSON.stringify(request.search)!==JSON.stringify(settings.pageLoadMore.cacheLastRequest.search)){pageResetMore=true;}}settings.pageLoadMore.cacheLastRequest=$.extend(true,{},request);if(pageResetMore){settings.pageLoadMore.cacheLastJson=null;request.length=settings.pageLoadMore.pageLength;}request.start=request.length-settings.pageLoadMore.pageLength;request.length=settings.pageLoadMore.pageLength;if($.isFunction(conf.data)){var d=conf.data(request);if(d){$.extend(request,d);}}else{if($.isPlainObject(conf.data)){$.extend(request,conf.data);}}var xhr=settings.pageLoadMore.jqXHR;if(xhr&&xhr.readyState!==4){xhr.abort();}settings.pageLoadMore.jqXHR=$.ajax({"type":conf.method,"url":conf.url,"data":request,"dataType":"json","cache":false,"success":function(json){if(settings.pageLoadMore.cacheLastJson){json.data=settings.pageLoadMore.cacheLastJson.data.concat(json.data);}settings.pageLoadMore.cacheLastJson=$.extend(true,{},json);drawCallback(json);}});};};$.fn.dataTable.Api.register("page.resetMore()",function(){return this.iterator("table",function(settings){var api=this;if(settings.hasOwnProperty("pageLoadMore")){api.page.len(settings.pageLoadMore.pageLength);}});});$.fn.dataTable.Api.register("page.hasMore()",function(){var api=this;var info=api.page.info();return(info.pages>1)?true:false;});$.fn.dataTable.Api.register("page.loadMore()",function(){return this.iterator("table",function(settings){var api=this;var info=api.page.info();if(info.pages>1){if(!settings.hasOwnProperty("pageLoadMore")){settings.pageLoadMore={pageLength:info.length};}api.page.len(info.length+settings.pageLoadMore.pageLength).draw("page");}});});})(jQuery); --------------------------------------------------------------------------------