paginazione in progress

index_4.2.html

@@ -35,6 +35,7 @@
 	src="https://hdnlab1.isti.cnr.it/d3search/node_modules/commarcdiag/d3.js"></script>
 <script type="text/javascript" src="./js/lib/peg-0.10.0.min.js"></script>
 <script type="text/javascript" src="./js/lib/jquery.ui.touch-punch.js"></script>
+<script type="text/javascript" src="./js/lib/jq-paginator.min.js"></script>
 <script type="text/javascript" src="./js/cesareBrowse.js"></script>
 <script type="text/javascript" src="./js/minimap.js"></script>
 <script type="text/javascript" src="./js/partext.js"></script>
@@ -391,8 +392,11 @@
 							<div class="card-header px-1" id="headingZero">
 								<h6 class="mb-0">
 									<div class="row no-gutters justify-content-end">
-										<div class="col-auto flex-fill align-self-end text-muted text-right nav-link">
+										<div class="col-auto flex-fill align-self-end text-muted text-right">
-											Lista completa
+											
+											<button class="btn btn-sm btn-link" id="cantica0"
+												data-toggle="collapse" data-target="#collapseZero"
+												aria-expanded="true" aria-controls="collapseZero"><span class="h6 font-weight-bold">Lista risultati</span></button>
 										</div>
 										<div id="cantica0-badge"
 											class="col-auto align-self-center align-self-end text-right">
@@ -400,6 +404,25 @@
 									</div>
 								</h6>
 							</div>
+
+							<div id="collapseZero" class="collapse"
+								aria-labelledby="headingZero" data-parent="#accordionNav">
+								<div class="card-body p-3 align-self-end text-right">
+
+									<ul class="pagination pagination-sm justify-content-end m-0" id="listPagination2">
+										<li class="page-item disabled">
+											<a class="page-link" href="#" aria-label="Previous">
+												<span aria-hidden="true">&laquo;</span></a></li>
+										<li class="page-item"><a class="page-link p-0" href="#">
+											<select class="custom-select custom-select-sm bg-light border-0" id="paginaLista" style="height: 29px; max-width: 180px;">
+												<option value="1">1/3</option><option value="2">2/3</option><option value="3">3/3</option></select></a></li>
+										<li class="page-item">
+											<a class="page-link" href="#" aria-label="Next">
+												<span aria-hidden="true">&raquo;</span></a></li>
+									</ul>
+								</div>
+							</div>
+
 						</div>
 					</div>
 

js/script_4.2.js

@@ -182,6 +182,66 @@ $(document).ready(function() {
 		}
 	});
 	
+/**
+	$.jqPaginator('#listPagination', {
+		wrapper: '',
+		//first: '<li class="page-item first"><a class="page-link" href="javascript:;"><ion-icon name="arrow-undo-sharp"></ion-icon></a></li>',
+		prev: '<li class="page-item prev"><a class="page-link p-1" href="javascript:;"><ion-icon name="caret-back-sharp"></ion-icon></a></li>',
+		next: '<li class="page-item next"><a class="page-link p-1" href="javascript:;"><ion-icon name="caret-forward-sharp"></ion-icon></a></li>',
+		//last: '<li class="page-item last"><a class="page-link" href="javascript:;"><ion-icon name="arrow-redo-sharp"></ion-icon></a></li>',
+		//page: '<li class="page-item page"><a class="page-link" href="javascript:;">Pag. {{page}}/{{totalPages}}</a></li>',
+		page: '<li class="page-item page"><a class="page-link p-0" href="javascript:;">\
+			<select class="custom-select custom-select-sm bg-light border-0" id="paginaLista">\
+			<option value="1">1/{{totalPages}}</option></select></a></li>',
+		totalPages: 0,
+		totalCounts: 25,
+		pageSize: 25,
+		currentPage: 1,
+		visiblePages: 1,
+		onPageChange: function (num, type) {
+			console.log("Page num: "+num+" type: "+type)
+			console.log("listarisultati: "+ listarisultati.length);
+			console.log($("#paginaLista option:selected").val());
+			//$('#text').html('当前第' + num + '页');
+			$("#paginaLista  option:selected").val(num).change();
+		}
+	});
+
+ 	$('#collapseZero').on('shown.bs.collapse', function () {
+		var numeroPagine = Math.ceil(listarisultati.length/nRisultatiPerPag);
+		var pageDef = '<li class="page-item page"><a class="page-link p-0" href="javascript:;">\
+			<select class="custom-select custom-select-sm bg-light border-0" id="paginaLista2">'
+		for (let i = 1; i <= numeroPagine; i++) {
+			pageDef = pageDef + '<option value="'+i+'">'+i+'/'+numeroPagine+'</option>'
+		}
+		pageDef = pageDef + '</select></a></li>';
+		$('#listPagination').jqPaginator('option', {
+			totalCounts: listarisultati.length,
+			pageSize: nRisultatiPerPag,
+			page: pageDef,
+		});
+		//$("#paginaLista option:not(:first)").remove();
+		console.log("numeroPagine: "+ Math.ceil(listarisultati.length/nRisultatiPerPag));
+  		//$("#showLogic").html('<span class="font-weight-bold text-muted">Nascondi</span>');
+  		//$("#collapseZero").collapse('hide');
+  		showFrasi(0, nRisultatiPerPag);
+	})
+
+*/
+
+	$('#collapseZero').on('shown.bs.collapse', function () {
+		var numeroPagine = Math.ceil(listarisultati.length/nRisultatiPerPag);
+		console.log("numeroPagine: "+ Math.ceil(listarisultati.length/nRisultatiPerPag));
+  		//$("#showLogic").html('<span class="font-weight-bold text-muted">Nascondi</span>');
+  		//$("#collapseZero").collapse('hide');
+  		$.manageResultList(0, nRisultatiPerPag);
+	})
+
+	$('#paginaLista').on('change', function() {
+		newPage = $("#paginaLista")[0].options[$("#paginaLista")[0].selectedIndex].value
+		console.log(newPage);
+	});
+	
 	// Evento: modifica dell'unita di ricerca'
 	$("#unitaRicerca").on('change', function() {
 		queryJson.unitaRicerca = $("#unitaRicerca")[0].options[$("#unitaRicerca")[0].selectedIndex].value;
@@ -562,6 +622,7 @@ $(document).ready(function() {
 	window.context0 = JSON.parse(JSON.stringify(contextEmpty));
 	const jsonReplacer = (key, value) =>
 		typeof value === 'undefined' ? 0 : value;
+	const nRisultatiPerPag = 25;
 
 	// Fine variabili