2011-08-15 114 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"}); 
});