Dynamic Javascript in Partial Page Postback

Question

I'm using the tablesorter jQuery plugin to do some sorting of my tables. The site I'm using this on is programmed in .Net 3.5 and I am using the ASP.NET AJAX and updatepanels to perform my asynchronous page updates.

The problem I'm running into is when using the table sorter, I have some columns that I want to disable sorting on. I have the following javascript code to do so,

function pageLoad(sender, args) {
        // Set table sorting in the load event so this takes care of partial page postbacks
        $$("gvRosters").tablesorter({
            sortList: [[0, 0]],
            widgets: ['zebra'],
            8: {
               // disable it by setting the property sorter to false
               sorter: false
            } 
        });
    }

The column I want to hide is the 9th column, and everything works fine. I put this code in the pageLoad function so that it will run on partial postbacks, which it does. The issue is that I have a linkbutton that calls an asynchronous update on the page which changes the visible columns in my table. So the 9th column that I need to hide becomes the 12th column that needs to be hidden. I'm not sure the correct approach to use to rewire the hidden column so that it reads:

function pageLoad(sender, args) {
        // Set table sorting in the load event so this takes care of partial page postbacks
        $$("gvRosters").tablesorter({
            sortList: [[0, 0]],
            widgets: ['zebra'],
            11: {
               // disable it by setting the property sorter to false
               sorter: false
            } 
        });
    }

instead on a partial postback. Basically what I need to do is run this code again on partial postback (which it does already when inside the pageLoad function) but I also need to dynamically change the javascript code that is run in order to disable sorting on the correct column. I appreciate any insight you can provide on this problem.

Answer 1

Create 2 javascript methods,

1. initial on first page load (which is for 9 cols),

2. next time you modify your cols (makes 12 cols).

Initially call method 1 directly from your javascript code. And on asyn postback from linkbutton you can call the 2nd javascript method using

ScriptManager.RegisterStartupScript

Hope this helps.