如何按引导表中的某些列进行过滤？

Question

I have a table with one column called gender, and only have two values: male and female.

What I want is a select above the table, when I select male, only rows with gender column equals to male shows.

How to do it in bootstrap-table? cannot find any similiar examples.

Answer 1

function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    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";
       }
     }       
   }
}

In the code that w3schools provided here the only thing that you need is to change the number in the td = tr[i].getElementsByTagName("td")[1]; to the number of the column that you need.

Answer 2

您应该使用DataTables，它具有所有功能： https : //datatables.net/examples/styling/bootstrap.html