jQuery Tablesorter * 호출기 * 사용되지 않는 경우 AJAX 호출

Question

DIV search_status 내의 코드는 페이지가로드 된 후 정렬 및 페이지 매김과 함께 작동하지만, Ajax 호출에서 정확히 같은 데이터를 호출하여 내용을 바꿉니다 그러나 페이지 매김은 여전히 ​​작동합니다. 왜 이런 일이 일어나고 어떻게 해결할 수 있는지에 대한 아이디어는 없습니까?

편집 : 아래 내용을 추가하면 문제가 해결됩니다.

$("#tablesorter").tablesorterPager({ container: $("#pager"), positionFixed: false }); 

- 아약스 호출 테이블을로드 할 때

<script type="text/javascript" src="/js/jquery.metadata.js"></script> 
<script type="text/javascript" src="/js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="/js/jquery.tablesorter.pager.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tablesorter").tablesorter({ debug: false, widgets: ['zebra', 'columnHighlight'] }) 
    .tablesorterPager({ container: $("#pager"), positionFixed: false }); 
}); 
$(function() { 
    if ($("#search").val()!=''){ 
     asearch(); 
    } 
    function asearch() { 
     $.post("/_ajax/search_table",{ 
      search: $("#search").val() 
     }, 
     function(data){ 
      $("#search_status").html(data); 
      $("#tablesorter").tablesorter({widgets: ['zebra']}); 
     }); 
     return false; 
    } 
    $("#button_search").click(function() { 
     asearch(); 
    }); 
    $('#search').bind('keydown',function(e){ 
     if (e.keyCode==13 || e.which==13) asearch(); 
    }); 
}); 
} 
</script> 
Search&nbsp;<input id="search" name="search" type="text">&nbsp;<input id="button_search" type="button" value="Search"> 
<div id="search_status" style="text-align:left"> 

    <table cellspacing="1" id="tablesorter" class="tablesorter"> 
     <thead> 
      <tr align="center"> 
       <th>ID</th> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr id="pager" align="center"> 
       <td colspan="7"> 
        <img src="/images/first.png" class="first" alt="First Page" height="16" width="16"> 
        <img src="/images/prev.png" class="prev" alt="Previous Page" height="16" width="16"> 
        &nbsp;<label class="pagedisplay"></label>&nbsp;<img src="/images/next.png" class="next" alt="Next Page" height="16" width="16"> 
        <img src="/images/last.png" class="last" alt="Last Page" height="16" width="16"> 
        <select class="pagesize"> 
         <option selected="selected" value="20">20</option> 
         <option value="30">30</option> 
         <option value="40">40</option> 
        </select> 
       </td> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr align="center"> 
       <td><a href="javascript:set_selection('2');">2</a></td> 
       <td><a href="javascript:set_selection('2');">John</a></td> 
      </tr> 
      <tr align="center"> 
       <td><a href="javascript:set_selection('1');">1</a></td> 
       <td><a href="javascript:set_selection('1');">Doe</a></td> 
      </tr> 
     </tbody> 
    </table> 

</div> 

Answer 1

나는 일반적으로 호출기 테이블 분류기 문제가 있었다. 몇 가지 다른 제안 (전혀 작동하지 않음)을 시도한 후에 JQuery 테이블 작성기 스크립트를 내 부분보기에 배치하고 기본보기가 아닌 것이 트릭임을 알게되었습니다. 메인 뷰

$(document).ready(function() { 

    $(document).ajaxStart(function() { 
     $('#ajaxBusy').show(); 
     $('#details').hide(); 
     $('#pager').hide(); 
    }).ajaxStop(function() { 
     $('#ajaxBusy').hide(); 
     $('#details').show(); 
     $('#pager').show(); 
    }); 

....

})에서

; 부분 감안

function SearchCustomerStock(force) { 
    var searchText = $("#FindStock_ED").val(); 
    var customerId = '@ViewBag.EncodedID'; 
    if (force || searchText.length > 2) { 
     $('#ajaxBusy').show(); 
     $('#details').hide(); 
     var dataObject = { CustomerId: customerId, Like: searchText, Perspective: $('#Perspective').val(), PerspectiveId: $('#PerspectiveId').val() }; 

     $.ajax({ 
      type: "GET", 
      url: "/CustomerStock/GetStockLike", 
      data: dataObject, 
      contentType: "application/json; charset=utf-8", 
      //async: false, 
      success: function (data) { 
       //$('#ajaxBusy').hide(); 
       //$('#details').show(); 
       $('#details').html(data); 
       /*var sorting = [[0, 0]]; 
       $("table.tablesorter") 
          .tablesorter(
           { widthFixed: true }, 
           { sortList: [[0, 0]] }, 
           { headers: { 7: { sorter: false } } }) 
          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });*/ 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       $('#ajaxBusy').hide(); 
       $('#details').show(); 
       alert(jqXHR + ', ' + textStatus + ', ' + errorThrown); 
      }, 
      cache: false 
     }); 
    } 
    //$("#FindStock_ED").attr('disabled', false); 
    return false; 
} 

@model IEnumerable<SkyPortR.Models.CustomerStockViewModel> 

<script type="text/javascript"> 

    $("table.tablesorter") 
    .tablesorter(
     { widthFixed: true }, 
     { sortList: [[0, 0]] }, 
     { headers: { 7: { sorter: false } } }) 
    .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() }); 

</script> 

<table class="tablesorter"> 
<thead> 
    <tr> 
     <th> 
      Barcode 
     </th> 
     <th> 
      Alternate Code 
     </th> 
     <th> 
      Group 
     </th> 
     <th> 
      Description 
     </th> 
     <th> 
      Packsize 
     </th> 
     <th> 
      LastCost 
     </th> 
     <th> 
      Supplier 
     </th> 
     <th class="indexImages"> 
     </th> 
    </tr> 
</thead> 
<tbody> 
@foreach (var item in Model) { 
    <tr>