0

多くのフィールドを持つデータベースがあります。ユーザーが複数のフィールドでフィルタリングできるようにしたい。Javascript の実装 (jQuery なし) と、おそらく jQuery も探しています。私が目指しているのは、html、php、js のみでテーブル ヘッダーにフィルターを適用し、データベースとして mySQL を使用する場合に Excel が提供する関数です。

これまでの私のフローは次のとおりです。

  1. PHP は、個別のフィールドのドロップダウンを作成します。例:

    オプション値=\"".$row[$filterby]."\">" ....

  2. ユーザーがアイテムを選択すると、「onChange」が JS 関数を呼び出して検索文字列を作成します。

    ?果物=りんご&色=緑

私が抱えている問題は、テーブルを更新するために、JS で別の PHP ページを呼び出す必要があることです (window.location = "filtered.php" + searchString; を使用)。

コードは 1 つのフィールドに対して機能しますが、複数のフィールドをフィルター処理する場合、新しいページには渡したばかりの記憶がありません。

私の質問は 2 つあります。

  1. 私はこれについて完全に間違っていますか？私が目指しているものを生み出す最良の方法は何ですか？
  2. これは JQuery または AJAX なしで可能ですか?

編集：

わかりやすくするためにビジュアルを追加すると思いました。

+----+--------+----------+
| id | Fruit  | Color    | 
+----+--------+----------+
| 1  | apple  | red      | 
| 2  | mango  | yellow   | 
| 3  | banana | yellow   | 
| 4  | apple  | green    | 
+----+--------+----------+

filter.php?fruit=りんご&color=緑

+----+--------+----------+
| id | Fruit  | Color    | 
+----+--------+----------+
| 4  | apple  | green    | 
+----+--------+----------+

EDIT2：

php ですべてのデータを取得し、フィルターで html データを更新するだけの方がよいでしょうか? または、ドロップダウンが変更されるたびにJSがDBにクエリを実行するようにする必要がありますか?

4

2 に答える 2

0

私が探していたものを見つけました：

http://www.javascripttoolbox.com/lib/table/examples.php

純粋なJSフィルタリングメソッドの良い例がたくさんあります。私はこれらを私のソリューションに使用しようとします（誰かがより良いものを持っていない限り）。

于 2013-03-19T20:11:54.333 に答える
-1 
function price_filter(str)
{       
    var subcategory = new Array();
    $('input[type="radio"]:checked').each(function(){subcategory.push($(this).val());});
    alert (subcategory);
    alert(subcategory.length);
    var price1 = str;
    if(subcategory.length == '0')
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {       

            if(xmlhttp.readyState == 4)
            {     
                document.getElementById("pri_fil").innerHTML = xmlhttp.responseText;    
            }
        };

        xmlhttp.open("GET","search.php?price=" + price1,true);
        xmlhttp.send(); 
    }   
    else
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4)
            {
                document.getElementById("pri_fil").innerHTML = xmlhttp.responseText;    
            }
        };

        xmlhttp.open("GET","search.php?price=" + price1 + "&subcategory=" + subcategory,true);
        xmlhttp.send();         
    }
}
于 2016-10-12T10:24:19.973 に答える