jQuery tableorter *Pager*不工作，如果从AJAX调用使用

jQuery Tablesorter *Pager* not working if used fom AJAX call

本文关键字：AJAX 调用 如果 tableorter Pager 工作 jQuery      更新时间：2023-09-26

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>

在使用ajax调用加载表时，分页器和表排序器通常会出现问题。在尝试了一些不同的建议(没有一个是完全有效的)之后，我发现把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>
相关文章：