updating a table and re-applying a behavior
Hi everybody!
Let me explain my problem:
I have a table initialized with some values and sorted using tablesorter plugin. I added also the pager plugin to allow the user a more comfortable view.
Here is the starting html:
- <table id="tabella-prodotti" class="tablesorter">
- <thead>
- <tr>
- <th></th>
- <th>Prodotto</th>
- <th>Descrizione</th>
- </tr>
- </thead>
- <tbody id="i-prodotti">
- <tr>
- <td style="width: 10%"><img src="./prodotti/immagini/thumbs/Frama Eletta picul.JPG" width="42" height="56"/></td>
- <td style="width: 30%"><span class="fornitore">nome</span><br/><span class="nome-prodotto">elemento</span></td>
- <td><span class="descrizione-prodotto">descrizione</span></td>
- </tr>
- [more elements <tr></tr>]
- </tbody>
- </table>
- <div id="pager" class="pager">
- <form>
- <img src="./design/first.png" class="first"/>
- <img src="./design/prev.png" class="prev"/>
- <input type="text" class="pagedisplay"/>
- <img src="./design/next.png" class="next"/>
- <img src="./design/last.png" class="last"/>
- <select class="pagesize">
- <option selected="selected" value="10">10</option>
- <option value="20">20</option>
- <option value="30">30</option>
- <option value="40">40</option>
- </select>
- </form>
- </div>
And here is the jQuery code calling the plugins:
- $(document).ready(function()
- {
- $("#tabella-prodotti").tablesorter()
- .tablesorterPager({container: $("#pager"),
- positionFixed: false
- });
- });
My question concerns the updating of this table: i use an ajax call to update the <tbody> of the table, according to a value selected in a selectbox, i wish to show certain values, retrieved remotely from a server call to a database. Here is the code concerning this behaviour:
- $('a[name=menucategorie]').click(function(e) {
- //Cancel the link behavior
- e.preventDefault();
- //Get the A tag
- var queryparam = $(this).attr('href');
- var query = "act=prod_list&"+queryparam;
-
- //loading the content in the table
- $.ajax({
- url: './controller',
- data: query,
- dataType: 'text',
- type: 'post',
- success: function (msg) {
- if (msg == "") {
- $('#i-prodotti').html('no product for this category');
- }
- else {
- $('#i-prodotti').html(msg);
- }
- }
- });
- });
- });
The server message is HTML code containing <tr></tr> elements like in the HTML code above.
The fact is, that if I load the new values and put them in the <tbody> tag, the paging function won't work! the Pager plugin still shows me the values contained by the starting page, i.e. the ajax function does not update the <tbody> in the file.
How can I manage to update the view and make the tablesorter-pager plugin?
Sorry if the question is trivial, i'm still not very familiar with ajax and jQuery mechanisms... :)
Thanks in advance,
Diego.