0

私はjavascript、jquery、AJAXに関する多くのチュートリアルを読んだり見たりしてきましたが、unlim500の人たちのような「フィルター」を作成する方法を理解できないようです。

彼らのスクリプトでは、ブランドをクリックするだけで、テーブルがフィルタリングされて更新されます (ページをリロードする必要はありません)。

このページのライブの例では、Все маркиをクリックしてください: http://www.unlim500.ru/results/

ここに画像の説明を入力

誰かが私を正しい方向に導くことができますか?

どうすればそのようなフィルターを作成できますか?

index.php =

<a id="bugatti_link" href="#" database_id="Bugatti">Bugatti</a>

<script>
$("#bugatti_link").click(load_ajax);

function load_ajax(e) {
    var link = $(e.target); 
    var vehicle_database_id = link.attr("database_id");
    var ajax_params = {"brand": vehicle_database_id};
    $.getJSON("query2.php", ajax_params, success_handler)
}

function success_handler(data) {
    //data variable contains whatever data the server returned from the database.
    //Do some manipulation of the html document here. No page refresh will happen.
}
</script>

query2.php =

<?php
$host = "xx";
$user = "xx";
$db   = "xx";
$pass = "xx";

$pdo = new PDO("mysql:host=" . $host . ";dbname=" . $db, $user, $pass);

$rows = array();
if(isset($_GET['brand'])) {
    $stmt = $pdo->prepare("SELECT brand FROM cars WHERE brand = ? ");
    $stmt->execute(array($_GET['brand']));
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>
4

2 に答える 2

2

リンクした実際のページは、アンカーを使用してJavaScriptへのリンクを作成します。私が過去にこれを行った方法（そしてimoはより簡単な方法）は、同じページを指すhrefなしでリンクを作成し（リロードを回避するため）、リンクにクリックイベントを添付してajax呼び出しをトリガーすることです。

例-HTML-クリックするためのリンク

<a id="bugatti_link" href="#" database_id="2">Bugatti</a>

次にjqueryで

$("#bugatti_link").click(load_ajax);

function load_ajax(e) {
    var link = $(e.target);
    var vehicle_database_id = link.attr("database_id");
    var ajax_params = {"id": vehicle_database_id};
    $.getJSON("the/url/to/the/database/view", ajax_params, success_handler)
}

function success_handler(data) {
    //data variable contains whatever data the server returned from the database.
    //Do some manipulation of the html document here. No page refresh will happen.
}

サーバーでGETリクエストを受信します。このリクエストにthe/url/to/the/database/viewは、値が「2」の「id」というパラメータが含まれているため、行2で車両をフェッチし、その車両から必要なデータを返すことができます。

うまくいけば、通常のリンクをajaxローダーに変換する方法についての洞察が得られます。ajaxローダーは、ページをリロードせずに更新するために使用できます。

この種のものに関するいくつかの有用なリンク：

于 2012-07-08T00:29:34.967 に答える
0

並べ替え機能にはjqueryプラグインを使用できます。その1つがテーブルソータープラグインです

あなたがしなければならないのは、jqueryとtablesorter.jsをダウンロードして、それらをあなたのページに含めることです。以下のコードは、実行しているファイルと同じフォルダーにjqueryとtablesorterがあることを前提としています。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="tablesorter.js"></script>

テーブルにIDを追加します。

<table id="myTable">

次に、ドキュメントのロード時にテーブルソーターを使用します。

<script>
$(function(){
 $("#myTable").tablesorter(); 
});
</script>
于 2012-07-08T00:54:28.677 に答える