JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<div id="pagination"></div>

CSS

.disabled {
	  pointer-events: none;
	  cursor: default;
	}

JavaScript

var offset = 9;
	var limit_data_per_page = 20;
	var limit_page_number = 5;
	var total_data = 182;
	var content;

	content = generate_paging(offset, limit_data_per_page, limit_page_number, total_data);

	document.getElementById("pagination").innerHTML = content; 

	function doPagination(offset,total_data){
	    content = generate_paging(offset, limit_data_per_page, limit_page_number, total_data);    
	    document.getElementById("pagination").innerHTML = content;    
	}
	function generate_paging(offset, limit_data_per_page, limit_page_number, total_data)
	{
	        var i;
	        offset = parseInt(offset);
	        var active = '';
	        var prev_disabled = '';
	        var next_disabled = '';
	        var prev_number = '';
	        var next_number = '';
	        var modulus = total_data % limit_data_per_page;
	        var total_page = (total_data - modulus) / (limit_data_per_page);
	        var last_page = 'change_page';
	        var prev_disabled_link = '';

	        if(modulus > 0)
	        {
	            total_page = total_page + 1;
	        }

	        var starting_number = offset - Math.floor(limit_page_number / 2);
	        var last_number = offset + Math.floor(limit_page_number / 2);
					if(offset == 9) {
            last_number=10;
          }
	        prev_number = offset - 1;
	        if(starting_number < 1)
	        {
	            starting_number = 1;
	            prev_number = 1;
	        }

	        var first_page_disabled = '';
	        var last_page_disabled = '';
	        var change_page = 'change_page';
	        if(offset == 1)
	        {
	            prev_disabled = 'disabled';
	            // prev_disabled_link = 'style="pointer-events: none; cursor:pointer;"';
	            first_page_disabled = 'disabled';
	            change_page = '';
	        }

	        var paging_html = '';

	        if(total_page<2)
	        {
	            first_page_disabled = 'disabled';
	            last_page_disabled = 'disabled';
	        }

	       ...