2011-08-15 66 views
0

我有一个js行动的负担大的问题,我有以下两行:jQuery的运行脚本

$(".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"); 

该工作奥凯...但是当我去的tablesorter寻呼机的第二页插件然后它不会再次加载。

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

能somewone帮助我?这是所有的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"); 
+0

'$( “分拣机TD:最后的孩子 ”)。CSS(“ 文本对齐”, “中心”),CSS( “填充”, “0”),CSS(“行高(“”,“0”)。css(“width”,“65px”);'可以缩短为:'$(“。sorter td:last-child”)。css({“text-align” “中心”,“填充”:“0”,“线高度”:“0”,“宽度”:“65px”});' –

回答

1

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

.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; 
} 
+0

因为最后一个孩子在CSS中没有与IE 6,IE 7和IE 8一起工作 – Maanstraat

+0

@Maanstraat - 请参阅我的答案中的代码示例。你可以通过使用第一个孩子选择器和相邻的兄弟选择器来做到这一点,而不需要最后一个孩子的选择器。这些选择器是CSS2选择器,可以工作在较旧的br owsers。 – gilly3

+0

你是对的,那是在工作! thnx :) – Maanstraat

0

你需要设置这些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"}); 
+0

嗨ShankarSangoli,我已经把它,但它不会工作。 :-(.. This is working: '$(“#pager .first,#prev.last,#pager .next,#pager.last ,, #pager select”)。click(function(){' 当您选择更多行时,只有选择框不会更新 – Maanstraat

+0

尝试将其更改为$(“#pager img”)。click(function()。sorter td:first-child).css (“width”,“13px”); $(“。sorter td:last-child”)。css({“text-align”:“center”,“padding”:“0” :“0”,“width”:“65px”}); }); –

2

的tablesorter插件的版本2.0.7包括pagerChangepagerComplete事件。如果您使用的是此版本(或者您可以升级),则可以在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"}); 
});