クリック可能な列で同じページ内の値を検索する方法

Question

http://datatables.net/examples/api/tabs_and_scrolling.htmlこの例の は2つのテーブルを持ち、Table2は独自の検索ページです。 <a hrefのようなページを作って、それをクリックすると、自動的に値を取る検索ボタンになります。

>$(document).ready(function() { 
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
      $.fn.dataTable.tables({visible: true, api: true}).columns.adjust(); 
     }); 

     $('table.table').DataTable({ 
      ajax:   '../ajax/data/arrays.txt', 
      scrollY:  200, 
      scrollCollapse: true, 
      paging:   false 
     }); 


    // Apply a search to the second table for the demo 
$('#myTable2').DataTable().search('New York').draw(); }); 

このjQueryのは、その行

を持って

$（ '＃myTable2'）のDataTable（）検索（ 'ニューヨーク'）.draw（）。。。 }）;

私はそれがクリッカブルたいと私はあなたがおそらく#myTable1の<td>要素にクリックハンドラを追加する必要があります時間

Answer 1

のための任意の例を見つけることができませんでした。クリックされた要素の値を取り、第二のテーブルを作成するための関数を書く、そして、

for(var ix = 0, length = elements.length; ix < length; ix++) { 
    elements[ix].addEventListener('click', onElementClick); 
} 

：クリックリスナーをそれらを通して

var elements = document.querySelectorAll('#myTable1 > td'); 

ループおよび追加：

の要素を選択します。

function onElementClick() { 
    $('#myTable2').DataTable().search(this.value).draw(); }); 
} 

これは完全にテストされていないため、おそらく間違いが2つありますが、それは確かです私はDataTablesのすべてのドキュメントを読むのが面倒すぎるので、何を試してみるか：D

私はいくつかのバグがありました。 JS BinでJavaScriptを次のように変更してください：

$(document).ready(function() { 
    var table = $('#example').DataTable(); 

    $("#search").click(function() { 
    table.search("rhona").draw(); 
    }); 

    var elements = document.querySelectorAll('#example td'); 

    for(var ix = 0, length = elements.length; ix < length; ix++) { 
    elements[ix].addEventListener('click', onElementClick); 
    } 

    function onElementClick() { 
    table.search(this.innerText).draw(); 
    } 
});