JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<head>
<script type="text/javascript"> 
var range = 3, // num page links to show
    rowsPerPage = 5,
    currentpage = 0,
    sortBy = '',
    products = [
{"haulier_id":"1","company_name":"AV Dawson Ltd","address_1":"North Sea Supply Base","address_2":"Riverside Park Road","address_3":"Riverside Park Industrial Estate","town_id":"346","county_id":"27","area_id":"4","postcode":"TS2 1UT","tel_no":"01642256820","fax_no":"01642256828","email":"[email protected]","town_city":"Middlesbrough","county":"Cleveland","area":"North East","level_id":"1","service_rating":"2","cost_rating":"2","comments":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam justo arcu, placerat a blandit ac, ultricies sit amet nisi. Proin sed eros odio. Maecenas at porttitor justo. Nulla tempus, ante sit amet hendrerit convallis, mauris nunc ornare diam volutpat.","service_areas":"NE,NW","services_id":"1","express_svc":"1","palletline_svc":"1","groupage_svc":"1","fullload_svc":"1","abnormal_svc":"1","hiabcrane_svc":"1","container_svc":"1","vehicles_id":"1","flatbed_veh":"1","abnormal_veh":"1","container_veh":"1","curtainside_veh":"1","express_veh":"1","craneage_veh":"1"},{"haulier_id":"2","company_name":"Test Haulier 1","address_1":"Test address line 1","address_2":"test address line 2","address_3":"test address line 3","town_id":"346","county_id":"27","area_id":"4","postcode":"TS2 1UT","tel_no":"01642245550","fax_no":"01642240450","email":"[email protected]","town_city":"Middlesbrough","county":"Cleveland","area":"North East","level_id":"2","service_rating":"3","cost_rating":"3","comments":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam justo arcu, placerat a blandit ac, ultricies sit amet nisi. Proin sed eros odio. Maecenas at porttitor justo. Nulla tempus, ante sit amet hendrerit convallis, mauris nunc ornare diam...

CSS

/*
I need to do two things:
    - incorporate the local variables into the function(s), if possible, so that I
      wouldn't have to include them in the page
    - insert a JSON array returned from PHP using AJAX to the products variable within
*/

JavaScript

function setProducts() {
    currentpage = currentpage > 0 ? currentpage : 1; // if current page is less than first page...
    var totalLoop = rowsPerPage,
        loop = 0,
        countCellData = 0,
        offset = 0,
        key = 0,
        // get the amount of results
        totalResults = products.length;
    // show the amount of results 
    $('.product_results').html(totalResults);
    /****** start build pagination links ******/
    var totalpages = Math.ceil(totalResults / rowsPerPage); // calculate the total pages

    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;

        var pagination = '<td colspan="6">',
            lastPage = 0,
            // set the min page of the list, based on the range 
            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
                if (x == currentpage) {
        ...