TableSorter过滤器未在变更事件中的jQuery对话框中显示

Question

我在jQuery对话框中使用TableSorter Filter。当我第一次打开对话框时，TableSorter滤波器加载并正常工作。对话框包含一个下拉列表，当我从此下拉列表中选择值时，对话框重新加载和显示数据，但是TableSorter过滤器未显示/可见。

任何人都可以帮助我解决这个问题。

谢谢

var $dialogproperties = $('#dialogs');
$(document).on('change', '#ddl_Com', function (e) {
        e.preventDefault();
        var url = getURL;
        var data1 = getValues();
        url = '@Url.Action("Com_submit")?ID=' + id;
        $.post(url, data1, function (data) {
            //// Open popup dialog box
            var tmp = data.commentdisplay.replace(/n/g, '<br />');
            $dialogproperties.html('');
            $dialogproperties.dialog({ title: $('#title').text() });
            $dialogproperties.html(tmp);
            $dialogproperties.dialog('open');
        });
        return false;
});
$(function () {
        //// - Dialog box width and height
        var wWidth = $(window).width();
        var dWidth = wWidth * 0.9;
        var wHeight = $(window).height();
        var dHeight = wHeight * 0.9;
        var dialog = "";
        dialog = $("#dialogs").dialog({
            autoOpen: false,
            modal: true,
            width: dWidth,
            height: dHeight,
            fluid: true,
            open: function (event, ui) {
                stopscroll();
                alert('t');
                var $table = $('#tblCom');
                $table.tablesorter({
                    textExtraction: {
                        '.img': function (node) {
                            var $node = $(node);
                            return $node.find('span[title]').attr('title');
                        }
                    },
                    imgAttr: 'title',
                    ignoreCase: false,
                    widthFixed: true,
                    widgets: ["filter", "columnSelector"],
                    widgetOptions: {
                        filter_useParsedData: true,
                        filter_columnFilters: true,
                        filter_ignoreCase: true,
                        filter_defaultAttrib: 'data-value',
                        columnSelector_mediaquery: false
                    }
                });
            },
            close: function (event, ui) {
            }
        });
    });

Answer 1

代码，以确保在初始化tablesorter

之前，在对话框内渲染了HTML

dialog = $("#dialogs").dialog({
  // ...
  open: function (event, ui) {
    stopscroll();
    setTimeout(function() {
      var $table = $('#tblCom');
      $table.tablesorter({
        // ...
      });
    }, 0);
  },
  // ...
});