Filtering an html table containing several pages

I am new in javascript and I would like to filter the first column of my HTML table. This my table is having 1075 pages, and my javascript code is searching project name only on the current page instead of the whole pages of the table. I don’t know how to do it.

<script type="text/javascript">
    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("table1");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {

            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
            txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                 } else {
                    tr[i].style.display = "none";
      }
    }
  }
}

</script>

My table

Please assist me.

Answer

If you don’t mind using a third party library, using Datatables will provide a quick robust solution for you. Get datatables from here https://datatables.net/

Once included in your project, it will automatically create filters on every column and also include a search column for you.

Initialize it on your table by calling

$(document).ready( function () {
    $('#myTable').DataTable();
} );

Note: Datatables requires jquery. For your convenience, you can include jquery when downloading Datatables.