javascript - 如何通过可点击的列在同一页面中搜索值

Question

http://datatables.net/examples/api/tabs_and_scrolling.html 在此示例中，有两个表，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().search( 'New York' ).draw(); } );

我希望它可点击，但我几个小时都找不到任何示例

Answer 1

您可能需要向 <td> 添加一个点击处理程序#myTable1 的元素。

选择元素:

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

循环它们并添加点击监听器:

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

然后，编写一个函数来获取单击元素的值并创建第二个表:

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

这完全未经测试，我可能有一两个错误，但这可能是我会尝试的，因为我懒得阅读所有 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();
  }
});