JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<div class="table-responsive">
            <table id="SearchTable" class="paginated table table-bordered table-striped table-hover table blue">
    <tr>
        <th></th>
        <th>Report Detail</th>
        <th>Form</th>
        <th>Attachments</th>
        <th>Result</th>
        <th> Report No.</th>
        <th>Report Date</th>
        <th>Form No.</th>
    </tr>
    <tr>
        <td class="reportManager">123</td>
        <td class="reportDetail">some</td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager"></td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager"></td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager">123</td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
</table>
        <div class="pagination pagination-lg">
            <ui><button class="btn btn-primary"><ahref="#" style="color: white">Previous</ahref></button></ui>
            <ui><button class="btn btn-primary"><ahref="#"...

JavaScript

$('td', 'table').each(function(i) {
    $(this).text(i+1);
});



$('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 2;
    var $table = $(this);
    $table.bind('repaginate', function() {
        $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });
    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('<div class="pagination pagination-lg"></div>');
    for (var page = 0; page < numPages; page++) {
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
            newPage: page
        }, function(event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager).addClass('clickable');
    }
    $pager.insertAfter($table).find('span.page-number:first').addClass('active');
});