Honestly, I am not really sure the easiest method to build a storage shed, but basically, I've got a function within an include file that can take a $type parameter after which will retrieve/print is a result of my db in line with the $type passed in it... What I am attempting to do is have a number of links on the page that, whenever you click a particular link, will run the function and display the outcomes accordingly...

So, around the initial load from the page, there's a table that shows everything (and I am simplifying the table greatly...)

<table>
<tr><th>Item</th><th>Type</th></tr>
<tr><td>Milk</td><td>Dairy</td></tr>
<tr><td>Yogurt</td><td>Dairy</td></tr>
<tr><td>Chicken</td><td>Meat</td></tr>
<tr><td>Zucchini</td><td>Vegetable</td></tr>
<tr><td>Cucumber</td><td>Vegetable</td></tr>
</table>

And, then, inside a sidebar, I've got a number of links:

<a href="#">Dairy</a>
<a href="#">Meat</a>
<a href="#">Vegetable</a>

Let me filter the first table (and backwards and forwards, etc.) in line with the link that's clicked on, to ensure that when the user clicks "Vegetable", the function from the include file will run and filter the table to exhibit only "Vegetable" types...

The very first concept that involves thoughts are to include a category attribute towards the <tr> tags and id attribs towards the <a> tags to ensure that it is simple to filter this way:

<tr class="dairy"><td>Milk</td><td>Dairy</td></tr>
<tr class="meat"><td>Chicken</td><td>Meat</td></tr>

<a href="#" id="dairy">Dairy</a>
<a href="#" id="meat">Meat</a>

Then inside your JavaScript (I am using jQuery here):

$('a').click(function(evt){
    var myId = $(this).attr('id');

    $('tr').each(function(idx, el){
        if ($(el).hasClass(myId))
        {
            $(el).show();
        }
        else
        {
            $(el).hide();
        }
    });
});

It has the additional advantage of permitting you to definitely localize the written text without needing to improve your code.

Ok I produced an effective answer. It can be done the way in which Darrel suggested it. Case extra time for that paging factor to prevent snacks:

$('a').click(function(evt){
    var myId = $(this).attr('id');


    // append a idndicator to the current url
    var location = "" + document.location + "";
    location = location.split('#',1);
    document.location = location + '#' + $(this).attr('id');


    //append to next and previous links
    $('#nextlink').attr({
        'href': $('#nextlink').attr('href') + '#' + $(this).attr('id')
    });
    $('#previouslink').attr({
        'href': $('#previouslink').attr('href') + '#' + $(this).attr('id')
    });

    $('tr').each(function(idx, el){
        if ($(el).hasClass(myId))
        {
            $(el).show();
        }
        else
        {
            $(el).hide();
        }
    });
});

Some code that's performed after page load:

var filter = window.location.hash ? '[id=' + window.location.hash.substring(1, window.location.hash.length) + ']' : false;
if(filter)
    $('a').filter(filter).click();

This models/executes a click page strain on the hyperlink using the specific id.

However in general, for those who have a sizable database, you need to filter it directly with SQL within the after sales. This could result in the displayed table more consistent. For instance if the first page may have 3 rows of sophistication 'dairy' as well as on page 2 10 of sophistication 'dairy'.