谁能帮我为我的数据表添加Javascript分页

Question

My datatable right now has script that filters the name of the table. I'm really hoping that you guys can help me add the pagination script on my current script right now.

I badly need help on this one. Hoping for a response on the additional JS :( thank you so much! I will highly appreciate the help.

JS

    function filterBar() {
        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")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

My DataTable

Filter:

<table id="myTable">
    <thead>
        <tr>
            <th style="width: 60%;">English</th>
            <th style="width: 40%;">Other Language</th>
            <th style="width: 30%;">Status</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
    </tbody>
</table>


        Showing <span id="minEntry">0</span> to <span id="maxEntry">0</span>
        of <span id="totalEntries">0</span> entries
        <ul class="pagination">
            <li><a href="#" class="previousPage">Newer</a></li>
            <li><a href="#" class="previousPage">&lt;</a></li>
            <li><a href="#" id="currentPage" class="page-number">1</a></li>
            <li><a href="#" class="nextPage">&gt;</a></li>
            <li><a href="#" class="nextPage">Older</a></li>
        </ul>

Answer 1

Have you heard about DataTables Table plug-in for jQuery ?

It is a very simple and easy way to add search and pagination facility in your table.

You just need to add their js and CSS files and call:

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

Visit their website for more help.