2012-06-26 10 views
5

urlの検索パラメータ値を渡すデータテーブルを持つページへのリンクを作成したいと考えています。目指すのは、検索可能なデータテーブルを開いて、検索値パラメータで事前にフィルタリングしておくことです。Datatables - URLに検索パラメータを渡す方法

jsfiddleを設定して、いくつかのサンプルデータを扱うようにしました。
http://jsfiddle.net/lbriquet/9CxYT/10/

アイデアは、ページが「Firefoxの」、例えば、唯一の検索の一致を示すために、フィルタテーブルに設定された検索入力値を表示するであろうようにjsfiddle URLにパラメータを追加することです。

本当にありがとうございます!

答えて

4

単純にhave a function that reads your URLと入力してテーブルをフィルタリングすることができます。私はあなたがこれは古い質問ですが、解決策を検索するとき、それは依然として高いポップアップ表示検索として、ここでhttp://fiddle.jshell.net/9CxYT/17/show/?q=Firefox

+0

これは、適切なソリューションのように聞こえる...しかし、私はそれを動作させることができませんでした。ここで私はあなたのコードを統合しようとしたのjsfiddleです...おそらく私は正しくそれについては行っていないのですか?すべてのエントリを非表示にします。 http://jsfiddle.net/lbriquet/9CxYT/14/ – lbriquet

+1

jsfiddleデザインフレームは、スタンドアロンページ(iframeではなく)として見ることができます。これを行うには、デザインフレームを右クリックし、[このフレーム]を選択し、[新しいタブでフレームを開く]を選択します。 これはページを次のように読み込みます: http://fiddle.jshell.net/lbriquet/9CxYT/14/show/ URLに「q」値を追加しようとしましたが、検索に自分の値が追加されませんでしたフィルタを適用するか、値を含む行を表示します。 http://fiddle.jshell.net/lbriquet/9CxYT/14/show/?q=firefox 私が間違っていることを理解するのを助けることができますか? – lbriquet

+1

@lbriquetはjsfiddleのその機能について知らなかった。とにかくそれは吸い込まれたgetUrlVars関数でした。今は動作します。私は私の答えを更新しました –

3

// Read a page's GET URL variables and return them as an associative array. 
function getUrlVars() 
{ 
var vars = {}; 
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
     vars[key] = value; 
    }); 
    return vars; 

} 

$(document).ready(function() { 
    // Get the query from the url 
    var query = getUrlVars()['q']; 
    // create the table 
    var oTable = $('#example').dataTable(); 
    // Filter it 
    oTable.fnFilter(query, 2); 
}); 

フィドルをQ = Firefoxのを渡すことを想像してみてください。ここで私はそれを動作させるために何をしたのですか?

$(document).ready(function() { 
 
    
 
    // First, get the search parameter. Here I use example.com#search=yourkeyword 
 
    var searchHash = location.hash.substr(1), 
 
     searchString = searchHash.substr(searchHash.indexOf('search=')) 
 
\t \t     .split('&')[0] 
 
\t \t     .split('=')[1]; 
 
    
 
    
 
    $('#example').dataTable({ 
 
    "oSearch": { "sSearch": searchString } 
 
    }); 
 
})

関連する問題