Как предотвратить получение данных при извлечении данных, когда пользователь перемещается назад? - PullRequest
0 голосов
/ 29 октября 2019

Я использую датированный с серверной обработкой.

Пример сценария таков:

Когда пользователь разбивает страницу на данные страница 1 , страница 2 , а затем страница 3 это будет тянуть данные со стороны сервера. Есть ли способ, что когда пользователь разбивает страницу назад, так как данные были извлечены на сервер, он больше не будет тянуть. Я хочу сохранить предыдущие данные. Есть ли способ сделать это? В настоящее время я читаю свойство stateSave datatable. ТИА

1 Ответ

0 голосов
/ 31 октября 2019

Как вы сказали, вы должны взглянуть на stateSave , который делает то, что вы ищете:

DataTables имеет возможность сохранить состояниетаблица (ее позиция подкачки, состояние заказа и т. д.), чтобы ее можно было восстановить, когда пользователь перезагрузит страницу или вернется на страницу после посещения подстраницы.

Но, как вы это делаетена стороне сервера, вы также можете взглянуть на Pipelining , чтобы уменьшить количество вызовов Ajax для разбивки на страницы, как в этом примере:

//
// 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 ( typeof conf.data === 'function' ) {
                // 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 );
                    }
                    if ( requestLength >= -1 ) {
                        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: 'scripts/server_processing.php',
            pages: 5 // number of pages to cache
        } )
    } );
} );

Делая их оба, вы можете кэшировать и уменьшитьзапросы к серверу, повышая производительность и время сервера.

В зависимости от того, как вы запрашиваете данные на сервере, вы должны знать, что по умолчанию DataTables запрещает кэширование запросов в функции fnServerData, но вы можете переопределитьfnServerData и используйте $.getJSON(), что является сокращенной функцией для $.ajax() без указания параметра кэширования. Значение по умолчанию для параметров кэширования - true, и ваши запросы будут кэшироваться.

Извлечено из здесь .

Последним советом будет просмотреть «Отложенная загрузкаdata 'также, как вы могли бы прочитать в их документах :

При использовании DataTables с обработкой на стороне сервера поведение по умолчанию состоит в том, что DataTables автоматически выполняет вызов Ajax и загружаетданные, удаляя все, что, возможно, уже было в таблице. Однако такое поведение может быть не всегда желательным, если первая страница таблицы уже была предварительно загружена в HTML (что можно сделать для обеспечения доступности или по соображениям производительности).

Этот автоматический вызов Ajax для полученияПервая страница данных может быть переопределена с помощью свойства инициализации deferLoading

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...