使用jQuery對錶格排序

我已經找到並按照此處的示例對錶格進行排序，但不起作用。這裏是我的代碼：使用jQuery對錶格排序

function comparer(index) { 
return function (a, b) { 
    var valA = getCellValue(a, index), valB = getCellValue(b, index); 
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB); 
} 
} 

function getCellValue(row, index) { 
return $(row).children('td').eq(index).html(); 
} 

function sortTable(header) { 
var table = $(this).parents('table').eq(0); 
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())); 
this.asc = !this.asc; 
if (!this.asc) { 
    rows = rows.reverse(); 
} 
for (var i = 0; i < rows.length; i++) { 
    table.append(rows[i]); 
} 
} 

function createTableHeader(table, headers, alignment) { 
if (headers.length > 0) { 
    var thead = document.createElement('thead'); 
    table.appendChild(thead); 
    var tr = document.createElement('tr'); 
    for (var i = 0; i <= headers.length - 1; i++) { 
     var th = document.createElement('th'); 
     var text = document.createTextNode(headers[i]); 
     th.appendChild(text); 
     th.style.textAlign = alignment; 
     th.setAttribute('onclick', sortTable) 
     tr.appendChild(th); 
    } 
    thead.appendChild(tr); 
} 
}

無任何響應，然而，當我看到的細節，我可以看到連接到TH元素的功能。有任何想法嗎？

這個事實，我正在動態地創建這個表與從AJAX調用收到的數據有什麼關係的問題？

來源

2014-09-29 Dean.DePue

的方法給click處理程序綁定到元素不會有以下幾個原因工作。 'onclick'應該是最後的手段。閱讀事件處理 – charlietfl 2014-09-29 10:31:52

有沒有必要重新發明輪子，當有插件可以做這項工作:) http://tablesorter.com/docs/ – Terry 2014-09-29 10:34:35

@charlietfl我該怎麼做這種排序不使用頭部的點擊事件？ – 2014-09-29 10:49:32

這裏是我做過什麼，使其工作：

function createTableHeader(table, headers, alignment) { 
if (headers.length > 0) { 
    var thead = document.createElement('thead'); 
    table.appendChild(thead); 
    var tr = document.createElement('tr'); 
    for (var i = 0; i <= headers.length - 1; i++) { 
     var th = document.createElement('th'); 
     var text = document.createTextNode(headers[i]); 
     th.appendChild(text); 
     th.style.textAlign = alignment; 
     th.style.cursor = 'pointer'; 
     th.setAttribute('title', "Sort by " + headers[i]); 
     th.onclick = function() { 
      var rows = $(table).find('tbody').find('tr').toArray().sort(comparer($(this).index())); 
      this.asc = !this.asc; 
      if (!this.asc) { 
       rows = rows.reverse(); 
      } 
      for (var i = 0; i < rows.length; i++) { 
       $(table).append(rows[i]); 
      } 
     } 
     tr.appendChild(th); 
    } 
    thead.appendChild(tr); 
} 
}

來源

2014-09-29 13:33:01

使用jQuery對錶格排序

回答

相關問題