How to link esimakin pagination with my table?

Question

I am trying to use the esimakin jQuery Pagination plugin to break my table up into multiple pages because it is getting its data from an ever growing database. However my pagination bar does not:

1. Split table into pages

2. Change pages when I click next or previous.

Any advice would be much appreciated.

HTML:

<div class="table-responsive">
                <div class="form-group pull-right">
                    <input type="text" id="myInput" onkeyup="filterTable()" class="search form-control" placeholder="Filter Table">
                </div>
                <div class="form-group pull-left">
                    <a href='#' class="btn btn-sm btn-primary" onClick="loadDraft();">Load Selected</a>
                </div>
                <table id="draftTable"  class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th data-field="radio"></th>
                            <th data-field="bulletin_id">Bulletin ID</th>
                            <th data-field="event">Event</th>
                            <th data-field="badge_num">Badge Number</th>
                            <th data-field="AYEAR">Year</th>
                        </tr>
                        <tbody>
                        </tbody>

                    </thead>

                </table>

            </div>
        <ul id="pagination" class="pagination-sm pull-right"></ul>

    </div>
</div>

JS:

<script>
    $(document).ready(function(){
        populateTables('S');  
    });

    function populateTables(res){
        console.log(res)
        $.getJSON("bulletinListJSON.asp", {res:res}, function(data){
        }).done(function( data ) {
        for (var i=0;i<=data.length;i++){
            var draftData = "<tr><td><input type=radio value="+ i + " name=load id=load /></td><td>" + data[i].BULLETIN_ID + "</td><td>" + decodeURIComponent(data[i].EVENT) + "</td><td>" + data[i].BADGE_NUM + "</td><td>" + data[i].AYEAR + "</td></tr>";
            $('#draftTable').find('tbody').append(draftData);

        }
        });
    }

    function filterTable(event) {
        var filter = event.target.value.toUpperCase();
        var rows = document.querySelector("#draftTable tbody").rows;

        for (var i = 0; i < rows.length; i++) {
            var firstCol = rows[i].cells[1].textContent.toUpperCase();
            var secondCol = rows[i].cells[2].textContent.toUpperCase();
            var thirdCol = rows[i].cells[3].textContent.toUpperCase();
            var fourthCol = rows[i].cells[4].textContent.toUpperCase();

            if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1 || thirdCol.indexOf(filter) > -1 || fourthCol.indexOf(filter) > -1) {
                rows[i].style.display = "";
            } else {
                rows[i].style.display = "none";
            }      
        }
    }
    document.querySelector('#myInput').addEventListener('keyup', filterTable, false);

    $("#draftTable tr").click(function(){
       $(this).addClass('selected').siblings().removeClass('selected');    
       var value=$(this).find('td:second').html();
       alert(value);    
    });

    $('.ok').on('click', function(e){
        alert($("#table tr.selected td:first").html());
    });

    //Pagination 
       $('#pagination').twbsPagination({
            totalPages: 35,
            visiblePages: 7,
            items: 20,
            itemOnPage: 8,

        });


</script>

Answer 1

The twbs-pagination plugin provides an onPageClick callback option; you'll need to implement that.

You could also dynamically set the total number of page based on the length of the response data.

A snippet from a simple gist based on your situation.

function setContent( page ) {
   // generate markup to display
   $('#page-content').html(data[page]);
}

$('#pagination').twbsPagination({
  totalPages: data.length, // from $.ajax response
  visiblePages: 7,
  onPageClick: function (event, page) {
     setContent(page);
  }
});

Answer 2

search in google: jq dataTables

Wery nice table. Search, Download (Excel, word, pdf), order column, server side or cliend side run, more more....

İm use this. 15 million rows.