How to solve pagination output that do not fit?

Question

My HTML Code is like this :

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

My Javascript Code is like this :

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);

        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';
        }

        paging_html += '<li class="first_page '+first_page_disabled+' '+change_page+'" offset="1" data="'+total_data+'" >'+
                            '<a title="First Page" href="javascript:doPagination(1,'+total_data+');">'+
                                    '<i class="fa fa-angle-double-left"> << </i>'+
                                '</a>'+
                           '</li>';

        paging_html += '<li class="prev '+prev_disabled+' '+change_page+' first_page" offset="'+prev_number+'" data="'+total_data+'">'+
                                '<a title="Prev" href="javascript:doPagination('+prev_number+','+total_data+');">'+
                                    '<i class="fa fa-angle-left"> < </i>'+
                                '</a>'+
                            '</li>';

        for(i = starting_number; i <= last_number; i++)
        {
            if(i > total_page)
            {
                next_disabled = 'disabled';
                last_page_disabled = 'disabled';
                last_page = '';
                break;
            }
            active = '';
            if(i == offset)
            {
                active = 'class="active"';
            }
            paging_html += '<li '+active+' class="change_page" offset="'+i+'" data="'+total_data+'" >'+
                                '<a href="javascript:doPagination('+i+','+total_data+');">'+i+'</a>'+
                           '</li>';
        }
        next_number = offset + 1;

        paging_html += '<li class="next '+next_disabled+' '+last_page+'" offset="'+next_number+'" data="'+total_data+'">'+
                            '<a title="Next" href="javascript:doPagination('+next_number+','+total_data+');">'+
                                '<i class="fa fa-angle-right"> > </i>'+
                            '</a>'+
                       '</li>';

        paging_html += '<li class="last_page '+last_page_disabled+' '+last_page+'" offset="'+total_page+'" data="'+total_data+'" >'+
                                '<a title="Last Page" href="javascript:doPagination('+total_page+','+total_data+');">'+
                                    '<i class="fa fa-angle-double-right"> >> </i>'+
                                '</a>'+
                           '</li>';

        return paging_html;
}

Demo is like this : https://jsfiddle.net/oscar11/xojyvvmw/1/

When I click page 9, next icon and last page icon disabled. Should when click on page 9, next icon and last page icon not disabled. Next icon and last page icon disabled when click page 10 or click last page.

How to solve my problem?

Thank you very much

Answer 1

You need to change following things to accomplish your task.

Add var maxPage = Math.ceil(total_data / limit_data_per_page);

And

// To Check that its the last page
if ( next_number-1 == maxPage ) 
{
   next_disabled = 'disabled'; 
   last_page_disabled = 'disabled';
}

Edit:Comment following code

next_disabled = 'disabled'; 
last_page_disabled = 'disabled'; 

In

if(i > total_page)
{
    // Comment this code
    next_disabled = 'disabled';
    last_page_disabled = 'disabled';

And Your working JsFiddle

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 = '';
          // Add this code 
          var maxPage = Math.ceil(total_data / limit_data_per_page);

	        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);

	        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';
	        }

	        paging_html += '<li class="first_page '+first_page_disabled+' '+change_page+'" offset="1" data="'+total_data+'" >'+
	                            '<a title="First Page" href="javascript:doPagination(1,'+total_data+');">'+
	                                    '<i class="fa fa-angle-double-left"> << </i>'+
	                                '</a>'+
	                           '</li>';

	        paging_html += '<li class="prev '+prev_disabled+' '+change_page+' first_page" offset="'+prev_number+'" data="'+total_data+'">'+
	                                '<a title="Prev" href="javascript:doPagination('+prev_number+','+total_data+');">'+
	                                    '<i class="fa fa-angle-left"> < </i>'+
	                                '</a>'+
	                            '</li>';

	        for(i = starting_number; i <= last_number; i++)
	        {
	            if(i > total_page)
	            {
                    // Comment this code
	                //next_disabled = 'disabled';
	                //last_page_disabled = 'disabled';
	                last_page = '';
	                break;
	            }
	            active = '';
	            if(i == offset)
	            {
	                active = 'class="active"';
	            }
	            paging_html += '<li '+active+' class="change_page" offset="'+i+'" data="'+total_data+'" >'+
	                                '<a href="javascript:doPagination('+i+','+total_data+');">'+i+'</a>'+
	                           '</li>';
	        }
	        next_number = offset + 1;
         // Add this Code for checking that its the last page
         if ( (next_number-1) == maxPage ) 
         {
           next_disabled = 'disabled'; 
           last_page_disabled = 'disabled';
         }

	        paging_html += '<li class="next '+next_disabled+' '+last_page+'" offset="'+next_number+'" data="'+total_data+'">'+
	                            '<a title="Next" href="javascript:doPagination('+next_number+','+total_data+');">'+
	                                '<i class="fa fa-angle-right"> > </i>'+
	                            '</a>'+
	                       '</li>';

	        paging_html += '<li class="last_page '+last_page_disabled+' '+last_page+'" offset="'+total_page+'" data="'+total_data+'" >'+
	                                '<a title="Last Page" href="javascript:doPagination('+total_page+','+total_data+');">'+
	                                    '<i class="fa fa-angle-double-right"> >> </i>'+
	                                '</a>'+
	                           '</li>';

	        return paging_html;
	}

.disabled {
	  pointer-events: none;
	  cursor: default;
	}
 .active a{
	  color:purple;	  
	} 

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

Answer 2

When offset value is 9 the last_number is going > 10. So even on clicking 9, the next and last buttons get disabled. I have checked if the offset is 9 then the last_number should be 10.

if(offset == 9) {
   last_number=10;
}

Please refer the updated fiddle.