JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

js pagination. <span id='rows_found'></span>
<br>
<div class='pagination'></div>
<p>
    current page: <span id='current_page'></span>

</p>
<div class='pagination'></div>

CSS

/* Variables */
:root {
    --gold_vdark: #635B4D;
    --gold_dark: #BAA47D;
    --gold_medium: #DEC497;
    --gold_light: #F5E8D2;
    --silver: #ddd;
    --silver_medium: #a3a3a3;
    --silver_dark: #424242;
}


div.pagination {
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

div.pagination button {
	margin: 2px;
	border: 1px solid var(--silver_medium);
	color: var(--silver_dark);
    background-color: #fff;
	padding: 5px 8px;
}

div.pagination button:hover {
	cursor: pointer;
	border: 1px solid var(--gold_vdark);
	background-color: var(--gold_light);
	color: var(--gold_vdark);
	text-decoration: none;
}

div.pagination button.page_current {
	border: 1px solid var(--gold_vdark);
	background-color: var(--gold_medium);
	color: var(--gold_vdark);
}

div.pagination button.page_disabled {
	border: 1px solid var(--silver_dark);
	background-color: var(--silver_medium);
	color: var(--silver_dark);
}

JavaScript

class AjaxPagination{
    
    static generate(page, totalrows, rowsperpage){
    
        let limit = (page - 1) * rowsperpage;
        let lastpage = Math.ceil(totalrows / rowsperpage);
        let lpm1 = lastpage - 1;
        let prev = page - 1;
        let next = page + 1;
	    this.html = "";
        
        if(lastpage > 1){
		    
            if(page > 1){
                this.addButton("btn", prev, "« Prev");
		    }else{
                this.addButton("disabled", 0, "« Prev");
		    }
		    
            if(lastpage < 9){
		        
                for(let i = 1; i <= lastpage; i++){
	                if(i == page){
                        this.addButton("current", 0, i);
				    }else{
                        this.addButton("btn", i, i);
				    }
                }
			
            }else if((lastpage - page) < 4){
			
                this.addButton("btn", 1, 1);
                this.addButton("btn", 2, 2);
                this.html += "...";
            
                for(let i = lastpage - 4; i <= lastpage; i++){
	                if(i == page){
                        this.addButton("current", 0, i);
			    	}else{
                        this.addButton("btn", i, i);
			    	}
                }
			
            }else{
			
                if(page < 5){
				
                    for(let i = 1; i < 6; i++){
	                    if(i == page){
                            this.addButton("current", 0, i);
				    	}else{
                            this.addButton("btn", i, i);
					    }
                    }
                    
                    this.html += "...";
                    this.addButton("btn", lpm1, lpm1);
                    this.addButton("btn", lastpage, lastpage);
				
                }else if(((lastpage - 3) > page) && page > 1){
				    
                    this.addButton("btn", 1, 1);
                    this.addButton("btn", 2, 2);
                    this.html += "...";
                    
                    for(let i = page - 2; i...