PHPとJavascript間の通信

Question

データベースに2つの列を持つテーブルがあります。名前|年齢、私はそれをHTMLページに表示します。

ユーザーがクリックしたときにフィールドに基づいてHTMLページでテーブルを並べ替える必要があります。

フィールドに基づいてソートを行うPHP関数があります。

しかし、PHPでソート順で行を取得した後、ページから移動せずにHTMLテーブルを更新できる方法を探しています。

Answer 1

サーバーと通信することなく、JavaScriptで並べ替えを行うことができます。例えば、このコードは、N番目のカラムの内容に基づいてテーブルをソートします：

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); 
    } 
} 

例えば、最初の列に、ドキュメント内の最初のテーブルをソートし、ヘッダー行をスキップする：

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

明らかに、これは自分の好み、特にソートに合わせて変更することをお勧めしますが、データをサーバーに投稿するよりもずっと簡単です。提案していると思います。

Answer 2

これを行うには、クライアントとサーバーの間で通信する必要はありません。クライアント上のテーブルを直接並べ替えるだけです。

jQueryのプラグインで、このために非常にうまく機能があります：ここでは

http://tablesorter.com/docs/

Answer 3

は、あなたのテーブルは、PHPの代わりにJavaScriptを使用してソート可能にするJavaScriptライブラリへのリンクです。私は何度もそれを使用しました、それは素晴らしい動作します。他人以来

Javascript Sortable Tables by: Stuart Langridge

Answer 4

クライアント側のソートがここでうまく動作します、私はこの種のものをやって最も成功事例のを持っていたこれでリソースにあなたをちょうどポイントだろうという事実をカバーしています： Google Data Tables、その一部はVisualization Libraryです。 Here are the deetsあなたができること（スポイラー：あなたが望むものすべて）。