JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<table id="giveData">
    <thead>
        <tr class="pagination"></tr>
        <tr>
            <td>Company Name</td>
            <td>Comments</td>
            <td>Operating Areas</td>
            <td class="skinny">Service</td>
            <td class="skinny">Cost</td>
            <td class="skinny">Info</td>
        </tr>
    </thead>
    <tbody id="locale">

    </tbody>
</table>

<script id="script" type="text/javascript">
    var range = 3,
        products = [];
</script>

JavaScript

function setProducts(sigh) {
    var totalLoop = rowsPerPage,
        loop = 0,
        countCellData = 0,
        currentpage = 0,
        rowsPerPage = 5,
        offset = 0,
        key = 0,
        totalResults = 0;
    products = sigh;
    // get the amount of results
    totalResults = products.length;

    currentpage = currentpage > 0 ? currentpage : 1; // if current page is less than first page...
    /****** start build pagination links ******/
    var totalpages = Math.ceil(totalResults / rowsPerPage),
        // calculate the total pages
        pagination = '',
        lastPage = 0;

    if (totalpages > 1) {
        // fix displayed page number if its bigger then exist
        if (currentpage > totalpages) {
            // set current page to last page
            currentpage = totalpages;
        }
        // set the offset of the list, based on current page
        offset = (currentpage - 1) * rowsPerPage;

        pagination = '<td colspan="6">';
        // set the min page of the list, based on the range 
        var minPage = parseFloat(currentpage) - parseFloat(range);
        minPage = minPage > 0 ? minPage : 1;
        // if not page 1, don't show back links
        if (currentpage > 1) {
            // get previous page num
            pagination += '<span id="' + (currentpage - 1) + '" class="product_button" title="&#9668;Previous" >&#9668;Previous<\/span>';
            // show page 1 only if the min page isn`t page 1 (prevent page 1 to show twice)
            if (minPage > 1) {
                pagination += '<span id="1" class="product_button" title="1" >1<\/span>';
            }
        }

        // loop to show links to range of pages around current page
        for (var x = minPage; x <= (currentpage + range); x++) {
            // validate page number 
            if (x <= totalpages) {
                lastPage = x;
                // if this is current page set its value to 0 (prevent click) and set class as selected
               ...