Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,036

HOME > PHP > PHP Forum > การใช้งาน pagination ติดปัญหาเมื่อกดเปลี่ยนไปหน้าถัดไป

การใช้งาน pagination ติดปัญหาเมื่อกดเปลี่ยนไปหน้าถัดไป

เริ่มหัวข้อใหม่

tharakorn

โพสกระทู้ ( 42 )
บทความ ( 0 )

รูปที่ 1 แสดงข้อมูลหลังจากเลือก Select แต่เมื่อทำการกดไปที่หน้า 2 ระบบดันกลายเป็นรูปที่ 2 แบบนี้ต้องแก้ไขยังไงครับโดยปกติกดหน้าสองข้อมูลหน้าที่ 2

Code (PHP) code หน้า แสดงตาราง

<?php

$q =($_GET['q']);

  // Import the file where we defined the connection to Database.     
  require_once "db_connect.php";   
    
  $per_page_record =8;  // Number of entries to show in a page.   
        // Look for a GET variable page if not found default is 1.        
        if (isset($_GET["page"])) {    
            $page  = $_GET["page"];    
        }    
        else {    
          $page=1;    
        }    
    
        $start_from = ($page-1) * $per_page_record;     
    
        $query = "SELECT * FROM tb_vlan where switch='".$q."' ORDER BY id desc LIMIT  $start_from, $per_page_record ";     
        $result = mysqli_query ($con, $query);    
      
        
        // $sql = "SELECT * FROM tb_cctv where switch='".$_SESSION['month1']."' ";
        // $result1 = $con->query($sql);
        // while($row = $result1->fetch_assoc()) {
        // $_SESSION["id"] = $row["id"];
        // $_SESSION["start"] = $row["start"];
        // $_SESSION["end"] = $row['end'];
        // }

?>      
<table class="styled-table">
    <thead>
        <tr>
            <th width="2%">NO.</th>
            <th width="15%" >SW</th>
            <th width="3%">IP</th>
            <th width="2%">port</th>
            <th>Type</th>
            <th>Vlan</th>
            <th>Equiptment</th>
            <th>IPEquiptment</th>
            <th>Descript</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
    <?php while($row = $result->fetch_assoc()): ?>
        <tr>
            <td><?php echo $row['id']; ?></td>
            <td><?php echo $row['switch']; ?></td>
            <td><?php echo $row['ipaddress']; ?></td>
            <td><?php echo $row['port'];?></td>
            <td><?php echo $row['typeport']; ?></td>
            <td><?php echo $row['vlan']; ?></a></td>
            <td><?php echo $row['equipment']; ?></td>
            <td><?php echo $row['ipequiptment']; ?></td>
            <td><?php echo $row['description']; ?></td>
            <td><?php echo $row['location']; ?></td>
           
                
    <?php endwhile ?>
 </tbody>
</table>
<div class="pagination">    
      <?php  
        $query = "SELECT * FROM tb_vlan where switch='".$q."' ORDER BY id DESC  ";     
        $rs_result = mysqli_query($con, $query);     
        $row = mysqli_fetch_row($rs_result);     
        $total_records = $row[0];     
          
    echo "</br>";     
        // Number of pages required.   
        $total_pages = ceil($total_records / $per_page_record);     
        $pagLink = "";       
      
        if($page>=2){   
            echo "<a href='select.php?page=".($page-1)."'>  Prev </a>";   
        }       
                   
        for ($i=1; $i<=$total_pages; $i++) {   
          if ($i == $page) {   
              $pagLink .= "<a class = 'active' href='select.php?page="  
                                                .$i."'>".$i." </a>";   
          }               
          else  {   
              $pagLink .= "<a href='select.php?page=".$i."'>   
                                                ".$i." </a>";     
          }   
        };     
        echo $pagLink;   
  
        if($page<$total_pages){   
            echo "<a href='select.php?page=".($page+1)."'>  Next </a>";   
        }   
  
      ?>    
      </div>  
  
  
      <div class="inline">   
      <input id="page" type="number" min="1" max="<?php echo $total_pages?>"   
      placeholder="<?php echo $page."/".$total_pages; ?>" required>   
      <button onClick="go2Page();">Go</button>   
     </div>    
    </div>   
  </div>  
  
  <script>   
    function go2Page()   
    {   
        var page = document.getElementById("page").value;   
        page = ((page><?php echo $total_pages; ?>)?<?php echo $total_pages; ?>:((page<1)?1:page));   
        window.location.href = 'select.php?page='+page;   
    }   
  </script>
</div>
    
</body>
</html>

<? 
mysqli_close($con);
?>

Code (PHP) code หน้า select

<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","family.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">

<option value="">Open this select menu</option>
    <option value="sw26-serverroom">sw26-serverroom</option>
    <option value="">sw26poe-serverroom</option>
    <option value="">sw24-serverroom</option>
    <option value="">sw48-serverroom</option>
    <option value="">sw24poe-floor1</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

Tag : PHP

ประวัติการแก้ไข
2024-11-04 10:54:28
2024-11-04 10:56:36

Date : 2024-11-04 10:53:17

By : tharakorn.jin

View : 37

Reply : 5

No. 1

mr.v

โพสกระทู้ ( 4,753 )
บทความ ( 8 )

ก็คุณเขียนโค้ดไว้แบบนั้น มันก็เลยทำงานแบบนั้นไง

คือหน้าในรูปที่ 1 คือไฟล์ select.php แล้วในไฟล์ select เมื่อคุณเลือก select box มันก็ทำการ AJAX request ไปยังหน้า family.php แล้วเอาผลลัพธ์จากหน้านั้นมาแสดง

แต่ใน pagination คุณไปส่งลิ้งค์ไปยังหน้า select.php มันก็เลยกลับไปหน้า select โดยพ่วง querystring ?page=ไปด้วย แต่มันไม่ทำงานเพราะคุณต้องวกไปอ่านข้างบนว่าใน select.php คุณเขียนไว้แบบนั้น แล้วมันก็ไม่มีการเรียก AJAX ไปยังหน้า family.php ใดๆอีกด้วย มันจึงจบด้วยรูปที่ 2

ผมว่ากรณีนี้ถ้าคุณเขียนโค้ดเอง ก็แค่ทำความเข้าใจ flow การทำงานเสียใหม่ก็แก้ได้ไม่ยากหรอก จิ๊บๆ ค่อยๆทำความเข้าใจไป
แต่ถ้าไม่ได้เขียนโค้ดเองก็เหนื่อยลากเลยล่ะ เพราะมันผิดตรง pagination แล้ว

ทางแก้ก็ต้องดัก pagination แล้วเอาแค่เลขหน้ามา ทำการส่ง AJAX เหมือนเก่าแต่เพิ่มเลขหน้าเข้าไปด้วย แค่นั้น จบ

Date : 2024-11-04 21:45:44

By : mr.v

No. 2

mr.v

โพสกระทู้ ( 4,753 )
บทความ ( 8 )

ส่วนของ <div class="inline">...go2Page()</div> ไม่รู้ยังจำเป็นไหม เพราะไม่เห็นในรูปเลย อันนี้ถ้าไม่ใช้ก็เอาออกไปเลย เพราะเกะกะเปล่าๆ

ส่วนของ pagination ก็เพิ่ม class='pagination-link' กับ data-page-number='" . $i . "' เข้าไป

แก้ไข select box show user ในหน้า select ใส่ id ให้มันด้วย เช่น <select id="users"

แล้วในส่วนของ JS ในหน้า select ก็เพิ่ม JS ไว้ก่อนปิด </body> ก็ได้
Code (JavaScript)

document.addEventListener('click', (event) => {
    let thisTarget = event.target;
    if (thisTarget.closest('.pagination-link')) {
        event.preventDefault();
        thisTarget = thisTarget.closest('.pagination-link');
        const pageNum = thisTarget.dataset.pageNumber;
        // จากนั้นเอาตัวแปร pageNum ไปเรียก showUser อีกที โดยฟังก์ชั่นนั้นก็แก้ไขด้วย ให้มันรองรับ argument ชื่อ pageNum โดยถ้ามีตัวเลขหน้าระบุ ให้ส่งไปเรียก AJAX 
        showUser(document.getElementById('users').value, pageNum);
    }
});

ในส่วนของฟังก์ชั่น showUser ก็เพิ่ม argument เข้าไปพร้อมตรวจเช็คด้วย
Code (JavaScript)

function showUser(str, pageNum) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  let pageQuerystring = '';
  if (typeof(pageNum) !== 'string' || isNaN(pageNum)) {
    pageQuerystring = '';
  } else {
    pageQuerystring = '&page=' + pageNum;
  }
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","family.php?q="+str + pageQuerystring, true);
  xmlhttp.send();
}

ประมาณนี้. ยังไม่ได้ทดสอบนะแต่น่าจะพอได้

Date : 2024-11-04 22:11:53

By : mr.v

No. 3

mr.v

โพสกระทู้ ( 4,753 )
บทความ ( 8 )

แล้วก็
<? เปลี่ยนไปใช้ <?php
ยกเว้น <?=

Date : 2024-11-04 22:14:29

By : mr.v

No. 4

tharakorn

โพสกระทู้ ( 42 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 2 เขียนโดย : mr.v เมื่อวันที่ 2024-11-04 22:11:53

รายละเอียดของการตอบ ::

เดี่ยวผมลองแก้ไขดู ขอบคุณน่ะคุณครับที่แนะนำ

Date : 2024-11-05 09:10:47

By : tharakorn.jin

No. 5

Manussawin

โพสกระทู้ ( 2,255 )
บทความ ( 5 )

แนะนำให้ใช้งาน Datatable นะครับ ครบ จบ

https://datatables.net/examples/server_side/simple.html

Date : 2024-11-05 10:16:40

By : Manussawin

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : การใช้งาน pagination ติดปัญหาเมื่อกดเปลี่ยนไปหน้าถัดไป

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก