data - tooltip javascript
¿Es posible hacer esta paginación sin backgrid? (2)
Desarrollé el siguiente código para compartir con ustedes un código JS / php que incluye la paginación del sitio del servidor y puede cambiarlo de acuerdo a su necesidad y luego puedo resumirlo mejor.
Primero haga la conexión a DB y cree una tabla de paginación:
CREATE TABLE `pagination` (
`id` INT( 16 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 50 ) NOT NULL ,
`age` INT( 3 ) NOT NULL ,
`company` VARCHAR( 50 ) NOT NULL
)
Segundo inserte 400 mismos registros:
$i=0;
while ($i< 400){
$pag="insert into pagination (id,name,age,company) VALUES
(''NULL'',''john'',''40'',''google'')";
$excu=$mysqli->query($pag);
$i++;
}
Luego haz test.php
<!DOCTYPE html>
<html><head>
<style>
#container{overflow-x: hidden;max-width:90%;min-width:90% ;margin: 0 auto;}
td{max-width:10%;min-width:10%}
tr,td{border:1px solid black }
#page{display:inline;border:1px solid black}
#numb,#numbs{display:none}
.button{background:white}
</style>
</head>
<body >
<?php $defaultoption ="10";?>
<div id=container></div><span id=numb></span><span id=numbs><?php echo
$defaultoption;?></span>
<script type=text/javascript src=js.js></script>
</body>
</html>
Luego crea js.js:
onload = function (){
var container=document.getElementById("container");
var table =document.getElementById("numbs").innerHTML;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
container.innerHTML=xhttp.responseText;
var button=document.getElementById("button");
button.children[0].disabled="true";
button.children[0].style.background="yellow";
}}
xhttp.open("POST", "testa.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("table="+table);
}
function select(){
var sel =document.getElementById("select");
var table=sel.options[sel.selectedIndex].value;
var b2 =document.getElementById("numbs");
b2.innerHTML=table;
var se = new XMLHttpRequest();
se.onreadystatechange = function() {
if (se.readyState == 4 && se.status == 200) {
document.getElementById("container").innerHTML=se.responseText;
var button=document.getElementById("button");
button.children[0].disabled="true";
button.children[0].style.background="yellow";
}}
se.open("POST", "testa.php", true);
se.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
se.send("table="+table);
}
function button(button){
var b2 =document.getElementById("numbs");
var b1 =button.innerHTML;
var numb = document.getElementById("numb");
numb.innerHTML=b1;
var b= b2.innerHTML;
var butt = new XMLHttpRequest();
butt.onreadystatechange = function() {
if (butt.readyState == 4 && butt.status == 200) {
document.getElementById("container").innerHTML=butt.responseText;
var d = document.getElementsByClassName("button");
for(i=0;i<d.length;i++){
if(d[i].innerHTML == numb.innerHTML){d[i].disabled="true";
d[i].style.background="yellow";
}}}}
butt.open("POST", "testa.php", true);
butt.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
butt.send("b="+b+"&b1="+b1);
}
Hacer testa.php:
<?php
$pag="SELECT * FROM pagination ORDER BY id ASC ";
$exc=$mysqli->query($pag);
$numrwos =mysqli_num_rows($exc);
if($_POST[''b'']){
$b =$_POST[''b''];
$b1 =$_POST[''b1''];
$max=($b*$b1);
$m =($b1-1);
$n =($m*$b);
$min =($n-1);
if($numrwos){
echo "<select id=select onchange=select()><option selected=selected>Show Entries</option>";
if($numrwos < 11){
echo "<option>10</option>";
}elseif($numrwos > 10 && $numrwos < 26){
echo "<option>10</option><option>25</option>"; }elseif($numrwos > 25 &&
$numrwos < 51){
echo "<option>10</option><option>25</option><option>50</option>";}else{
echo "<option>10</option><option>25</option><option>50</option>
<option>100</option>";}
echo "</select><br />";
echo "<table width=80% id=table>";
echo "<tr><td width=10%>id</td><td>name</td><td>age</td><td>company</td></tr>";
$stop="0";
while ($result=mysqli_fetch_array($exc)){
if($stop > $min && $stop < $max){
echo "<tr><td>".$result[''id'']."</td><td>".$result[''name'']."</td>
<td>".$result[''age'']."</td><td>".$result[''company'']."</td></tr>";
}else{}
$stop++;
}echo "</table><br />";
echo "<div id=button>";
$i=0;
while($i < $numrwos){
$page+=$i % $b == $b-1;
$i++;
if($i%$b == 1){
$pagenum=$page+1;
echo "<button class=button onmouseover=''button(this)''>".$pagenum."</button>";}}
echo "</div>";
}else{echo "no records";}
}else{
$t =$_POST["table"];
if($numrwos){
echo "<select id=select onchange=select()><option selected=selected>Show Entries</option>";
if($numrwos < 11){
echo "<option>10</option>";
}elseif($numrwos > 10 && $numrwos < 26){
echo "<option>10</option><option>25</option>"; }elseif($numrwos > 25 && $numrwos < 51){
echo "<option>10</option><option>25</option><option>50</option>";}else{
echo "<option>10</option><option>25</option><option>50</option>
<option>100</option>";}
echo "</select><br />";
echo"<table width=80% id=table>";
echo "<tr><td width=10%>id</td><td>name</td><td>age</td><td>company</td></tr>";
$stop="0";
while ($result=mysqli_fetch_array($exc)){
echo "<tr><td>".$result[''id'']."</td><td>".$result[''name'']."</td>
<td>".$result[''age'']."</td><td>".$result[''company'']."</td></tr>";
if($stop ==$t-1){break;}
$stop++;
}echo "</table><br />";
echo "<div id=button>";
$i=0;
while($i < $numrwos){
$page+=$i % $t == $t-1;
$i++;
if($i%$t == 1){
$pagenum=$page+1;
echo "<button class=button onmouseover=''button(this)''>".$pagenum."</button>";}}
echo "</div>";
}else{echo "no records";}
}
?>
Deseo que te ayude
Estoy tratando de implementar la paginación del lado del servidor como fechable y encontré la biblioteca backbone.paginator , no sé si hay algo más.
A través de sus ejemplos, usaron otra biblioteca para ayudar a lograr esto, que es backgrid.js y su complemento de paginador.
¿Es posible hacer esta paginación sin Backgrid? ¿Podría agregar algún ejemplo sobre esto?
lo hice
en la función View initialize
Yo lo llamo
this.reloadCustomPages();
aquí su implementación
reloadCustomPages: function(options) {
var self = this;
self.block();
self.customPages.fetch({data: $.param(options)}).always(function () {
self.unblock();
});
}
en el lado del servidor (primavera de Java) modifiqué la API para aceptar nuevas cadenas de consulta
@RequestParam(value = "pageNumber", defaultValue = "1"),
@RequestParam(value = "perPage", defaultValue = "10")
y en lugar de devolver la lista directamente, devuelve información de paginación útil como
- cantidad total de elementos en la base de datos
- página actual nuber
- tamaño de página
- y los artículos en sí
mira este fragmento del lado del servidor (sé que no está relacionado, pero vale la pena mirarlo)
@RequestMapping(value = "/editor/pages", method = RequestMethod.GET)
public void listPages(@RequestParam(value = "pageNumber", defaultValue = "1") Integer pageNumber,
@RequestParam(value = "perPage", defaultValue = "10") Integer perPage,
HttpServletResponse httpResp) throws IOException {
Long recordsTotal = pageSvc.findTotalNumberOfPages();// select count(*) from table_name
List<PbCustomPage> pages = pageSvc.findPages(pageNumber, perPage);// server side query that gets a pagenated data
BackbonePaginatorResponse response = new BackbonePaginatorResponse();// I created this simple class
response.setTotalCount(recordsTotal);
response.setPageNumber(pageNumber);
response.setPerPage(perPage);
response.setItems(pages);
httpResp.setContentType("application/json");
json.createCustomPageSerializer().addProperties().serialize(response, httpResp.getWriter());// just make your server send that obkect
}
Ahora de vuelta la llamada a la función va a terminar el servidor para obtener la página 1 con un tamaño de página de 10
en mi plantilla, tengo esto
<div class="pagination clear" style="text-align: center;">
<%= customPages.paginationHtml %>
</div>
déjame decirte cómo lo puebla
customPages.paginationHtml = this.generatePagination(customPages);
y aquí está la parte más importante
generatePagination: function (paginationResponse) {
var currentPage = paginationResponse.pageNumber,
lastPage = paginationResponse.totalCount==0?1:Math.ceil(paginationResponse.totalCount/paginationResponse.perPage);
var html = ''<ul class="pagination">'';
html += ''<li class="''+(currentPage == 1?"disabled":"")+''" data-pb-page-number="1"><a href="#" class="first">««</a></li>'';
html += ''<li class="''+(currentPage == 1?"disabled":"")+''" data-pb-page-number="''+(currentPage==1?1:currentPage-1)+''"><a href="#" class="prev">«</a></li>'';
for (var i = 1; i <= lastPage; i++) {
html += ''<li class="''+(currentPage == i?"active":"")+''" data-pb-page-number="''+i+''"><a href="#" class="page">''+ i +''</a></li>'';
}
html += ''<li class="''+(lastPage == currentPage?"disabled":"")+''" data-pb-page-number="''+(currentPage==lastPage?lastPage:currentPage+1)+''"><a href="#" class="next">»</a></li>'';
html += ''<li class="''+(lastPage == currentPage?"disabled":"")+''" data-pb-page-number="''+(lastPage)+''"><a href="#" class="last">»»</a></li>'';
html += ''</ul>'';
return html;
},
cada li que creo tiene data-pb-page-number para ser utilizado más tarde
una cosa más, cómo hacer nuevas solicitudes a otras páginas
en la función View initialize
this.el.on(''click'', ''ul.pagination li:not(.disabled,.active)'', this.getCustomPagesPagination);
aquí su implementación
getCustomPagesPagination: function (e) {
e.preventDefault();
var $el = $(e.target).closest("li");
this.reloadCustomPages({pageNumber:$el.data("pb-page-number")})
},
el resultado es así
así como resolví mi problema, pero la pregunta aún no respondía