Retry

aruseni

Sometimes several retries are required to get table’s data (e.g. there could be a connection problem or an error on the server side). In this case, such code can help to improve UX by eliminating the need of reloading the whole page and clearly stating to the user that an error has occured.

"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
    function load_data() {
        oSettings.jqXHR = $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": sSource,
            "data": aoData,
            // This tells the browser that the authorization information,
            // including cookies, should be sent with the request
            "xhrFields": {
                withCredentials: true
            },
            "success": fnCallback,
            "error": function() {
                var results_list_li_tag = search_results_nav_ul_tag.children("li.result_list");
                results_list_li_tag.removeClass("loading");
                loading_p.hide();
                table_wrapper.hide();
                search_results_nav_ul_tag.hide();
                results_piece_div.append('<div class="alert alert-error"><p class="unable_to_load_data">' + gettext('Unable to load table data.') + '</p><p><button class="btn retry"><i class="icon-refresh"></i> ' + gettext('Retry') + '</button></p></div>');
                results_piece_div.children("div.alert").show();
                results_piece_div.find("button.retry").click(function() {
                    $(this).closest("div.alert").remove();
                    loading_p.show();
                    load_data();
                });
            }
        });
    }
    load_data();
}

Do you use something like this when dealing with AJAX loaded data? Do you think that DataTables should support this scenario out-of-the-box?

allan

Thanks for the contribution!

Its the first time (that I can recall) that this feature request has been asked for, so its not something I want to put into the core at the moment, but others are invited to vote for this by adding a message to the thread :-)

Allan

aruseni

OK, sounds good enough. :-)

Anyway, if someone wants it, here is some more associated code.

This is for hiding/showing the table and the “loading” message.

table_tag.bind("processing.dt", function(e, settings, processing) {
    var results_list_li_tag = search_results_nav_ul_tag.children("li.result_list");
    results_list_li_tag.toggleClass("loading", processing);
    search_results_nav_ul_tag.show();
    table_wrapper.show();
    loading_p.hide();
});

And this is the code for the template (I use Django):

<div class="results_piece db_results active" data-db-id="{{ db.id }}" id="db{{ db.id }}">
    <h1>{{ db.name }} ({{ db.records }})</h1>
    <div class="fullscreen">
        <i class="icon-fullscreen"></i>
        <a href="#" class="exit_fullscreen">{% trans "Exit full-screen mode" %}</a>
    </div>
    <nav class="search_results">
        <ul class="nav nav-tabs">
            <li class="active loading result_list"><a href="#">{% trans "Result list" %}</a></li>
        </ul>
    </nav>
    <table class="table" id="results_for_database_{{db.id}}" width="100%"></table>
    <p class="loading">{% trans "Please wait while the search results are loading." %}</p>
    <div class="fullscreen_info_tooltip"></div>
</div>