2011-01-13 267 views
0

我有一個數據庫中有2列的表名稱|年齡,我將其顯示在HTML頁面中。PHP和Javascript之間的溝通

我想在用戶點擊它時根據字段對HTML頁中的表進行排序。

我有一個PHP函數來根據字段進行排序。

但是,在PHP中按照排序順序獲取行之後,我正在尋找可以更新HTML表格的方式,而無需從頁面導航。

+0

AJAX是如何在PHP和Javascript之間進行通信的,但是如果你想節省麻煩,就有用於排序表的Javascript函數; PHP不是必需的。 – Jake 2011-01-13 17:40:39

回答

1

你可以在javascript中進行排序,而不必與服務器通信。

function sortTable(table, column, skipHeader) { 
    // Stick each row into an array. 
    var rows = []; 
    for (var i = skipHeader ? 1 : 0; i < table.rows.length; i++) { 
    rows.push(table.rows[i]); 
    } 

    // Sort the array based on the innerText of the column'th cell in each row 
    rows.sort(function(a, b){ 
    a = a.cells[column].innerText; 
    b = b.cells[column].innerText; 
    return a < b ? -1 : (b < a ? 1 : 0); 
    }); 

    // Re-order the rows by removing/appending in the sort order 
    for (var i = 0; i < rows.length; i++) { 
    var row = rows[i]; 
    var container = row.parentElement; 
    container.removeChild(row); 
    container.appendChild(row); 
    } 
} 

例如,到第一表進行排序在文檔中,在第一列上,並跳過標題行::例如,該代碼將根據第N列的內容進行排序的表

sortTable(document.getElementsByTagName('table')[0], 0, true); 

很明顯,你會想要修改這個以適應你自己的口味,特別是排序,但它比把數據發回服務器要簡單很多,我認爲這是你提出的。

4

您不需要在客戶端和服務器之間進行通信來完成此操作,只需對客戶端上的表進行直接排序即可。

有一個jQuery插件,這是工作得很好:

http://tablesorter.com/docs/