การวนเเสดงหน้าเพจไปเรื่อยๆ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา การวนเเสดงหน้าเพจไปเรื่อยๆ

การวนเเสดงหน้าเพจไปเรื่อยๆ

อยากทราบวิธีการ วนหน้าเพจไปเรื่อยๆ โดยนับจำนวนในดาต้าเบส
เช่น ในเเต่ละหน้าต้องการเเสดงเเค่ 5 บรรทัดต่อ 1 หน้าเพจ
#อยากได้โค๊ดแสดงหน้าถัดไปอัตโนมัติ 1 ไป 2 ไป 3 แล้ววนกลับมา 1 ใหม่ ทำแบบนี้ไปเรื่อยๆ

Ronee 20-03-2017 10:03:07

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

นึกภาพไม่ออก

ninenik 20-03-2017

ความคิดเห็นที่ 2

<?php
date_default_timezone_set('Asia/Bangkok');
// $date = date("d-m-Y");
// $time = date("H:i");
$thai_day_arr = array("อาทิตย์","จันทร์","อังคาร","พุธ","พฤหัสบดี","ศุกร์","เสาร์");
$thai_month_arr = array(
    "0"=>"",
    "1"=>"มกราคม",
    "2"=>"กุมภาพันธ์",
    "3"=>"มีนาคม",
    "4"=>"เมษายน",
    "5"=>"พฤษภาคม",
    "6"=>"มิถุนายน",
    "7"=>"กรกฎาคม",
    "8"=>"สิงหาคม",
    "9"=>"กันยายน",
    "10"=>"ตุลาคม",
    "11"=>"พฤศจิกายน",
    "12"=>"ธันวาคม"
);
function thai_date($time){
    global $thai_day_arr,$thai_month_arr;
    $thai_date_return="วัน".$thai_day_arr[date("w",$time)];
    $thai_date_return.= "ที่ ".date("j",$time);
    $thai_date_return.=" เดือน".$thai_month_arr[date("n",$time)];
    $thai_date_return.= " พ.ศ.".(date("Yํ",$time)+543);
    $thai_date_return.= "  เวลา ".date("H:i",$time)." น.";
    return $thai_date_return;
}
$eng_date=time();
 ?>

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <link rel="shortcut icon" href="img/hh.png">
   <!-- <meta http-equiv="refresh" content="5;URL=index.php?page="> -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>รายการผ่าตัด</title>
   <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/lumen/bootstrap.min.css">
   <link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </head>
<body>
   <nav class="navbar navbar-default navbar-fixed-top">
     <div class="container">
       <div class="navbar-header">
         <form class="navbar-form navbar-left"></form>
           <form class="navbar-form navbar-right">
             <div class="scGridLabelFont1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                รายการผ่าตัด <?php echo thai_date($eng_date); ?></div>
           </form>
        </div>
        <style>
        @import url('https://fonts.googleapis.com/css?family=Kanit:600');
        .scGridLabelFont {
             color: #FFF;
             font-family: 'Kanit', sans-serif;font-size: 42px;
             font-weight: bold;
             padding: 2px 4px;
             text-decoration: none;
         }
        @import url('https://fonts.googleapis.com/css?family=Kanit:600');
        .scGridLabelFont1 {
             color: #000;
             font-family: 'Kanit', sans-serif;font-size: 32px;
             font-weight: bold;
             padding: 2px 4px;
             text-decoration: none;
         }
        </style>
       </div>
     </nav>
   <br><br><br>
   <?php
   $con = mysqli_connect('192.168.99.20', 'root', 'admin', 'operation');
   $perpage = 5;
      if (isset($_GET['page'])) {
        $page = $_GET['page'];
      } else {
        $page = 1;
      }

      $start = ($page - 1) * $perpage;

      $sql = "select * from detail where status = 0 order by detauto desc limit {$start} , {$perpage} ";
      $query = mysqli_query($con, $sql);
   ?>
<form class="form-horizontal">
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-highlight" id="myTable">
      <thead class="scGridLabelFont" bgcolor="#00000">
        <tr>
          <th class="text-center">เลขประจำตัว</th>
          <th class="text-center">ห้องผ่าตัด</th>
          <th class="text-center">สถานะ</th>
          <th class="text-center">เริ่มเวลา</th>
        </tr>
      </thead>
      <tbody>
        <?php while ($result = mysqli_fetch_assoc($query)) { ?>
          <tr class="scGridLabelFont">
            <!-- <td class="hidden"><?php echo $result['detauto'];?></td> -->
            <td class="text-center" bgcolor="#00000"><?php echo $result['dethn']; ?></td>
            <td class="text-center" bgcolor="#00000"><?php echo $result['detroom']; ?></td>
            <td class="text-center" bgcolor="#00000"><img src="img/<?php echo $result['image']; ?>" alt="" width="400"></td>
            <td class="text-center" bgcolor="#00000"><?php echo $result['detstarttime']; ?></td>
          </tr>
          <?php } ?>
      </tbody>
    </table>
    <?php
    $sql2 = "select * from detail ";
    $query2 = mysqli_query($con, $sql2);
    $total_record = mysqli_num_rows($query2);
    $total_page = ceil($total_record / $perpage);
    ?>

    <ul class="pagination">
      <li>
        <a href="index.php?page=1" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <?php for($i=1;$i<=$total_page;$i++){ ?>
      <meta http-equiv="refresh" content="10;URL=index.php?page=<?php echo $i-1; ?>">
      <li><a http-equiv="refresh" href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
      <?php } ?>
      <li>
        <a href="index.php?page=<?php echo $total_page;?>" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </div>
 <script src="assets/bootstrap/js/bootstrap.min.js"></script>
 </body>
</html>
</table>
</div>
</form>

ronee 20-03-2017 10:56

ความคิดเห็นที่ 3

ตัวอย่าง นี้ใช้ ajax ดึงข้อมูลทุก 10 วิ ว่างๆ จะเอาโค้ดมาเขียนบทความ

ninenik 20-03-2017

ความคิดเห็นที่ 4

ช่ายแล้ว ต้องการให้แสดงแบบนี้เลย ต้องการบทความมากๆ รออยู่น่ะค่ะ

ronee 20-03-2017 13:26

ความคิดเห็นที่ 5

ดูเนื้อหานี้เป็นแนวทาง

ประยุกต์ ดึงรายการแบบ realtime พร้อมแบ่งหน้า ด้วย ajax ร่วมกับ bootstrap css

https://www.ninenik.com/content.php?arti_id=780 via @ninenik

ninenik 20-03-2017

ความคิดเห็นที่ 6

ขอบคุนมากค่ะ ตอนนี้ได้แล้ว
ถามเพิ่มเติมอีกนิดค่ะ จะให้แสดงผลลัพธ์ในคอมลัมน์ที่เปนรูปภาพ ต้องปรับโค้ดตรงส่วนไหนค่ะ
ลองใช้ <img src="img/<?php echo $row['image']; ?>" alt="" width="400"> ข้อมูลไม่ออก

ronee 20-03-2017 15:57

ความคิดเห็นที่ 7

เพิ่มชื่อไฟล์รูปภาพ ในไฟล์ jsondata.php

$json_data['data'][] = array(
    "item_id" 			=> ($chk_page*$per_page)+$i,
    "prov_id" 				=> $row['province_id'],
    "prov_name" 		=> $row['province_name'],
    "prov_pic" 		=> 'img1.jpg'
);

ตัวอย่างด้านบนกำหนดแบบตายตัว ถ้าดึงจากฐานข้อมูล ก็ใช้ตัวแปร $row['ฟิลด์ที่เก็บชื่อไฟล์รูปภาพ']

เพิ่มคอลัมน์ รูปภาพ และแทรกแท็ก img พร้อมกับกำหนดด style ให้กับรูปตามต้องการ

<table class="table table-bordered table-striped">
	<tr>
		<td>#</td>
        <td>ID</td>
		<td>Name</td>
        <td>img</td>
	</tr>
    <tbody class="show-list-data">
        <tr class="list-data">
            <td></td>
            <td></td>
            <td></td>
            <td><img src="" style="width:50px;"></td>
        </tr>
    </tbody>
</table>

สุดท้ายก็ส่วนดึงข้อมูลมาแสดง ถ้ามีความรู้เกี่ยวกับการใช้ selector ใน jquery ก็จะสามารถประยุกต์เป็นตัวอื่นๆ ได้

rowListData+=$(rowData.find("td:eq(0)").text(response.data[i].item_id).end()
.find("td:eq(1)").text(response.data[i].prov_id).end()
.find("td:eq(2)").text(response.data[i].prov_name).end()
.find("td:eq(3) > img").attr("src",response.data[i].prov_pic).end()).html();

บรรทัดสุดท้ายหมายถึง หาแท็กรูปภาพที่อยู่ในคอลัมน์ td ตัวสุดท้าย แล้วเปลี่ยน attribute ค่า src เป็นชื่อไฟล์รูปภาพที่เราส่ง
ค่ากลับมา ถ้ามี path หรือโฟลเดอร์เก็บรูป ก็ให้บวกค่า string เข้าไป ประมาณนี้

rowListData+=$(rowData.find("td:eq(0)").text(response.data[i].item_id).end()
.find("td:eq(1)").text(response.data[i].prov_id).end()
.find("td:eq(2)").text(response.data[i].prov_name).end()
.find("td:eq(3) > img").attr("src",'pic/'+response.data[i].prov_pic).end()).html();

ninenik 20-03-2017

ความคิดเห็นที่ 8

ขอบคุนมากค่ะ ตอนนี้โปรแกรมทำเส็จแล้ว เพราะบทความดีจาก ninenik.com
เป็นประโยชน์มากๆ เลย

ronee 21-03-2017 09:26

ความคิดเห็นที่ 9

พอเอางานที่เขียนขึ้น Host มันติดต่อฐานข้อมูลไม่ได้ค่ะ ก่อนเอาขึ้นก้อทดสอบแล้วว่าฐานข้อมูลถูกต้อง

พอรันไฟล์คอนเนค ก้อขึ้นแบบนี้

Fatal error: Class 'mysqli' not found in /............

ronee 22-03-2017 11:20

ความคิดเห็นที่ 10

Server หรือ host น่าจะยังไม่ได้ติดตั้ง หรือเปิดใช้งาน mysqli extensions
ลองแจ้งให้เขาจัดการให้ แต่ถ้าไม่ได้จริงๆ ก็ให้เปลี่ยนเป็นการ
ใช้งาน mysql เฉยๆ แทน

ninenik 22-03-2017

1 2 Next

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน