pagination logic

by Nabaraj Saha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
		<div class="pagContent">
			<div id="Pagination" class="pagination">
				<a href="#" class="current prev sepNav btn btn-primary">&lt;</a>
				<div class="pageLinkCon" style="display:inline-block;">
					<a href="" class="btn btn-default pageLink">1</a>
					<a href="#" class="btn btn-default pageLink">2</a>
					<a href="#" class="btn btn-default pageLink">3</a>
					<a href="#" class="btn btn-default pageLink">4</a>
					<a href="#" class="btn btn-default pageLink">5</a>
					<a href="#" class="btn btn-default pageLink">6</a>
					<a href="#" class="btn btn-default pageLink">7</a>
					<a href="#" class="btn btn-default pageLink">8</a>
					<a href="#" class="btn btn-default pageLink">9</a>
					<a href="#" class="btn btn-default pageLink">10</a>
					<a href="#" class="btn btn-default pageLink">11</a>
					<a href="#" class="btn btn-default pageLink">12</a>
					<a href="#" class="btn btn-default pageLink">13</a>
					<a href="#" class="btn btn-default pageLink">14</a>
					<a href="#" class="btn btn-default pageLink">15</a>
					<a href="#" class="btn btn-default pageLink">16</a>
					<a href="#" class="btn btn-default pageLink">17</a>
					<a href="#" class="btn btn-default pageLink">18</a>
					<a href="#" class="btn btn-default pageLink">19</a>
					<a href="#" class="btn btn-default pageLink">20</a>
					<a href="#" class="btn btn-default pageLink">21</a>
					<a href="#" class="btn btn-default pageLink">22</a>
					<a href="#" class="btn btn-default pageLink">23</a>
					<a href="#" class="btn btn-default pageLink">24</a>
					<a href="#" class="btn btn-default pageLink">25</a>
					<a href="#" class="btn btn-default pageLink">26</a>
					<a href="#" class="btn btn-default pageLink">27</a>
					<a href="#" class="btn btn-default pageLink">28</a>
					<a href="#" class="btn btn-default pageLink">29</a>
					<a href="#" class="btn...

CSS

.currentPage{
		background-color: #333333;
		color: #ffffff;
	}

JavaScript

$("body").on("click", ".sepNav", function(e){
			e.preventDefault();
			if($(this).hasClass("next")){
				if($(".currentPage").next("a").length>0){
					$(".currentPage").next("a").trigger("click");
				}else{
					alert("no next elements");
				}
			}else if($(this).hasClass("prev")){
				if($(".currentPage").prev("a").length>0){
					$(".currentPage").prev("a").trigger("click");
				}else{
					alert("no prev elements");
				}
			}
		});

		$("body").on("click",".pagContent #Pagination .pageLinkCon a",function(e){
			e.preventDefault();
			console.log("test");
			pageLogic($(this));
		});
		$(".pagContent #Pagination .pageLinkCon a:first").trigger("click");

function pageLogic(elm){		
		
		$(".pagContent #Pagination .pageLinkCon .dotted").remove();

		var cE = $(".pagContent #Pagination").find(".currentPage"),
		cD = cE.text(), 
		tE = elm, 
		tD = tE.text(), 
		gtIndex = tE.index()+1, 
		ltIndex = tE.index()-3;

		
		if($(elm).is(':last-child')){
			$(".sepNav.next").addClass("disabled");
		}else{
			$(".sepNav.next").removeClass("disabled");
		}
		if($(elm).is(':first-child')){
			$(".sepNav.prev").addClass("disabled");
		}else{
			$(".sepNav.prev").removeClass("disabled");
		}
		$(".pagContent #Pagination .pageLinkCon a").show();
		
		cE.replaceWith('<a href="#" class="btn btn-default pageLink">'+cD+'</a>');
		tE.replaceWith('<span class="currentPage btn btn-default">'+tD+'<span>');

		if($('.pagContent #Pagination a.pageLink:gt('+gtIndex+')').length>1){			
			$('.pagContent #Pagination a.pageLink:not(":last"):gt('+gtIndex+')').hide();
			$(".pagContent #Pagination a.pageLink:last").before('<span class="btn btn-default dotted">...</span>');
		}
		if(ltIndex>0){

			$('.pagContent #Pagination a.pageLink:not(:eq(0)):lt('+(ltIndex)+')').hide();			
			$(".pagContent #Pagination a.pageLink:first").after('<span class="btn btn-default dotted">...</span>');			
			
		}else{

		}
	}