如何使用圖像對錶進行排序jquery tablesorter

我試圖對錶列進行排序，不管它是否包含img。所以我的表格html看起來像這樣：如何使用圖像對錶進行排序jquery tablesorter

<table> 
<thead> 
<th>One</th><th>Two</th><th>Three</th> 
</thead> 
<tbody> 
<tr> 
<td><span class="raw"><img src="path/to/image.png" /></span></td> 
<td><span class="raw">text 1</span></td> 
<td><span class="raw">text 2</span></td> 
</tr> 
<tr> 
<td><span class="raw"></span></td> 
<td><span class="raw">text 4</span></td> 
<td><span class="raw">text 5</span></td> 
</tr> 
<tr> 
<td><span class="raw"><img src="path/to/image.png" /></span></td> 
<td><span class="raw">text 22</span></td> 
<td><span class="raw">text 111</span></td> 
</tr> 
</tbody> 
</table>

我該如何對錶結構進行排序呢？隨着排序之中，在頂部或底部，反之亦然與圖像列的最終結果

我使用這個插件：

http://tablesorter.com/docs/

來源

2013-01-10 Gandalf StormCrow

的數據表插件可能是你一個很好的解決方案。它有很多很棒的功能，開箱即用，它有一個自定義的排序插件--- http://www.datatables.net/plug-ins/sorting – Batfan

@Batfan謝謝，我沒有奢侈的在這個時候選擇新的插件，我只需要使它工作 –

$("table").tablesorter().on("sortStart",function() { 
        //prepend a sortable string before the image 
      }).on("sortEnd",function() { 
        //remove added string 
     });

來源

2013-01-10 17:22:09 mikakun

最簡單的事情將添加隱藏內容的圖像細胞（demo）：

$(function() { 
    $('table img').each(function() { 
    $(this).after('<span style="display:none">1</span>'); 
    }); 

    $('table').tablesorter(); 
});

而且，因爲它看起來像你正在做的字母排序，你米ight想試試我的fork of tablesorter。它將在「文本4」之後正確地對「文本22」進行排序。

來源

2013-01-10 20:01:38 Mottie

＆在乾淨和快速的jquery中將變成$（「table」）。tablesorter（）。find（「img」）。after（'雖然使用由tablesorter提供的事件會使dom更輕（例如，如果其他函數使用了表對象，那麼您可能不想處理那些額外的跨度）每一次 – mikakun

@mikakun使用事件前置/刪除元素的唯一問題是，如果表格很龐大，那麼每個單元格都會得到一個DOM操作，使排序變得更慢。老實說，我認爲最好的解決方案是解析img單元格數據，但是你再也不能使用原始版本的tablesorter來完成了呃，你可以從解析器中訪問單元格內容 - 參見format函數：'format：function（s，table，cell，cellIndex）'（[demo]（http://mottie.github.com/tablesorter/docs） /example-parsers-advanced.html）） – Mottie

那麼這不是問題，因爲我們正在討論網頁上的表格;一張巨大的桌子的問題將是「爲什麼在網頁上添加巨大的桌子？」 JavaScript有處理巨大的數據和用戶交互和追加到只有需要顯示的東西 – mikakun

的tablesorter是一個偉大的插件 - 你可以通過定義自己的文字提取功能這樣的「ALT」文字排列圖像：

不包含圖像

$("#table_id").tablesorter({ 
    textExtraction:function(s){ 
     if($(s).find('img').length == 0) return $(s).text(); 
     return $(s).find('img').attr('alt'); 
    } 
});

細胞將被排序文本。

（*）增光jQuery forum這個答案

來源

2013-03-05 17:24:14 Nimo

如何使用圖像對錶進行排序jquery tablesorter

回答

相關問題