Benutzerdefinierte filter zu Datatable

Ich versuche, meine eigenen filter, um die Daten in der Tabelle, zweite Spalte. Hier unten ist mein code.

<!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>

Der filter ist in Ordnung, die in der ersten Seite. Aber wenn der filter angewendet wird für die gesamte Tabelle, wenn der Artikel vorhanden in der ersten Seite der Tabelle, es filtert bestimmte Zeile in der Tabelle. Aber wenn der Artikel auf der nächsten Seite der Tabelle , der filter wird nicht angewendet. kann irgend jemand mir helfen um dieses Problem zu lösen?

In myFunction können Sie sich anmelden tr.length ? Es hat meist zu tun mit, wenn Sie die fetch-Tabelle alle Zeilen in table.getElementsByTagName("tr") es nicht abrufen, alle Zeilen der Tabelle, da datatable.css verbirgt sich der rest der Tabelle Zeilen
ja. was Sie gesagt haben, ist richtig.

InformationsquelleAutor techhunter | 2016-10-28

1

Dies ist, weil der rest der Tabelle ist nicht verfügbar, um den dom, müssen Sie filtern diese mit der datatables-API. Irgendwie verwirrend, aber datatables in der Regel lädt jede Seite, wie es genannt wird, zu sparen overhead. Sie können nicht durchsuchen Sie die gesamte Datentabelle mit nur jquery (es sei denn, die gesamte Tabelle wird auf Ihrer Seite dargestellt), müssen Sie die API verwenden,

Jedoch datatables hat eine super Coole regex-filter-Suche, die Sie anwenden können,

Hier ist ein Ausschnitt von einem Stück code, das kann helfen. Obwohl wir vielleicht unterschiedliche Versionen (dataTable vs 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(); 

       }
     });
```
Hier ist ein link, um die Datentabellen search API:

https://datatables.net/examples/api/regex.html
- Es ist so erstaunlich,. ich danke Ihnen so sehr.
InformationsquelleAutor rob

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.