Divide data into several datasets/listview which are shown in jquery tabs

Question

Hi,

I'm extracting data from a webserivce.

This is my select statement to retrieve the data:

string cmdstr = "select title, titlefr, racpnr, racpmodeltype from onl_wgn where show = 1 order by onl_kl, racpnr";

I got 4 groups of onl_kl. Now I want to show each group in a tab of the jquery tabcontainer.

I can pass the data in a dataset from my webservice to my webapplication and databind it to a listview, but I don't know how to seperate the data into the 4 tabs? Is this possible in a way with a listview or using other datacomponents?

If not, should I make 4 select statements in my webservice and send 4 datasets to my webapplication and bind it to 4 listviews each in 1 tab? If so how I can pass a list of datasets from a webservice to a webapplication?

Thx

Answer 1

As long as onl_kl is visible to jQuery in some way, you can simply show or hide various items, depending which tab is selected. I don't quite know how you are implementing your tabs, but assuming you can assign an onClick event to them, and assuming each ListView item is in a container, you can do something like this:

$(function() {
    $('.myTab').click(function() {
        $('.onl_klClass:contains("' + $(this).text() + '")').parent('.topParent').show();
        $('.onl_klClass:not(:contains("' + $(this).text() + '"))').parent('.topParent').hide();
    });
    $('.myTab:first').click(); //just to have something selected
});

This is just a basic example, if you provide more details, it would be easier to come up with a tailored solution.