Trigger update to jQuery Tablesorter on dynamically modified table

Several months ago I wrote a blog post about using tablesorter and pager plugins with ASP.NET MVC to beautifully create sorting and pagination features on plain tables and data in your HTML. However, in the past few weeks I have got some reports by users who use these plugins that they have problems when new data is added to the table dynamically on client side. The thing is that the plugin does not know anything about the new data, so, we need to tell the table sorter & pager that there is new data to be considered when sorting and paging operations are performed.

Before we move on, download the demo project here.

Note: The demo project is the complete code used in the first blog referenced above.

So, in the demo project, we have only two lines of jQuery code that initializes the plugins and sets some default options.

    <script type="text/javascript">
        $(function () {
            $("table.tablesorter").tablesorter({ widthFixed: true, sortList: [[0, 0]] })
            .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
        });
    </script>

Our HTML/Razor code is this:

    <div>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Date Added</th>
                </tr>
            </thead>
            <tbody>
                @{
                    foreach (var p in ViewBag.People)
                    {            
                    <tr>
                        <td>@p.Name</td>
                        <td>@p.Surname</td>
                        <td>@p.Email</td>
                        <td>@p.Phone</td>
                        <td>@p.DateAdded</td>
                    </tr>
                    }
                }
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Date Added</th>
                </tr>
            </tfoot>
        </table>
        <div id="pager" style="position: none;">
            <form>
            <img src="@Url.Content("~/Content/images/first.png")" class="first" />
            <img src="@Url.Content("~/Content/images/prev.png")" class="prev" />
            <input type="text" class="pagedisplay" />
            <img src="@Url.Content("~/Content/images/next.png")" class="next" />
            <img src="@Url.Content("~/Content/images/last.png")" class="last" />
            <select class="pagesize">
                <option selected="selected" value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
            </select>
            </form>
        </div>
    </div>

Now, lets add one more line in this HTML code first:

<a id="add" href="#">Add new</a>

and the following jQuery code:

$("#add").click(function () {
    $("<tr><td>New</td><td>New</td><td>New</td><td>New</td><td>New</td></tr>").appendTo(".tablesorter tbody");
});

This mainly creates table row with some dummy data and appends it to the table where we use tablesorter plugin.

After clicking the ‘Add’, the new table row is appended. However, once you click on any column header to sort the table, the new row will disappear.

I have sorted the table by Name and the new data has disappeared.

SOLUTION
There is solution for everything, why not for this?

The trigger function is the key! There is a jQuery trigger function that executes all handlers and behaviors attached to the matched elements for given event type. The magic code line for our problem is:

$("table.tablesorter").trigger("update");

You add this line right after the line which adds new data to the tablesorter:

$("#add").click(function () {
    $("<tr><td>New</td><td>New</td><td>New</td><td>New</td><td>New</td></tr>").appendTo(".tablesorter tbody");
    $("table.tablesorter").trigger("update");
});

Now, I have added multiple new rows (clicked ‘Add’ multiple times):

Now, if I click to sort by Name, the result will be:

I can also use the pagination now, the data will be there:

You can download the complete demo here.

Let me know your feedback.

Hope this was helpful.

Regards,
Hajan