parse.com - Lazy Loading using JQuery dataTables with Parse database -
i using jquery datatables display data parse.com. have 5000 rows in database , tables takes long time load. i've attempted solve problem using lazy loading via jquery datatables pipeline. looked @ example: http://www.datatables.net/examples/server_side/pipeline.html not working me. using rest api parse url. below code. please help. thank you!
// pipelining function datatables. used `ajax` option of datatables // $.fn.datatable.pipeline = function ( opts ) { // configuration options var conf = $.extend( { pages: 5, // number of pages cache url: '', // script url data: null, // function or object parameters send server // matching how `ajax.data` works in datatables method: 'get' // ajax http method }, opts ); // private variables storing 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 cache cleared ajax = true; settings.clearcache = false; } else if ( cachelower < 0 || requeststart < cachelower || requestend > cacheupper ) { // outside cached data - need make 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 request checking next time around cachelastrequest = $.extend( true, {}, request ); if ( ajax ) { // need data 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 same `data` options datatables. if ( $.isfunction ( conf.data ) ) { // function executed data object arg // manipulation. if object returned, used // data object submit var d = conf.data( request ); if ( d ) { $.extend( request, d ); } } else if ( $.isplainobject( conf.data ) ) { // object, data given extends 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 echo each response json.data.splice( 0, requeststart-cachelower ); json.data.splice( requestlength, json.data.length ); drawcallback(json); } } }; // register api method empty pipelined data, forcing ajax // fetch on next draw (i.e. `table.clearpipeline().draw()`) $.fn.datatable.api.register( 'clearpipeline()', function () { return this.iterator( 'table', function ( settings ) { settings.clearcache = true; } ); } ); $(document).ready(function() { $('#media_table').datatable( { "processing": true, "serverside": true, "ajax": $.fn.datatable.pipeline( { url: 'https://api.parse.com/1/classes/gamescore', pages: 5 // number of pages cache }) }) })
Comments
Post a Comment