Counting rows on a hidden datatable

everything_is_fine

I'm trying to return the count of matching search results in a hidden table. However, .count() currently is returning all rows no matter my search params. This setup works fine on the pages that I'm actually displaying the table. I only have this issue on pages where the table is display:none.

Should it matter if the table itself is hidden? If so is there a way to run operations against the dataset without drawing the table?

Use case: I'm counting items based on a list of keywords. Then appending the count to end of the list item to show users how many results there are for that item. This menu is not on the same page as the page I actually display the table on, hence why it's hidden.

For Example if I have location column, then my menu may be a list of locations and would end up looking something like this:
- Cleveland, OH (5)
- New York, New York (1)
- Atlanta, GA (10)
- Dallas, TX (0)

However, for a table with 67 total rows, I'm getting results like this:
- Cleveland, OH (67)
- New York, New York (67)
- Atlanta, GA (67)
- Dallas, TX (67)

---

The table itself has an inline style of "display:none;"

My table is initialized with:

        careersDataTable = $('#careersTable')
        .DataTable({
            "paging": false,
            "info": false,
            "processing": false,
            "searching": false,
            "stateSave": false, 
        });

Each list items is like the following

<li><a class="dataTableFilter" data-column="1" data-tablefilter="Banff" href="/opportunities?locationFilter=Banff">Banff (67)</a></li>```

To search the datatable and return the count I'm using the following:

    $(".dataTableFilter").each( function() { 
        console.log("checking for: "+$(this).attr("data-tablefilter"));
        $(this).html( $(this).html() + " (" + careersDataTable.search("").columns([parseInt($(this).attr("data-column"))]).search($(this).attr("data-tablefilter")).rows({search:'applied'}).count() + ")" );
    });

Table Debugging: https://debug.datatables.net/atubus

kthorngren

My guess is you need to add draw(), for example:
.search($(this).attr("data-tablefilter")).draw().rows({search:'applied'})

If this doesn't help please provide a link to your page or a test case replicating the issue so we can help debug. Since the problem happens while processing the table the debugger code you provided probably won't help much.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

everything_is_fine

Thanks for the quick reply. Adding draw() didn't resolve the issue, and actually is problematic on the pages where the datatable is visible since it redraws the table for every keyword and thus clears any other search filters applied to the table on load.

I can't share the actual site, but I'll try to recreate in a gist or something and update.

kthorngren

A simple test case is all we need. Just need to understand how your code is working. The actual data doesn't matter. You can start with http://live.datatables.net/

Keivn

everything_is_fine

ohh.. interesting.
I'm using "searching":false; to hide the default search box. However, this seems to also mess up trying to use .serach().
I guess I need to find another way to hide the default search box other than searching option

everything_is_fine

so this doesn't work: http://live.datatables.net/kafozawo/1/edit
but this does: http://live.datatables.net/sixifixi/1/edit

got it. just need dom: 't' to only display the table. I guess I miss read the searching option before.

kthorngren

Using searching: false not only removes the search input but turns off searching. Sounds like that is the problem for your initial code snippets. You can use the dom option to control which Datatables elements are shown. For exmaple:
http://live.datatables.net/remivisa/1/edit

Kevin