searchpane rebuild delayed

mattlees

Hi,

Having a minor issue with searchPane. Loading the data in via an ajax url. I'm updating the url via a change event, which is loading the new ajax url okay, however the searchPane rebuild is delayed by an entire 'change'.

eg
Default is to load with filter set to 'A', and searchpane reflects this.
Through a select input, change filter to 'B'. The datatable updates, but the searchpane doesn't, still showing data from A.
Change the filter to 'C', datatable shows C, but searchpane now updates to data from 'B'.

Quite confused!

$(document).ready(function(){
    var table= $("#dtTable").DataTable( {
        "ajax": 'table_ajax.php?filter=A',
        "stateSave": 'false',
        "columns": [
            { "data" : "person" },
            { "data" : "location" },
            { "data" : "department" }
        ],
        paginate : false,
        searchPane : {
            columns : [1,2]
        }
    });

    $( "#select" ).selectmenu({
        change: function(event, data) {
            table.ajax.url('table_ajax.php?filter='+data.item.value).load();
            table.searchPanes.rebuild();
            
        }
    });
});

colin

Hi @mattlees,

I suspect it's because it's the rebuild is fired off before the Ajax load completes. It would be better to put the reload into the ajax.url().load() callback (the first option), so something like:

table.ajax.url('table_ajax.php?filter='+data.item.value)
  .load(function() { table.searchPanes.rebuild() });

Cheers,

Colin

mattlees

Cheers! Works fantastically.

Had tried a few variations on getting that to work but not that one

jeansefan

i can't even use table.searchPanes.rebuild() . nothing i tried works. I just want the pane to show the options of updated table after filter.
my code:

$(document).ready(function (){
var table = $('#tabelaOsPendente').DataTable({
searchPane: {
searchPane: true,
columns: [':contains("Cliente")',':contains("Status Atual")',':contains("Técnico")',':contains("Situação")'],
threshold: 0
},
"dom": '<"top">ft<"bottom"p><"clear">',
"order": [[0, "desc"]],
"language": {"url": "https://cdn.datatables.net/plug-ins/1.10.16/i18n/Portuguese-Brasil.json"},
});

load(function() { table.searchPane.rebuild() });

});

allan

As noted in the language.url documentation:

Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request as completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

I suspect that is what is required here.

Allan