javascript - jquery tablesorter - 在 ajax 更新时我失去了排序功能

Question

我已经看到了一些这样的问题，但据我所知，我做的一切都是正确的，我有点困惑为什么这不起作用。

这是我在点击函数内的 ajax 调用。 #result_area 是表的主体，如您所见，我正在替换内容。内容加载正常，但我失去了表格排序功能。奇怪的是，我确信这曾经有效，所以我对发生了什么变化感到有点困惑。我已经检查了 firebug，肯定会调用触发器更新。

更新

当 $("#result_table").trigger("update"); 时出现以下错误被称为:

Error: TypeError: parsers[i] is undefined
Source File: http://swishprint.dev/assets/js/common/jquery.tablesorter.js
Line: 483

第 483 行指的是以下内容:

function getCachedSortType(parsers,i) {
return parsers[i].type;
}; 

表初始化函数(在 doc ready 中调用):

    function table_init() {
        $('#result_table').tablesorter({
        widgets: ['zebra'],
        widgetZebra: {
            css: ["dark", "darker"]
        },
        headers: {
            0: {
            sorter: false
            },
            5: {
            sorter: false
            },
            7: {
            sorter: false
            },
            8: {
            sorter: false
            }
          }
       });
}

点击函数:

    function leftsort_click(event) { //main sort click (left menu)

    //build url and other unrelated stuff
            var page = window.name,
            page_index, api = $('#right_pane').jScrollPane({
                showArrows: true,
                maintainPosition: false
            }).data('jsp');   
            if (!$(this).hasClass('sort_cat')) {        
            $('ul.sort_ul li, ul.cat_items li').removeClass('active');
            $(this).addClass('active');
            var sid = $(this).attr('id');
            var title = $(this).html();
            var loadUrlx = page;
            if ((sid != '') && (sid != 'undefined')) {
                loadUrlx += '/' + sid;
            }
            var loadUrlStub = loadUrlx;
            if ($('.rpp_btn.active').length >= 1) {
                var res_per_page = $.trim($('.rpp_btn.active').html());
                page_index = $.trim($('.res_page_select.active a').html());
                if (($('.rpp_btn.active').hasClass('just_clicked')) || (!$('.res_page_select').hasClass('just_clicked'))) {
                page_index = '1';
                }
                if ((page_index != 1) || (res_per_page != 25)) {
                loadUrlx += '/' + page_index + '/' + res_per_page;
                }
                $('.rpp_btn, .res_page_select').removeClass('just_clicked');
            }       
            loadUrlx = b_url + loadUrlx;
            if (History.enabled) {
                History.pushState(null, null, loadUrlx);
                //var hash=History.getHash(), rootUrl = History.getRootUrl(), State = History.getState(), url = State.url, relativeUrl = url.replace(rootUrl,'');
            }
//Ajax call            
              $.ajax({
                    cache: false,
                    url: loadUrlx,
                    success: function(result) {
                        $("#result_area").html(result);
                        if ((page != 'home') && (page != 'guides')) {
                            var count_ele = $('.hidden_rescount').length;

                            //get td width and set width of table headers
                            api.reinitialise();
                            tsizer();
                            $("#result_table").trigger("update");
                        }
                    }
            });
        }

调用点击功能(准备好文档):

$('#mainc').on("click", "ul.sort_ul li, ul.cat_items li", function(event) {
    leftsort_click.call(this);
    });
    }

我的 HTML

<table width="100%" class="result_table tablesorter scrollableFixedHeaderTable" id="result_table" style="">
    <thead id="t_header">
        <tr>
            <th class="border_apps th_first th_img no-sort" id="th_img">IMG</th>
            <th class="border_apps th_name header headerSortUp" id="th_name">NAME</th>
            <th class="border_apps th_cat header" id="th_cat">CAT</th>
            <th class="border_apps th_urate header" id="th_urate">RATING <small>(USER)</small></th>
            <th class="border_apps th_orate header" id="th_orate">RATING <small>(ODDBALL)</small></th>
            <th class="border_apps th_info no-sort" id="th_info">INFO</th>
            <th class="border_apps th_alert header" id="th_alert">W</th>            <th class="border_apps th_edit no-sort" id="th_edit">EDIT</th>            <th class="border_apps th_last th_link no-sort" id="th_link">LINK</th>
        </tr>
    </thead>
    <tbody id="result_area">
//results here

</tbody>
</table>

非常感谢任何帮助。

Answer 1

您需要考虑使用 jQuery 的 on() 方法动态加载的信息(通过 Ajax)，特别是事件委托(delegate)。 http://api.jquery.com/on/

当您最初加载页面时，所有 jQuery 代码都针对当时页面中存在的元素运行。 jQuery/JavaScript 不知道之后动态加载的内容对 DOM 所做的任何更改。使用 on() 的委托(delegate)方法，您可以绑定(bind)到加载时页面上存在的容器。将动态内容添加到容器时，容器中触发的任何事件都会冒泡到现有元素，然后正确执行。

例如你可以这样做 -

$('#result_area').on('event', 'element_causing_event', function() {...

在这种情况下，element_causing_event 将导致事件冒泡到#result_area，然后可以在那里处理它。

在查看文档 (http://tablesorter.com/docs/example-ajax.html) 之后，您似乎可以更新表格让插件知道数据已添加 -

$('#result_table').trigger('update');

这应该允许正常排序。尝试在 AJAX 请求的成功回调中调用它。