Filtering a Large Table Into Tabs

kraftomatic

Hey All,

I have a large DataTable that is currently tied into the Bootstrap framework. Looks great and all - but I need to break down this large table into sections (tabs). So for example, tabs All, A, B, C, D, E, F and G. Selecting each tab (via the Bootstrap UI) would essentially filter the table based on a certain criteria (hidden unique identifier). The "All" tab would show everything. Is there a way to do this?

Thanks in advance.

ignignokt

Are you using server-side? You could do something like:

var table = $('#example').DataTable({

then set a trigger for every tab with a different URL like so:

table.ajax.url('/mysite/ajax/all').load();
table.ajax.url('/mysite/ajax/a').load();
table.ajax.url('/mysite/ajax/b').load();
table.ajax.url('/mysite/ajax/c').load();

You could probably force something to be entered into the filter text input but that is kind of a hacky way to do it and then you remove the ability for the user to use the search.

kraftomatic

Thanks ignigokt. It's just sample HTML now, but might be server-side eventually.

Agreed - I wouldn't want to compromise the filter, as the live search for narrowing down results is something I want to utilize.

How does that URL filter based on All, a, b, c, etc?

Thanks.

ignignokt

You can either use different URLs, or you can set a variable and check it on your server-side to change the way you handle the request.

var tab = "all";

var my_table = $('#example').DataTable({
    ajax: {
        url:"/mysite/ajax",
        type:"POST",
        data:
        function(d){
            d.tab = tab;
        }
    }
});

$('.tabclass').on('click', function(e){
    tab = this.id;
    my_table.ajax.reload();
});

Then on your server-side, just check for $_POST['tab'] and change your query based on that.

kraftomatic

Hmm. Can't I somehow have the "All" tab be the total result set, and then have the tabs act as a secondary method of "filtering"?

ignignokt

It is hard to tell you exactly what to do since I don't know what your data looks like, but basically I was thinking you check for what is set with a switch in your backend, then change the query based on that.

if $_POST['tab'] = "all" then you'd do SELECT * FROM my_table

if $_POST['tab'] = "a" then you'd do SELECT * FROM my_table WHERE column = 'a'

Etc. I'm not really sure what you mean by filtering. Are you saying you always want to load all the data, but make some of that data hidden when they click on certain tabs? The best solution would be to change the query. If you want to load all of the data and hide some, I don't know how to do that other than adding a class to those rows and using CSS to hide them. But that will probably mess up the table because it will think you have 25 results but you will see say 6. Then you click to the next page and it has 11, then next page has 4, etc.

Even if there is a way to do this with javascript without messing up the table, it will still not be as good of a solution as just changing your query in my opinion. I have many pages that use multiple queries or that change the query based on options the user passes to my server-side script. You can take a look at my implementation of it if you wish.

kraftomatic

Yes, I'd always want to load the data because of the "All" tab. So once it's there on the page, I really just want to show certain sections of the data.

The data itself isn't anything special. It's a combination of static data, with some form input elements included. Everything displays on load and is shown in an "All" tab. Say there are 100 rows, 10 would be categorized as "A", 10 as "B", etc. etc.

For ease of view, the tabs basically are sorting/filtering the data based on some hidden field I would have (similar to how your query is setup with a unique identifier). The only issue I see in calling the query every time is load time. If all the data is loaded already, DataTables existing quick filtering should be able to do this somehow in a quick way, without any lag time in the load. Does that make sense?

FWIW, I'm not looking to do pagination or even sorting on the data. Mainly just breaking it down by tabs and search.

ignignokt

If you aren't doing any pagination then you could just give every type an attribute.

<tr type="a">
<tr type="b">
<tr type="c">

Then if someone clicks tab b you can run $('tr').not("[type='b']").hide(); based on the tab, and .show() whichever is the active type. If all is the active one, then just .show() them all. I do something similar to this on one of my tables which are not sortable or paginated and it works well.

Queries are extremely fast, so I doubt you'd notice any difference on load speed. It would just make this more scaleable if you are constantly adding data. But if you already have all the HTML built and you don't add data ever, or almost never then I guess there isn't a need to use it.

kraftomatic

I hate to be a PITA, but I don't suppose you have one of those examples handy by chance?

Thanks again.

ignignokt

I made a quick example of what I am talking about here.

allan

If you haven't already see this, you might be interested in a blog post I wrote a little while ago which I think covers basically this topic: http://datatables.net/blog/2014-09-22 . It uses DataTable's built in filtering rather than show / hide like @ignignokt's suggestion, but other than that I think it is a fairly similar approach.

Allan

kraftomatic

ignignokt and allan, thanks for the help. I need to buy you guys a virtual beer.

I'll play around with both options and see what works.

Thanks again.