jQuery tablesorter 插件 - 表排序后执行操作答案

【问题标题】：jQuery tablesorter plugin - perform an action AFTER table is sortedjQuery tablesorter 插件 - 表排序后执行操作
【发布时间】：2011-03-19 02:06:25
【问题描述】：

我有一个使用 tablesorter 插件成功排序的表。但是，我想突出显示特定行中特定文本字段中的文本。它有一个唯一的 ID，但是当我将代码放在排序代码之后时，它不起作用。这是我的代码：

jQuery(document).ready(function() { 
  jQuery("#filetable").tablesorter({
    sortList: [[3,1]],
    widgets: ['zebra'],
    testExtraction: "complex"
  });
  //my new code which doesn't work as expected
  if(jQuery("#new_foldername").length > 0){ 
    jQuery("#new_foldername").focus(function() { jQuery(this).select(); } ); 
  }
});

如果我在检查#new_foldername 是否存在之后立即发出警报，我会看到警报，并且我会看到背景中突出显示的文本（因此我的代码突出显示文本有效）。当我单击关闭警报时，表格完成排序......并且文本不再突出显示。

任何想法可能会发生什么？

【问题讨论】：

标签： jquery tablesorter highlight

【解决方案1】：

似乎排序是异步发生的。该文档提供了一个名为“sortEnd”的钩子，您可能希望在其中运行突出显示的代码。参见示例 http://tablesorter.com/docs/example-triggers.html

$(document).ready(function() { 
    // call the tablesorter plugin, the magic happens in the markup 
    $("table").tablesorter(); 

    //assign the sortStart event 
    $("table").bind("sortStart",function() { 
        $("#overlay").show(); 
        }).bind("sortEnd",function() { 
        $("#overlay").hide(); 
    }); 
});

【讨论】：

【解决方案2】：

谢谢罗伯特，

不幸的是，sortEnd 仅在您单击要排序的列标题时运行。它不适用于初始排序...

相反，我创建了一个新的小部件，如下所示：

jQuery.tablesorter.addWidget({ 
  id: "highlightNewFolder", 
  // format is called when the on init and when a sorting has finished 
  format: function(table) { 
    if(jQuery("#new_foldername").length > 0){  
      jQuery("#new_foldername").focus();
    }
  } 
});

现在可以了。不幸的是，我不得不放弃所有文本的选择/突出显示。由于某种原因，当代码中包含“select()”时，甚至对焦都不起作用：

jQuery("#new_foldername").focus(function() { jQuery(this).select(); } );

如果有人对如何集中和突出显示所有文本有任何想法，那将不胜感激！

【讨论】：

【解决方案3】：

您可以使用initialized callback function （或绑定到tablesorter-initialized event）（source）注意：这些仅适用于Mottie's fork of tablesorter，不适用于原始版本（v2. 0.5）。

jQuery(document).ready(function() {
    jQuery("#filetable").tablesorter({
        sortList: [[3, 1]],
        widgets: ['zebra'],
        testExtraction: "complex",
        initialized: function() {
            if (jQuery("#new_foldername").length > 0) {
                jQuery("#new_foldername").focus(function() {
                    jQuery(this).select();
                });
            }
        }
    });
});

【讨论】：

谢谢老兄。哇，那是我前一阵子发的！我现在开始使用 Datatables，因此无法测试您的建议，但这听起来似乎合理......！

【解决方案4】：

也许有些事情发生了变化。答案对我不起作用，但确实如此：

$("#filetable").tablesorter().bind("sortEnd", function (e, t) {
    customHilite();
});

Zebra 插件对我不起作用。可能是因为我过滤行的方式。

【讨论】：