Question

我遇到了js动作的加载问题，我有这两行：

$(".sorter td:first-child").css("width", "13px");
$(".sorter td:last-child").css("text-align", "center").css("padding", "0").css("line-height", "0").css("width", "65px");

这个工作oke ...但是当我转到tablesorter pager插件的第二页时，它没有再次加载。

截图： a busy cat http://www.dreamwire.nl/Cleanished/error.jpg

有人可以帮我这个吗？这就是我所拥有的所有JS：

var $sorterTable = $(".sorter");
var tablesorterConfig = { widgets: ['zebra'], headers:{ 0:{sorter:false} } };
tablesorterConfig.headers[$sorterTable.find("thead th").length - 1] = { sorter:false };

$sorterTable
.tablesorter(tablesorterConfig)          
.tablesorterPager({container: $("#pager"), positionFixed: false, size : 5 });

$(".sorter td:first-child").css("width", "13px");
$(".sorter td:last-child").css("text-align", "center").css("padding", "0").css("line-height", "0").css("width", "65px");

Answer 1

Tablesorter插件的2.0.7版包含pagerChange和pagerComplete个事件。如果您使用的是此版本（或者您可以升级），则可以在pagerComplete事件中重新应用您的样式。 http://mottie.github.com/tablesorter/docs/#Events

$(".sorter").bind('pagerComplete', function() {
    // reapply styles here...
    $(".sorter td:first-child").css("width", "13px");
    $(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": "65px"});
});

Answer 2

所有这些脚本都是设置样式。为什么不把它们放在样式表中呢？

.sorter td:first-child {
    width: 13px;
}
.sorter td:first-child + td + td + td + td + td {
    text-align: center;
    padding: 0;
    line-height: 0;
    width: 65px;
}

Answer 3

您还需要在单击寻呼机后设置这些CSS样式。试试这个

var $sorterTable = $(".sorter");
var tablesorterConfig = { widgets: ['zebra'], headers:{ 0:{sorter:false} } };
tablesorterConfig.headers[$sorterTable.find("thead th").length - 1] = { sorter:false };

$sorterTable
.tablesorter(tablesorterConfig)          
.tablesorterPager({container: $("#pager"), positionFixed: false, size : 5 });

$("#pager").click(function(){
  $(".sorter td:first-child").css("width", "13px");
  $(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": "65px"});
});

$(".sorter td:first-child").css("width", "13px");
  $(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": "65px"});

之后jQuery运行脚本

3 个答案: