Ajax 페이지 조회 쓰기(페이지 새로 고침 하지 않 기 실현)

요청:

데이터베이스 에 있 는 대량의 정 보 를 페이지 에 표시 하려 면 반드시 페이지 조회 에 사용 해 야 합 니 다.
Ajax 를 사용 하지 않 고 다른 방법 으로 페이지 를 새로 고 쳐 야 합 니 다.사용자 건강 검진 이 좋 지 않 습 니 다.
그래서 Ajax 의 방법 으로 페이지 를 나 누 어 조회 하 는 것 이 좋 습 니 다.
1.먼저 데이터 가 많은 시 계 를 찾 아 보 세 요!

간단 한 시계
코드,jquery 패키지 도입:<script src="jquery-1.11.2.min.js"></script>표 한 장 을 써 서 우리 의 코드 와 이름 을 표시 합 니 다.

<table class="table table-striped">
 <thead>
 <tr>
 <td>  </td>
 <td>  </td>
 <td>  </td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>

이것들 은 모두 매우 간단 해서 문제 가 없다!
2.현재 페이지 를 설정 하고 변 수 를 1(첫 페이지)로 정의 합 니 다.

 var page = 1;
 //   ，    1

3.다음은 첫 번 째 방법 을 쓰 겠 습 니 다.ajax 를 사용 해 야 합 니 다.이 방법 은 주로 조회 하고 페이지 를 나 누 는 역할 을 합 니 다.

function load()
 {
 $.ajax({
  url: "jiazai.php",
//           data
  data:{page:page},
//        
  type:"POST",
  dataType: "TEXT",
  success: function (data) {
  }
 });
 }

4.데 이 터 를 표시 하 는 처리 페이지 쓰기;여기 서 고려 해 야 할 것 은 몇 개의 데 이 터 를 건 너 뛰 고 몇 개의 데 이 터 를 표시 하고 싶 은 지,limit 을 사용 하 는 것 입 니 다.

<?php
include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//    page
$num = 3;
//      
$tg = ($page-1)*3;//    
$sql = "select * from min limit {$tg},{$num}";
//limit:    ，         ，        
echo $db->Query($sql);

첫 번 째 단 계 를 마치 고 그림 을 보 세 요.

데이터 구현 보이 기!
좋 습 니 다.각 페이지 는 먼저 세 개의 데이터 가 실현 되 었 습 니 다.(페이지 가 이렇게 되 었 습 니 다.저 는 웹 페이지 를 미화 하 는 Bookstrap 을 사 용 했 습 니 다.앞에서 말씀 드 렸 습 니 다)
5.페이지 정 보 를 표시 하고 방법 을 쓰 고 ajax 로 전체 페이지 수 를 먼저 가 져 옵 니 다.

function loadfenye()
 {
 var s = "";
 //    
 var xiao = 1;
//    
 var da = 1;
//    
 $.ajax({
 async:false,
//      
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
 da = data;
 //    
  }
});
 }

다음은 총 페이지 수 를 조회 하 는 pp 페이지 입 니 다.

<?php
//     
include ("db.class.php");
$db = new db();
$sql = "select count(*) from min";
$zts = $db->strquery($sql);
//   
echo ceil($zts/3);
//ceil    

자,총 페이지 수 를 얻 었 습 니 다.돌아 와 서 페이지 를 다 쓰 세 요.

//        
 function loadfenye()
 {
  var s = "";
  //    
  var xiao = 1;
//     
  var da = 1;
//     
  $.ajax({
 async:false,
//       
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
  da = data;
  //    ，                
   }
});
//     
  s += "<li><a>&laquo;</a></li>";
//        
for(i=page-4;i<page+5;i++)
{
 //i       
 if(i>=xiao && i<=da)
 {
  s += " <li><a>"+i+"</a></li>"
 }
}
  //       
  s += "<li><a>&raquo;</a></li>";
$("#fenye").html(s);
 }

이렇게 다 쓴 후에 그림 을 보 세 요.

페이지 별 정보 도 나 왔 습 니 다.
6.기본 선택 페이지 의 배경 색 을 바 꿔 보 세 요
북 스 트랩 보기;배경 색 을 바 꾸 는 방법:

분명히 active 스타일 이 하나 더 생 겼 으 니 판단 으로 덧 붙 입 시다.

if(i>=xiao && i<=da) {
  if (i == page) {
   s += " <li class='active'><a>" + i + "</a></li>"
  }
  else {
   s += " <li><a>" + i + "</a></li>";
  }

자,보 세 요.

괜찮다
7.페이지 수의 클릭 이 벤트 를 하고 클릭 페이지 수 를 이 페이지 로 옮 기 고 데 이 터 를 표시 하 며 목록 을 업데이트 합 니 다.
먼저 숫자 목록 에 class 를 추가 합 니 다.s += " <li class='active list'><a>" + i + "</a></li>"그리고 쓰 는 방법:

//         
  $(".list").click(function(){
   //      
   //      ，  page（   ）
   page = $(this).text();
//   page      ，        
   //  load  
   load();
   //            
   loadfenye();
   //        
  })
 }

내 가 5 페이지 를 클릭 하면:

흠 이 없다
8.그리고 바로 이전 페이지 와 다음 페이지 의 클릭 이벤트 입 니 다.먼저 이전 페이지 의 클릭 이벤트 입 니 다.
먼저 이전 페이지 의 목록 에 class 를 추가 하면 이 벤트 를 쓰기 편 합 니 다.s += "<li class='sy'><a>&laquo;</a></li>";자,이전 페이지 에서 이벤트 클릭:

$(".sy").click(function(){
   //     
   if(page>1)
   {
    //       
    page = parseInt(page) - 1;
   }
   //   page      ，        
   //  load  
   load();
   //            
   loadfenye();
   //        
  })

다음 페이지 의 클릭 이벤트:
동일:목록 에 class 를 더 하면 이벤트 쓰기 편 합 니 다.s += "<li class='xy'><a>&raquo;</a></li>"; 다음 페이지 클릭 이벤트:

//       
  $(".xy").click(function(){
//   alert(da);
   if(page<da)
   {
    //       
    page = parseInt(page) + 1;
   }
   //   page      ，        
   //  load  
   load();
   //            
   loadfenye();
   //        
  })

자,ajax 페이지 조 회 를 완벽 하 게 실현 합 니 다.
8.조건 부 조회 추가:
텍스트 상자 추가:

<div>
 <input type="text" id="name"/>
 <input type="button" id="chaxun" value="  "/>
</div>

클릭 이벤트 쓰기:

//        
 $("#chaxun").click(function(){
  //    
  //  load  
  load();
  //            
  loadfenye();
  //        
 })

다음 에 우 리 는 이 두 가지 방법 을 고 쳐 야 한다.
ajax 는 텍스트 상자 의 name 만 전달 하면 됩 니 다:

data:{page:page,name:name},
   type:"POST", 

data:{name:name},
 type:"POST",

처리 페이지 에서 일정한 조건 을 설정 합 니 다:

$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like '%{$name}%' ";
}

마지막 으로 sql 문 뒤에 호출 하면 돼 요.
그림:

페이지 가 새로 고침 되 지 않 은 페이지 조회 가 오 크 입 니 다.
원본 코드:
페이지 보이 기:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>     </title>
 <link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <script src="jquery-1.11.2.min.js"></script>
 <script src="dist/js/bootstrap.min.js"></script>
<style type="text/css">
 .xq{
  margin-left: 5px;
 }
 #fenye li:hover{
  cursor:pointer ;
 }
</style>
</head>
<body>
<h1>    </h1>
<div>
 <input type="text" id="name"/>
 <input type="button" id="chaxun" value="  "/>
</div>
<br/>
<table class="table table-striped">
 <thead>
 <tr>
  <td>  </td>
  <td>  </td>
  <td>  </td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>
<br/>
<div><ul class="pagination" id="fenye">
<!--  <li><a href="#" rel="external nofollow" rel="external nofollow" >&laquo;</a></li>-->
<!--  <li><a href="#" rel="external nofollow" rel="external nofollow" >&raquo;</a></li>-->
 </ul></div>
<!--   -->
<!--    （Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">  </h4>
   </div>
   <div class="modal-body" id="nr">
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">  </button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>
</body>
</html>
<script>
 var page = 1;
 //   ，    1
 //  load  
 load();
 //            
 loadfenye();
 //        
 //        
 $("#chaxun").click(function(){
  //    
  //  load  
  load();
  //            
  loadfenye();
  //        
 })
 function loadfenye()
 {
  var s = "";
  //    
  var name = $("#name").val();
  var xiao = 1;
//     
  var da = 1;
//     
  $.ajax({
 async:false,
//       
 url:"zys.php",
 data:{name:name},
 type:"POST",
 dataType:"TEXT",
 success:function(data){
  da = data;
  //    
   }
});
//     
  s += "<li class='sy'><a>&laquo;</a></li>";
//        
for(var i=page-4;i<page+5;i++)
{
 //i       
 if(i>=xiao && i<=da) {
  if (i == page) {
   s += " <li class='active list'><a>" + i + "</a></li>"
  }
  else {
   s += " <li class='list'><a>" + i + "</a></li>";
  }
 }
}
  //       
  s += "<li class='xy'><a>&raquo;</a></li>";
$("#fenye").html(s);
//         
  $(".list").click(function(){
   //      
   //      ，  page（   ）
   page = $(this).text();
//   page      ，        
   //  load  
   load();
   //            
   loadfenye();
   //        
  })
  //       
  $(".sy").click(function(){
   //     
   if(page>1)
   {
    //       
    page = parseInt(page) - 1;
   }
   //   page      ，        
   //  load  
   load();
   //            
   loadfenye();
   //        
  })
  //       
  $(".xy").click(function(){
//   alert(da);
   if(page<da)
   {
    //       
    page = parseInt(page) + 1;
   }
   //   page      ，        
   //  load  
   load();
   //            
   loadfenye();
   //        
  })
 }
 function load()
 {
  var name = $("#name").val();
  $.ajax({
   url: "jiazai.php",
//            data
   data:{page:page,name:name},
   type:"POST",
   dataType: "TEXT",
   success: function (data) {
    var str = "";
    var hang = data.split("|");
    //split     
    for (var i = 0; i < hang.length; i++) {
     //         ;    ；
     var lie = hang[i].split("-");
     str = str +
      "<tr><td>"
      + lie[0] +
      "</td><td>"
      + lie[1] +
      "</td><td>" +
      "<button type='button' class='btn btn-info sc' ids='"+lie[0]+"'>    </button><button type='button' class='btn btn-primary xq' ids='"+lie[0]+"'>    </button>" +
      //ids       
      "</td></tr>";
    }
    $("#td").html(str);
    //  td html     
    addshanchu();
    addxiangqing();
   }
  });
 }
 //        
 function addxiangqing()
 {
  $(".xq").click(function(){
   $('#myModal').modal('show')
   //     
   var ids = $(this).attr("ids");
   $.ajax({
    url:"xiangqing.php",
    data:{ids:ids},
    dataType:"TEXT",
    type:"POST",
     success:function(data){
     //  
      var lie = data.split("^");
//      var str = "<div>  :"+lie[0]+"</div><div>  :"+lie[1]"</div>";
      //    
      var str = "<div>  ："+lie[0]+"</div><div>  ："+lie[1]+"</div>";
      $("#nr").html(str);
   }
   });
   //            
  })
 }
 //          ：
 function addshanchu()
 {
  //         
  $(".sc").click(function () {
   var ids = $(this).attr("ids");
   $.ajax({
    url: "shanchu.php",
    data: {ids: ids},
    dataType: "TEXT",
    type: "POST",
    success: function (d) {
     if (d.trim() == "ok") {
      alert("    ");
      //         
      load();
     }
     else {
      alert("    ");
     }
    }
   });
  })
 }
</script>

전체 페이지 조회:

<?php
//     
include ("db.class.php");
$db = new db();
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like '%{$name}%' ";
}
$sql = "select count(*) from min WHERE {$tj} ";
$zts = $db->strquery($sql);
//   
echo ceil($zts/3);
//ceil    

페이지 정보 불 러 오 는 페이지:

<?php
include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//    page
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like '%{$name}%' ";
}
$num = 3;
//      
$tg = ($page-1)*3;//    
$sql = "select * from min where {$tj} limit {$tg},{$num}";
//limit:    ，         ，        
$arr = $db->Query($sql);
//  
$str="";
foreach ($arr as $v)
{
 $str = $str.implode("-",$v)."|";
 // - $v   ,    1- 2- , |  ，    1- |2- |
}
$str = substr($str,0,strlen($str)-1);
//     ：  0   ，      -1
//strlen       
echo $str;

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!