Apply different page cache value

dlaws

Hi,

I'm using page caching as described in the pipelining example in my table.

It order to make my pages load quicker, I want to be able to cache 2 pages on first load (page 1) and when a user clicks further pages (page 3+) it cache 6 pages.

My attempt is not working as I expected. I'm calling getPageCache (L#16) and I can see the console.log (L#5) is showing true on first load and drawing 2 pages, but when I click on page 3+ I don't see the console.log and it continues to draw 2 pages.

I'm setting isFirstDraw=true on page load (L#2), and then setting it to false in the drawCallback (L#37),

Please note, this is a simplified version of the code

Is it possible to do this, what am I doing wrong?

Thank you for your time.

$(document).ready(function(){
    var isFirstDraw      = true;

    function getPageCache(firstDraw) {
        console.log(firstDraw);
      return (firstDraw ? 2 : 6);
    }

    var dataTableObj = $('#dataTable').DataTable( {
         "processing"  : true
        ,"serverSide"  : true
        ,"pageLength"  : 10
        ,"responsive"  : true
        ,"ajax"        : $.fn.dataTable.pipeline({
                             url     : '/remote/performersList?method=getPerformersList'
                            ,pages   : getPageCache(isFirstDraw)
                            ,method  : 'POST'
                            ,data    : function(d){
                                           d.selectedLHB = $('select[name="availableLHB"] option:selected').val();
                                       }
                         })
        ,"language"    :{ "emptyTable"     : localisedText.emptytable
                         ,"info"           : localisedText.info
                         ,"infoEmpty"      : localisedText.infoempty
                         ,"infoFiltered"   : localisedText.infofiltered
                         ,"lengthMenu"     : localisedText.lengthmenu
                         ,"loadingRecords" : localisedText.loadingrecords
                        }
        ,"initComplete": function () {
                             checkScreenSize ( datatable        = dataTableObj
                                              ,isChevronVisible = isChevronVisible
                                             );
                             $('.page-link').attr('rel', 'nofollow');
                             $("#performersList").removeClass("disable");
                         }
        ,"drawCallback": function( settings ) {
                 isFirstDraw      = false;
                             checkScreenSize ( datatable        = dataTableObj
                                             );
                             $('.page-link').attr('rel', 'nofollow');
                             var searchButton = $('button[type="submit"]#plSearchButton');
                             searchButton.val(searchButtonText);
                             searchButton.prop('disabled', false);
                         }
        ,"preDrawCallback": function( settings ) {
                                var searchButton = $('button[type="submit"]#plSearchButton');
                                searchButton.val(localisedText.processing);
                                searchButton.prop('disabled', true);
                            }
    });
});

kthorngren

Sounds like getPageCache() is being called during Datatables initialization not when the ajax request is being sent. Basically you are calling the function to set the initial value. Try creating an anonymous function, similar to the ajax.data option and calling getPageCache() inside that function. This way you are assigning pages the function not the return value of the first call.

Kevin

dlaws

Hi Kevin,

I've tried the following and nothing happening, is what I'm doing wrong?

I've created my anonymous function L#4 and calling it on line L#16. This throws an error in the page called via the ajax but it's unrelated to datatables

$(document).ready(function(){
    var isFirstDraw      = true;

    var getPageCache = function(firstDraw) {
      return (firstDraw ? 2 : 6);
    }

    var dataTableObj = $('#dataTable').DataTable( {
         "processing"  : true
        ,"serverSide"  : true
        ,"pageLength"  : 10
        ,"responsive"  : true
        ,"ajax"        : $.fn.dataTable.pipeline({
                             url     : '/remote/performersList?method=getPerformersList'
                            ,pages   : function(){
                                            getPageCache(isFirstDraw)
                                           }
                            ,method  : 'POST'
                            ,data    : function(d){
                                           d.selectedLHB = $('select[name="availableLHB"] option:selected').val();
                                       }
                         })

and I've also tried this, done away with the anonymous function and just added the logic to L#12. This does the same as my original attempt.

$(document).ready(function(){
    var isFirstDraw      = true;

    var dataTableObj = $('#dataTable').DataTable( {
         "processing"  : true
        ,"serverSide"  : true
        ,"pageLength"  : 10
        ,"responsive"  : true
        ,"ajax"        : $.fn.dataTable.pipeline({
                             url     : '/remote/performersList?method=getPerformersList'
                            ,pages   : function(){
                                             return (isFirstDraw ? 2 : 6)
                                           }
                            ,method  : 'POST'
                            ,data    : function(d){
                                           d.selectedLHB = $('select[name="availableLHB"] option:selected').val();
                                       }
                         })

dlaws

Hi Kevin,

I couldn't update the comment above

I've tried the following and nothing happening, is what I'm doing wrong?

I've created my anonymous function L#4 and calling it on line L#16. This throws an error in the page called via the ajax but it's unrelated to datatables

$(document).ready(function(){
    var isFirstDraw      = true;

    var getPageCache = function(firstDraw) {
      return (firstDraw ? 2 : 6);
    }

    var dataTableObj = $('#dataTable').DataTable( {
         "processing"  : true
        ,"serverSide"  : true
        ,"pageLength"  : 10
        ,"responsive"  : true
        ,"ajax"        : $.fn.dataTable.pipeline({
                             url     : '/remote/performersList?method=getPerformersList'
                            ,pages   : function(){
                                            getPageCache(isFirstDraw)
                                           }
                            ,method  : 'POST'
                            ,data    : function(d){
                                           d.selectedLHB = $('select[name="availableLHB"] option:selected').val();
                                       }
                         })

This does works and returns a static value similar to my original attempt. This is the same code as above with a change to L#15

$(document).ready(function(){
    var isFirstDraw      = true;

    var getPageCache = function(firstDraw) {
      return (firstDraw ? 2 : 6);
    }

    var dataTableObj = $('#dataTable').DataTable( {
         "processing"  : true
        ,"serverSide"  : true
        ,"pageLength"  : 10
        ,"responsive"  : true
        ,"ajax"        : $.fn.dataTable.pipeline({
                             url     : '/remote/performersList?method=getPerformersList'
                            ,pages   : getPageCache(isFirstDraw)
                            ,method  : 'POST'
                            ,data    : function(d){
                                           d.selectedLHB = $('select[name="availableLHB"] option:selected').val();
                                       }
                         })

and I've also tried this, done away with the anonymous function and just added the logic to L#12. This does the same as my original attempt.

$(document).ready(function(){
    var isFirstDraw      = true;

    var dataTableObj = $('#dataTable').DataTable( {
         "processing"  : true
        ,"serverSide"  : true
        ,"pageLength"  : 10
        ,"responsive"  : true
        ,"ajax"        : $.fn.dataTable.pipeline({
                             url     : '/remote/performersList?method=getPerformersList'
                            ,pages   : function(){
                                             return (isFirstDraw ? 2 : 6)
                                           }
                            ,method  : 'POST'
                            ,data    : function(d){
                                           d.selectedLHB = $('select[name="availableLHB"] option:selected').val();
                                       }
                         })

kthorngren

I messed with it a little and couldn't find a way to make the pages option dynamic. Maybe @allan or @colin can provide the necessary steps to do so.

Kevin

allan

To be honest, it isn't something I'd considered before. I'm sure it will be possible, but as it is specific customisation, this is something that would fall under our support packages.

Allan

dlaws

thank you for your feedback.
D