具有分页的Tablesorter会影响部分视图数据

Question

我在部分视图中使用具有分页功能的tablesorter。部分视图使用视图页面中的ajax加载以防止刷新页面。如果我只申请tablesorter它工作正常。但是当我使用tablesorter进行分页时，它没有给出正确的输出。

我的页面中有下拉列表，当我在下拉列表中选择值时，它会完美地加载数据，排序和分页工作正常如下：

但是第二次从下拉列表中选择另一个值时。数据无法显示。

如果我只使用没有分页的tablesorter它在每次我在下拉列表中选择不同的值时工作正常。

这可能是什么原因？

这是我的浏览页面代码：

<%@ 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>

这是我的部分视图，其中我使用了分页的tablesorter。

<%@ 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>