Tablesorter with pagination affects partial view data - ajax

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>