jquery - Tablesorter 过滤器在更改事件时未显示在 JQuery 对话框中

Question

我在 JQuery 对话框中使用 Tablesorter 过滤器。当我第一次打开对话框时，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

在初始化表排序器之前确保 HTML 已在对话框内呈现的代码

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