Datatableへのカスタムフィルタ

自分のフィルタをデータテーブルの2番目の列に追加しようとしています。以下は私のコードです。Datatableへのカスタムフィルタ

<!doctype html> 
<html> 
<head> 
    <style> 
table{ 
border:1px solid blue; 
} 
tr{ 
border:1px solid blue; 
} 
td{ 
border:1px solid blue; 
} 
tfoot input { 
     width: 100%; 
     padding: 3px; 
     box-sizing: border-box; 
    } 
</style> 
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
<script> 
// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html 
$(document).ready(function(){ 
    var table = $('#mine').DataTable(); 

$('#mine tfoot th').each(function() { 
     var title = $(this).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
    }); 

$('#myInput').keyup(function() { 
     table.draw(); 
    }); 
}); 
</script> 
<script> 

function myFunction() { 
    // Declare variables 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("mine"); 
    tr = table.getElementsByTagName("tr"); 

    // Loop through all table rows, and hide those who don't match the search query 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[1]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
     } 
    } 
    } 

</script> 
</head> 
<body> 
<table border="0" cellpadding="5" cellspacing="5"> 
<tbody><tr> 
<td>ade:</td><td> 
<input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
</td></tr> 
</tbody></table> 
    <table id="mine" class="display" width="100%" cellspacing="0"> 
<thead> 
<th>a</th> 
<th>a</th> 
<th>a</th> 
<th>a</th> 
<th>a</th> 
<th>a</th> 
</thead> 
<tfoot> 
      <tr> 
       <th>a</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
<tbody> 
<tr><td>saf</td> 
<td>saf</td> 
<td>saf</td> 
<td>saf</td> 
<td>saf</td> 
<td>saf</td></tr> 
<tr><td>a</td> 
<td>q</td> 
<td>saf</td> 
<td>b</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>q</td> 
<td>b</td> 
<td>saf</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>q</td> 
<td>b</td> 
<td>b</td> 
<td>saf</td> 
<td>c</td></tr> 
<tr><td>saf</td> 
<td>saf</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>c</td> 
<td>a</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>saf</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>saf</td></tr> 
<tr><td>a</td> 
<td>saf</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>saf</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>saf</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>b</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
<tr><td>a</td> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
<td>b</td> 
<td>c</td></tr> 
</tbody> 
</table> 

</body> 
</html>

最初のページでフィルタが正常に動作しています。しかし、フィルタがテーブル全体に適用された場合、テーブルの最初のページに存在するアイテムは、特定のテーブル行をフィルタリングします。しかし、項目が表の次のページにある場合、フィルターは適用されません。誰も私がこれを解決するのに役立つことができますか？

出典

2016-10-28 techhunter

myFunction' 'であなたは' tr.length'を記録することができますか？ 'table.getElementsByTagName（" tr "）'ですべてのテーブル行をフェッチするときは、通常、 'datatable.css'が残りのテーブル行を隠すので、すべてのテーブル行をフェッチしません。 –

@Arvind yes。あなたが言ったことは正しいです。 – techhunter

これは、テーブルの残りの部分がdomで使用できないためです。これをdatatables APIでフィルタリングする必要があります。混乱の種ですが、データテーブルは通常、オーバーヘッドを節約するために、呼び出されるごとに各ページを読み込みます。（テーブル全体があなたのページに表示されていない限り）あなたはjQueryを使って全体のデータテーブルを検索することはできません、あなたはしかし、API

を使用する必要があります、DataTableのは、あなたが

を適用することができ、超クールな正規表現フィルタの検索を持っています

ここには、役立つコードからのスニペットがあります。我々は（DataTableの対のdataTable）異なるバージョンを使用している可能性がありますがここで

var search_text = [search text] 
var table = $('[table selector]').dataTable().api(); 
     if (search_text){ 
     table 
      .columns(3) 
      .search('[REGEX SEARCH TEXT]', true, false) 
      .draw(); 
     } 
    else{ 
     table 
      .columns() 
      .search('') 
      .draw(); 

     } 
    });

は、DataTableの検索APIへのリンクです：

https://datatables.net/examples/api/regex.html

出典

2016-10-28 15:54:31 rob

それはとても素晴らしいです。どうもありがとうございます。 – techhunter

Datatableへのカスタムフィルタ

答えて

関連する問題