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

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

bordin89bordin89 Posts: 5Questions: 2Answers: 0
edited July 2017 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • bordin89bordin89 Posts: 5Questions: 2Answers: 0

    This is the snippet with formatting.

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin

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

    Allan

  • bordin89bordin89 Posts: 5Questions: 2Answers: 0

    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
           }
        });
    });
    
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

This discussion has been closed.