个人中心
gpt4 book ai didi

javascript - 是否可以在没有背景网格的情况下进行分页？

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:55:21 26 4
gpt4 key购买 nike

我正在尝试实现服务器端分页，例如 datetable我找到了backbone.paginator library ，不知道还有没有。

通过他们的示例，他们使用另一个库帮助完成此，即backgrid.js和 its paginator plugin

是否可以在没有 Backgrid 的情况下进行分页？您能否对此添加任何示例？

最佳答案

我开发了下面的代码来和大家分享一个做服务器站点分页的JS/php代码，大家可以根据自己的需要修改，稍后我会总结得更好。

首先连接到数据库并创建分页表:

  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
  )

第二次插入 400 条相同的记录:

   $i=0;
   while ($i< 400){
   $pag="insert into pagination (id,name,age,company) VALUES 
  ('NULL','john','40','google')";
  $excu=$mysqli->query($pag);
   $i++;
       }

然后制作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>

然后制作 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);
  }

制作 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";}
  } 
  ?>

希望对您有所帮助。

关于javascript - 是否可以在没有背景网格的情况下进行分页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46055722/

26 4 0
文章推荐： android - adb 的 USB 驱动程序不适用于摩托罗拉 mc40
文章推荐： android - 录制视频时保持预览回调？
文章推荐： android - 将 ArrayList 保存在 bundle savedInstanceState 中
文章推荐： javascript - 使用 JavaScript 优化递归字符串操作函数
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com