2

tengo el siguiente inconveniente quiero realizar la paginación de un div que contiene 4 tablas y no tengo idea de como hacerlo, no puedo usar datatables y traigo la información desde una consulta a la que le paso información con ajax Adjunto el código html

<div class="col-lg-12" id="resultado" >


 <table id="resultados1" class="table table-striped table-bordered" cellspacing="0" width="100%" border="1" >  </table>
 <table id="resultados2" class="table table-striped table-bordered" cellspacing="0" width="100%" border="1" >  </table>
 <table id="resultados4" class="table table-striped table-bordered" cellspacing="0" width="100%" border="1">  </table>
 <table id="resultados3" class="table table-striped table-bordered" cellspacing="0" width="100%" border="1">  </table>


</div>

Cada tabla posee thead con distintos nombres "SALIDAS, ENTRADAS, DEVOLUCIONES adjunto una imagen para que tengan una mejor idea. desde ya muchas gracias

introducir la descripción de la imagen aquí

2 respuestas 2

3

Puedes usar el nav-tabs de bootstrap este te permite tener una navegación con tabs y el contenido se ira mostrando según el tab seleccionado. Para lograrlo debes agregar ademas bootstrap.css también el bootstrap.js.

Aquí un ejemplo tomado de bootstrap 4.0 Navs

<head>
  <!-- Libreria Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
  <!-- Lista de Tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="salidas-tab" data-toggle="tab" href="#salidas" role="tab" aria-controls="salidas" aria-selected="true">Salidas</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="devoluciones-tab" data-toggle="tab" href="#devoluciones" role="tab" aria-controls="devoluciones" aria-selected="false">Devoluciones</a>
    </li>
  </ul>
  <!-- Contenido de los Tabs -->
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="salidas" role="tabpanel" aria-labelledby="salidas-tab">Tabla 1</div>
    <div class="tab-pane fade" id="devoluciones" role="tabpanel" aria-labelledby="devoluciones-tab">Tabla 2</div>
  </div>
</body>

2

La idea es que utilices esta librería pagify, anexo el link: https://github.com/cmpolis/Pagify/blob/master/pagify.js

Dónde puedes incluir las tablas en los div de manera dinámica

En esta línea pones las columnas que desees que muestre, en este caso, para hacerlo de manera práctica lo dejé en dos: $(".container").pagify(2, ".single-item");

Espero haya sido de ayuda!

(function($) {
	var pagify = {
		items: {},
		container: null,
		totalPages: 1,
		perPage: 3,
		currentPage: 0,
		createNavigation: function() {
			this.totalPages = Math.ceil(this.items.length / this.perPage);

			$('.pagination', this.container.parent()).remove();
			var pagination = $('<div class="pagination"></div>').append('<a class="nav prev disabled" data-next="false"><</a>');

			for (var i = 0; i < this.totalPages; i++) {
				var pageElClass = "page";
				if (!i)
					pageElClass = "page current";
				var pageEl = '<a class="' + pageElClass + '" data-page="' + (
				i + 1) + '">' + (
				i + 1) + "</a>";
				pagination.append(pageEl);
			}
			pagination.append('<a class="nav next" data-next="true">></a>');

			this.container.after(pagination);

			var that = this;
			$("body").off("click", ".nav");
			this.navigator = $("body").on("click", ".nav", function() {
				var el = $(this);
				that.navigate(el.data("next"));
			});

			$("body").off("click", ".page");
			this.pageNavigator = $("body").on("click", ".page", function() {
				var el = $(this);
				that.goToPage(el.data("page"));
			});
		},
		navigate: function(next) {
			// default perPage to 5
			if (isNaN(next) || next === undefined) {
				next = true;
			}
			$(".pagination .nav").removeClass("disabled");
			if (next) {
				this.currentPage++;
				if (this.currentPage > (this.totalPages - 1))
					this.currentPage = (this.totalPages - 1);
				if (this.currentPage == (this.totalPages - 1))
					$(".pagination .nav.next").addClass("disabled");
				}
			else {
				this.currentPage--;
				if (this.currentPage < 0)
					this.currentPage = 0;
				if (this.currentPage == 0)
					$(".pagination .nav.prev").addClass("disabled");
				}

			this.showItems();
		},
		updateNavigation: function() {

			var pages = $(".pagination .page");
			pages.removeClass("current");
			$('.pagination .page[data-page="' + (
			this.currentPage + 1) + '"]').addClass("current");
		},
		goToPage: function(page) {

			this.currentPage = page - 1;

			$(".pagination .nav").removeClass("disabled");
			if (this.currentPage == (this.totalPages - 1))
				$(".pagination .nav.next").addClass("disabled");

			if (this.currentPage == 0)
				$(".pagination .nav.prev").addClass("disabled");
			this.showItems();
		},
		showItems: function() {
			this.items.hide();
			var base = this.perPage * this.currentPage;
			this.items.slice(base, base + this.perPage).show();

			this.updateNavigation();
		},
		init: function(container, items, perPage) {
			this.container = container;
			this.currentPage = 0;
			this.totalPages = 1;
			this.perPage = perPage;
			this.items = items;
			this.createNavigation();
			this.showItems();
		}
	};

	// stuff it all into a jQuery method!
	$.fn.pagify = function(perPage, itemSelector) {
		var el = $(this);
		var items = $(itemSelector, el);

		// default perPage to 5
		if (isNaN(perPage) || perPage === undefined) {
			perPage = 3;
		}

		// don't fire if fewer items than perPage
		if (items.length <= perPage) {
			return true;
		}

		pagify.init(el, items, perPage);
	};
})(jQuery);

$(".container").pagify(2, ".single-item");
.container {
  display: flex;
  flex-wrap: wrap;
  width: 720px;
  justify-content: flex-start;
}

.single-item {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
  margin: 20px;
  border-radius: 10px;
  color: #888;
}

.pagination {
  padding: 20px;
}
.pagination,
.pagination * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.pagination a {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}
.pagination a.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}
.pagination a.current {
  background: #f3f3f3;
}
<script src="https://github.com/cmpolis/Pagify/blob/master/pagify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont">
  <div class="container">
    <div class="single-item">
      Salidas <!-- Aquí debes poner las tablas creadas dinámicamente -->
    </div>
    <div class="single-item">Entradas</div>
    <div class="single-item">Devoluciones</div>
    <div class="single-item">Entrada proveedores</div>
    <div class="single-item">5</div>
    <div class="single-item">6</div>
    <div class="single-item">7</div>
    <div class="single-item">8</div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.