StateLoadCallback duplicates pagination control & global search elements

SamirSilva

Hi,

I'm using Datatables for Bootstrap3 and I wanted to save the state of the filters and pagination using state save with ajax, I get it working but with a problem in the DataTable's DOM.
When loading the data, the table displays the correct filters and pagination but the dom elements are being duplicated (global search input, pagination control and the length changing input control) so the final result is two rows with this controls and the table filtered as expected.

Is anyonoe having this issue? I'm currently using the nightly build (I tried with different builds and stills the same).

$(document).ready(function() {
    var searchValue = $("#filter").val();
    var main_table = $('#main_table').DataTable({
        destroy: true,
        stateSave: true,
        stateLoadCallback: function (settings, callback) {
            $.ajax( {
                url: '/state_load',
                dataType: 'json',
                success: function (json) {
                    if (json.result != null) {
                        for (var key in json.result.columns) {
                            var filterId = $('#main_table').children('thead').children('[id$="filters"]').attr('id');
                            if ('search' in json.result.columns[key]) {
                                if (json.result.columns[key].search.search != '') {
                                    $($('#main_table').DataTable().table().header()).find('#'+filterId+ ' > td').eq(key).children().children("input").val(json.result.columns[key].search.search)
                                }
                            }
                        }
                        callback( json.result );
                    }
                }
            });
            return {};
        },
        stateSaveCallback: function (settings, data) {
            makeAjaxCall("/state_save",JSON.stringify(data));
        },
        processing: true,
        serverSide: true,
        deferLoading: 0,
        order: [[2, 'asc'],[3, 'asc'],[4, 'asc'],[7, 'asc']],
        orderCellsTop: true,
        ajax: url,
        rowId: "id",
        autoWidth: false,
        paging: true,
        dom: "<'main_table_headers'<'row main_table_header_container_buttons_machavail'><'row main_table_header_container_body'<'col-sm-3 main_table_header_container_col1'l><'col-sm-6 main_table_header_container_col2'p><'col-sm-3 main_table_header_container_col3'f>>"+"<'row main_table_header_container_footer'<'col-sm-3 main_table_footer_container_col1'><'col-sm-6 main_table_footer_container_col2'i><'col-sm-3 main_table_footer_container_col3'>>>"+"<'main_table_data_container' tr>",
        columns: [
            //columns
        ],
        columnDefs: [
           //column defs
        ],
        searchCols: [null,null,null,null,null,null,null,null,null,null,{ search: searchValue },null,null,null,null,{search: 'All Machines'![](https://datatables.net/forums/uploads/editor/q6/6rdkxcf24lz0.png "")
![](https://datatables.net/forums/uploads/editor/88/cn5akfyem4b8.png "")
![](https://datatables.net/forums/uploads/editor/yl/k4v6kf74x7h0.png "")
}],
        createdRow: function ( row, rowData, index ) {
            // Rows checked
            if ($.inArray(row.id, hamObj["llgroup_work_selected"]) != -1) {
                $(row).find('[name^="select_chkbox_main_table_"][data-index="'+row.id+'"]').prop('checked', true);
            }
        },
        initComplete: function(settings, json) {
            $('#pleaseWaitDialog').hide();
        }
      }
    );

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SamirSilva

I think I found the problem while creating the test case.
First of all I was returning and empty object at the end of the stateLoadCallback as I found in the forum, but it seems that was an issue that was fixed on newer versions.

 stateLoadCallback: function (settings, callback) {
            $.ajax( {
                url: '/state_load',
                dataType: 'json',
                success: function (json) {
                        callback( json );
                }
            });
            **return {};** // I had to remove this
        },

Once I removed the return statement, the table was not being updated and I noticed that the deferLoading option (which I'm using depending on the user role, admin or not to display an empty list or the whole user's data) was causing conflict to refresh the table.
I ended up using a condition to remove the deferLoading option if there is a state saved and it is now working.