JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Client-side-HTML-Table-Pagination-Plugin-with-jQuery-Paging/paging.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">
    <input class="search" placeholder="Search" />
    <button class="sort" data-sort="name">Sort by name</button>
    <table id="testTable">
        <!-- IMPORTANT, class="list" have to be at tbody -->
        <tbody class="list">
            <tr>
                <td class="name">Jonny Stromberg</td>
                <td class="born">1986</td>
            </tr>
            <tr>
                <td class="name">Jonas Arnklint</td>
                <td class="born">1985</td>
            </tr>
            <tr>
                <td class="name">Martina Elm</td>
                <td class="born">1986</td>
            </tr>
            <tr>
                <td class="name">Gustaf Lindqvist</td>
                <td class="born">1983</td>
            </tr>
            <tr>
                <td class="name">Gustaf Lindqvist</td>
                <td class="born">1983</td>
            </tr>
            <tr>
                <td class="name">Gustaf Lindqvist</td>
                <td class="born">1983</td>
            </tr>
            <tr>
                <td class="name">Gustaf Lindqvist</td>
                <td class="born">1983</td>
            </tr>
            <tr>
                <td class="name">Gustaf Lindqvist</td>
                <td class="born">1983</td>
            </tr>
            <tr>
                <td class="name">Gustaf Lindqvist</td>
                <td class="born">1983</td>
            </tr>
            <tr>
                <td class="name">Gustaf Lindqvist</td>
                <td class="born">1983</td>
            </tr>
            <tr>
                <td...

JavaScript

$.widget('zpd.paging', $.zpd.paging, {
    updatePaging: function () {
        var num = 0;
        var limit = this.options.limit;
        var rows = $('.list tr').show().toArray();
        var nav = $('.paging-nav');
        nav.empty();
        for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
            this._on($('<a>', {
                href: '#',
                text: (i + 1),
                    "data-page": (i)
            }).appendTo(nav), {
                click: "pageClickHandler"
            });
        }
        //create previous link
        this._on($('<a>', {
            href: '#',
            text: '<<',
                "data-direction": -1
        }).prependTo(nav), {
            click: "pageStepHandler"
        });
        //create next link
        this._on($('<a>', {
            href: '#',
            text: '>>',
                "data-direction": +1
        }).appendTo(nav), {
            click: "pageStepHandler"
        });
        
        for (var i = 0; i < rows.length; i++) {
            if (i >= limit * num && i < limit * (num + 1)) {
                $(rows[i]).css('display', this.options.rowDisplayStyle);
            } else {
                $(rows[i]).css('display', 'none');
            }
        }
        return nav;
    }


})

var options = {
    valueNames: ['name', 'born']
};

var userList = new List('users', options);

userList.on('searchComplete', function () {
    $('#testTable').paging('updatePaging');
});

$('#testTable').paging({
    limit: 5
});