Pagination

index.html

	<div class="row">
		<div class="col-md-12">
			<h2>Compras a proveedores</h2>
			<div class="compra-proveedor-container"></div>
			<div class="page 1">
        			Page1
			</div>
			<div class="page 2">
        			Page2
			</div>
			<div class="page 3">
        			Page3
			</div>
			<div class="page 4">
        			Page4
      			</div>
			<div class="page 5">
				Page5
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<nav aria-label="dragend-pagination">
				<ul class="pagination">
					<li class="prev disabled">
						<span class="page-link" href="#" tabindex="-1">Atras</span>
					</li>
					<li class="page-item active" data-page="1">
						<span class="page-link" href="#">1</span>
					</li>
					<li class="page-item" data-page="2">
						<span class="page-link" href="#">2</span>
					</li>
					<li class="page-item" data-page="3">
						<span class="page-link" href="#">3</span>
					</li>
					<li class="page-item" data-page="4">
						<span class="page-link" href="#">4</span>
					</li>
					<li class="page-item" data-page="5">
						<span class="page-link" href="#">5</span>
					</li>
					<li class="next">
						<span class="page-link" href="#">Adelante</span>
					</li>
				</ul>
			</nav>
		</div>
	</div>

script.js

var page = 1;
        $(".1").css('display', 'block');

        $(".prev").click(function () {
            if (page > 1) {
                page--;
                moving(page);
            }
        });

        $(".next").click(function () {
            if (page < 5) {
                page++;
                moving(page);
            }
        });

        $(".pagination li.page-item").click(function () {
            page = $(this).data("page");
            moving(page);
        })

        function moving(page) {
            $(".pagination li.page-item").removeClass("active");
            $('.pagination li[data-page = ' + page + ']').addClass("active");
            $('.page').css('display', 'none');
            $("." + page).css('display', 'block');
            if (page == 1) {
                $(".prev").addClass("disabled");
            }
            if (page > 1) {
                $(".prev").removeClass("disabled");
            }
            if (page == 5) {
                $(".next").addClass("disabled");
            }
            if (page < 5) {
                $(".next").removeClass("disabled");
            }

            if (page == 2){
                loadPage2();
            }
          
            if (page == 3){
                loadPage3();
            }
        }
        
        function loadPage2(){
            
        }
        function loadPage3(){
            
        }