Tablesorter with pagination affects partial view data

Question

I am using tablesorter with pagination functionality in my partial view. The partial view is loading using ajax in view page to prevent refreshing of page. If I apply only tablesorter it works fine. But when I apply pagination with tablesorter it does not give proper output.

I have drop down list in my page and when I select value in drop down list it load data perfectly and sorting and pagination works fine as below :

But When 2nd time I select another value from drop down list. Data is not getting display.

If I only use tablesorter without pagination It works fine each time I select different value in dropdown.

What Can be reason for this?

this is my view page code :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Search MDLNoWise
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<fieldset>
<legend>Search by MDLNo</legend> 
<div id="search">
<br /><br />
Select MDLNo
<%: 
Html.DropDownListFor(
      model => model.Request_For_Id, 
      ViewData["MDLno"] as SelectList, "--Select--", new {id ="Request_For_Id" })

%>
<br /><br />

<div id="viewlist"> 
</div>
</div>
</fieldset>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../../Content/Styles/blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {

        $('#Request_For_Id').change(function () {
            var mdlno = document.getElementById("Request_For_Id").value;


            $.ajax({
                url: '/Search/MDLNoDataList/',
                type: "POST",
                data: {
                    id: mdlno
                },
                dataType: "html",
                success: function (data) {
                    $("#viewlist").html(data);
                },
                error: function () {
                    alert("No Records Found");
                    //$("#viewlist").html('No Records Found');
                }
            });

        });
    });
</script>
</asp:Content>

this is my partial view in which I use tablesorter with pagination.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>>" %>
<%--<script src="@Url.Content("../../Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("../../Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
    <script src="@Url.Content("../../Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>--%>
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tablesorter.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tablesorter.pager.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("table.tablesorter").tablesorter()
                              .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
    });
    </script>
    <div>
<table class="tablesorter">
<thead> 
    <tr>
        <th>
            Request_For_Id
        </th>
        <th>
            Territory
        </th>
        <th>
            Estimated_Amount
        </th>
        <th>
            Actual_Amount
        </th>
        <th>
            Date_Created
        </th>
        <th>
            Compute_CRM_State
        </th>
        <th>
            Compute_Event_Type
        </th>
    </tr>
    </thead> 
    <tbody>
    <% foreach (var item in Model)
       { %>
     <tr>
        <td>
            <%: Html.DisplayFor(modelItem => item.Request_For_Id)%>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Territory)%>
        </td>

        <td>
            <%: Html.DisplayFor(modelItem => item.Estimated_Amount)%>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Actual_Amount)%>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Date_Created)%>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Compute_CRM_State)%>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Compute_Event_Type)%>
        </td> 
    </tr>
    <%} %>
    </tbody>

</table>

<div id="pager" style="position: none;">

            <img src="../../Content/images/first.png" class="first" />
            <img src="../../Content/images/prev.png" class="prev" />
            <input type="text" class="pagedisplay" />
            <img src="../../Content/images/next.png" class="next" />
            <img src="../../Content/images/last.png" class="last" />
            <select class="pagesize">
                <option selected="selected" value="1">1</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
            </select>

        </div>
        </div>