Hide full table before prefiltering using a URL parameter, instead showing "Processing or loading "

bordin89

I use DataTables to display some tables with a high number of rows. The table can be loaded in its full, or if I pass a parameter in the URL, I am able to filter only the row including that query. I'd like to be able to do the prefiltering and show only that line, instead of loading the page, showing it and then apply the filter.

I'm attaching the snippet I'm using and the actual webpage.

I'm really new to JS and HTML and I'd really appreciate if you can help me with this.

<script>
        function getQueryParams(qs) {
                qs = qs.split('+').join(' ');
                var params =    {},
                                tokens,
                                re = /[?&]?([^=]+)=([^&]*)/g;

                while (tokens = re.exec(qs)) {
                        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
                }

                return params;
        }

        window.onload = function (e) {
                var query = getQueryParams(document.location.search);
                if (query.filterfiltre  != null) {
                        var table = $('#table1').dataTable({"processing":"DataTables is loading"}).api();
                        table.search(query.filterfiltre).draw();
                }
        };

</script>

An example webpage with the prefilter is

http://pvcbacteria.org/mywiki/cICB/Chlamydophila_abortus.html?filterfiltre=Q5L4Z2

bordin89

This is the snippet with formatting.

allan

search.search can be used to set the initial search condition that will be applied to the table.

Allan

bordin89

Thanks for the reply allan, I implemented the search option, but my question was slightly different. I'd like the table to remain hidden while it's loading and it will appear already prefiltered after load.

Is it possible to do that?

I'm attaching the snippet with modifications you suggested.

Thanks!

function getQueryParams(qs) {
                qs = qs.split('+').join(' ');
                var params =    {},
                                tokens,
                                re = /[?&]?([^=]+)=([^&]*)/g;

                while (tokens = re.exec(qs)) {
                        params[decodeURIComponent(tokens[1])] 
                        =decodeURIComponent(tokens[2]);
                }

                return params;
        }


        $(document).ready(function (){
        var query = getQueryParams(document.location.search);
        var table = $('#table1').DataTable({
                                                search: {
                                                         search: query.filterfiltre
       }
    });
});

allan

I'm not quite getting it I'm afraid. The table will be initialised with the search string using the above code.

Do you mean you simply don't want to see the table at all until the Javascript has finished running? You could put it in a display:none container and then display it once the table has initialised.

Allan