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

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

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


Ronee 20-03-2017 10:03:07

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

 ความคิดเห็นที่ 1
  นึกภาพไม่ออก


ninenik 20-03-2017
 ความคิดเห็นที่ 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?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 


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


ronee 20-03-2017 15:57
 ความคิดเห็นที่ 7
เพิ่มชื่อไฟล์รูปภาพ ในไฟล์ jsondata.php 

1
2
3
4
5
6
$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 ให้กับรูปตามต้องการ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 ก็จะสามารถประยุกต์เป็นตัวอื่นๆ ได้

1
2
3
4
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  เข้าไป ประมาณนี้

1
2
3
4
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 
เป็นประโยชน์มากๆ เลยsmileysmiley


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
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ