Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > สอบถามเรื่องการใช้ ajax query + datatable ครับ มีลิ้งตัวอย่างด้านใน

[PHP] สอบถามเรื่องการใช้ ajax query + datatable ครับ มีลิ้งตัวอย่างด้านใน

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

NawaponK

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

ผมได้ใช้วิธีตามลิ้งนี้

https://www.w3schools.com/php/showphp.asp?filename=demo_ajax_mysql

ใช้งานได้แ้ลวครับ แต่ที่ไฟล์ getuser.php ผมไม่สามารถใช้ datatableได้

แต่ลองนำไฟล์ getuser.php มาเปิดแยกใช้งานdatatable ได้ปกตินะครับ

Tag : PHP

Date : 2018-10-04 13:45:42

By : tonmasterbp

View : 2165

Reply : 11

No. 1

Luz

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

เอาไฟล์ getuser.php ของคุณมาแปะสิครับ

Date : 2018-10-04 15:30:31

By : Luz

No. 2

NawaponK

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

ผมลองตัดออกมาเฉพาะส่วนที่จำเป็น แล้วลองรันใหม่ผลออกมาก็เหมือนเดิมครับ
อันนี้คือไฟล์ getuser.php

Code (PHP)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
    <title>ORDER</title>
 
     
    <!-- Bootstrap Core CSS -->
    <link href="css/lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="css/helper.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
 
 
      
      <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/css/bootstrap-select.css">
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/js/bootstrap-select.js"></script>
 
 
      <link rel="stylesheet" href="fontstyle.css" /> 
 
      <script type="text/javascript">
        $(document).ready(function() {
                $('#showitem').DataTable();
         });
      </script>
 
 
</head>
 
<body class="">
 
                         
                             
                             
            <div class="card-header">
                                <h4 class="m-b-0 text-white">ค้นหารายการสินค้า </h4>
                            </div>
 
                            <div class="card-body">
                                <div class="table-responsive">
                                            <table id="showitem" class="table table-bordered table-striped">
                                                    <thead>
                                                        <tr>
                                                             
                                                            <th>code</th>
                                                            <th>รหัสหนังสือ</th>
                                                            <th>รูป</th>
                                                            <th>ชื่อหนังสือ</th>
                                                            <th>ราคาปก(บาท)</th>
                                                            <th>เลือกสินค้า</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                         
                                                        <?php for($u=0;$u<20;$u++){ ?>
                                                        <tr>
                                                            <td align="center"><?php echo $u; ?></td>
                                                            <td align="center">sdfds</td>
                                                            <td align="center">dsdadasasdaa</td>
                                                            <td>dfsdfsdf</td>
                                                            <td align="center">35</td>
                                                            <td>sdadasdas</td>
                                                        </tr>
                                                        <?php } ?>
 
                                                    </tbody>
                                                </table>
                                </div>
                            </div>
 
 
 
 
    <script src="js/lib/datatables/datatables.min.js"></script>
    <script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
 
 
 
</body>
 
</html>

Date : 2018-10-04 15:57:46

By : tonmasterbp

No. 3

Tuii

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

ลองวางต่อกันแบบนี้ดูครับ

<script src="js/lib/datatables/datatables.min.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
          $('#showitem').DataTable();
    });
</script>

Date : 2018-10-04 17:06:31

By : Jatmentz

No. 4

NawaponK

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

ตอบความคิดเห็นที่ : 3 เขียนโดย : Jatmentz เมื่อวันที่ 2018-10-04 17:06:31

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

ไม่หายครับผม

Date : 2018-10-05 08:19:42

By : tonmasterbp

No. 5

Krungsri

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

Script ควรจะวางไว่ก่อน </body> ครับ
Code (PHP)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
    <title>ORDER</title>
 
    <!-- Bootstrap Core CSS -->
    <link href="css/lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="css/helper.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="fontstyle.css" /> 
</head>
 
<body class="">
 
    <div class="card-header">
        <h4 class="m-b-0 text-white">ค้นหารายการสินค้า </h4>
    </div>
 
    <div class="card-body">
        <div class="table-responsive">
            <table id="showitem" class="table table-bordered table-striped">
                <thead>
                    <tr>
 
                        <th>code</th>
                        <th>รหัสหนังสือ</th>
                        <th>รูป</th>
                        <th>ชื่อหนังสือ</th>
                        <th>ราคาปก(บาท)</th>
                        <th>เลือกสินค้า</th>
                    </tr>
                </thead>
                <tbody>
 
                    <?php for($u=0;$u<20;$u++){ ?>
                        <tr>
                            <td align="center"><?php echo $u; ?></td>
                            <td align="center">sdfds</td>
                            <td align="center">dsdadasasdaa</td>
                            <td>dfsdfsdf</td>
                            <td align="center">35</td>
                            <td>sdadasdas</td>
                        </tr>
                    <?php } ?>
 
                </tbody>
            </table>
        </div>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/js/bootstrap-select.js"></script>
 
    <script src="js/lib/datatables/datatables.min.js"></script>
    <script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#showitem').DataTable();
        });
    </script>
 
</body>
 
</html>

Date : 2018-10-05 09:24:17

By : Krungsri

No. 6

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

ตอนแรก คุณวาง script เรียก datatable ก่อนจะ include library มา ซึ่งถ้าแก้ตาม
NO 3 ยังไม่หาย ให้ดู inspect ว่ามีอะไร error อีก อาจจะ หาไฟล์ไม่เรียก ไม่เจอ

Date : 2018-10-05 09:39:51

By : DK

No. 7

Mr.กล้า

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

เหมือน dataTables.css จะหายไปนะ

Date : 2018-10-05 12:07:22

By : apisitp

No. 8

NawaponK

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

ทุกท่านครับ ผมลองเขียนทั้งหมดใหม่อีกครั้ง

ผมคิดว่าเป็นที่ function showUser หรือเปล่าครับ
เพราะผลออกมาเหมือนกันเลยครับ คือที่ไฟล์ getuser.php รันออกมาเดี่ยวๆใช้งานdatatableได้ แต่พอมาใช้ผ่าน function showUser กลับใช้งานไม่ได้ออกมาแต่เป็น table ธรรมดา

index.php

Code (PHP)

<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","getuser.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
 
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
 
</body>
</html>

และ getuser.php

Code (PHP)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Data Tables</title>
 
        <!-- นำเข้า  CSS จาก Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         
        <!-- นำเข้า  CSS จาก dataTables -->
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
          
        <!-- นำเข้า  Javascript จาก  Jquery -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <!-- นำเข้า  Javascript  จาก   dataTables -->
        <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
 
        <script type="text/javascript">
            //คำสั่ง Jquery เริ่มทำงาน เมื่อ โหลดหน้า Page เสร็จ 
            $(function(){
                //กำหนดให้  Plug-in dataTable ทำงาน ใน ตาราง Html ที่มี id เท่ากับ example
                $('#example').dataTable();
            });
        </script>
  </head>
  <body>
   
<h1>Data Tables </h1>
 
        <table class="table table-bordered" id="example">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
                <tbody>
 
                    <tr>
                        <td>Zorita Serrano</td>
                        <td>Software Engineer</td>
                        <td>San Francisco</td>
                        <td>56</td>
                        <td>2012/06/01</td>
                        <td>$115,000</td>
                    </tr>
                    <tr>
                        <td>Jennifer Acosta</td>
                        <td>Junior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>43</td>
                        <td>2013/02/01</td>
                        <td>$75,650</td>
                    </tr>
                    <tr>
                        <td>Cara Stevens</td>
                        <td>Sales Assistant</td>
                        <td>New York</td>
                        <td>46</td>
                        <td>2011/12/06</td>
                        <td>$145,600</td>
                    </tr>
                    <tr>
                        <td>Hermione Butler</td>
                        <td>Regional Director</td>
                        <td>London</td>
                        <td>47</td>
                        <td>2011/03/21</td>
                        <td>$356,250</td>
                    </tr>
                    <tr>
                        <td>Lael Greer</td>
                        <td>Systems Administrator</td>
                        <td>London</td>
                        <td>21</td>
                        <td>2009/02/27</td>
                        <td>$103,500</td>
                    </tr>
                    <tr>
                        <td>Jonas Alexander</td>
                        <td>Developer</td>
                        <td>San Francisco</td>
                        <td>30</td>
                        <td>2010/07/14</td>
                        <td>$86,500</td>
                    </tr>
                    <tr>
                        <td>Shad Decker</td>
                        <td>Regional Director</td>
                        <td>Edinburgh</td>
                        <td>51</td>
                        <td>2008/11/13</td>
                        <td>$183,000</td>
                    </tr>
                    <tr>
                        <td>Michael Bruce</td>
                        <td>Javascript Developer</td>
                        <td>Singapore</td>
                        <td>29</td>
                        <td>2011/06/27</td>
                        <td>$183,000</td>
                    </tr>
                    <tr>
                        <td>Donna Snider</td>
                        <td>Customer Support</td>
                        <td>New York</td>
                        <td>27</td>
                        <td>2011/01/25</td>
                        <td>$112,000</td>
                    </tr>
                     
                    <tr>
                        <td>Jena Gaines</td>
                        <td>Office Manager</td>
                        <td>London</td>
                        <td>30</td>
                        <td>2008/12/19</td>
                        <td>$90,560</td>
                    </tr>
                    <tr>
                        <td>Quinn Flynn</td>
                        <td>Support Lead</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2013/03/03</td>
                        <td>$342,000</td>
                    </tr>
                    <tr>
                        <td>Charde Marshall</td>
                        <td>Regional Director</td>
                        <td>San Francisco</td>
                        <td>36</td>
                        <td>2008/10/16</td>
                        <td>$470,600</td>
                    </tr>
                    <tr>
                        <td>Haley Kennedy</td>
                        <td>Senior Marketing Designer</td>
                        <td>London</td>
                        <td>43</td>
                        <td>2012/12/18</td>
                        <td>$313,500</td>
                    </tr>
                    <tr>
                        <td>Tatyana Fitzpatrick</td>
                        <td>Regional Director</td>
                        <td>London</td>
                        <td>19</td>
                        <td>2010/03/17</td>
                        <td>$385,750</td>
                    </tr>
                </tbody>
            </table>
         
  </body>
</html>

Date : 2018-10-05 13:59:51

By : tonmasterbp

No. 9

Chaidhanan

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

ลองเอา iframe ครอบ สิ่งที่จะโชว์ อีกทีดีไหม ไม่ต้องกลัว script จะซ้ำซ้อน

หรือตัดหัวตัดหาง ออก เอามาแต่ข้อมูล ใน body แล้ว ลิงค์ script ที่ไม่ซ้ำซ้อน มา append

Date : 2018-10-05 14:26:29

By : Chaidhanan

No. 10

NawaponK

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

ตอบความคิดเห็นที่ : 9 เขียนโดย : Chaidhanan เมื่อวันที่ 2018-10-05 14:26:29

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

ขอบคุณครับพี่ผมลองทำตามวิธีคล้ายๆของพี่

โดยการใช้
Code (PHP)

$.ajax({
                 type: 'post',
                 url: 'ajax/querybook.php',
                 data: {
                  get_option:val
                 },
                 success: function (response) {
                       $('#divbook').html(response);
                 }
            });

โดยที่ไฟล์หลักผมมี
Code (PHP)

<table>
<thead></thead>
<tbody id="divbook"></tbody>
</table>

จากตรงนี้ ระบบdatatable เพิ่มtd ให้จริงแต่ ไม่มีการคำนวณหน้าให้ อาจเป็นเพราะไม่ได้รันมาตั้งแต่ table

เด่วผมจะลองทำแบบiframe ที่พี่แนะนำอีกครั้งครับ

Date : 2018-10-05 16:07:34

By : tonmasterbp

No. 11

Chaidhanan

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

file ที่ถูก request ด้วย ajax
Code (PHP)

<table id=newtable >
<thead></thead>
<tbody></tbody>
</table>
<script>
$('#newtable').datatable(); //ใส่แบบนี้ก็ทำงานแล้วครับ ถ้า ตัวเรียกนี้มี boostrap datatable อยู่ก่อนแล้ว
</script>

Date : 2018-10-06 14:51:27

By : Chaidhanan

ค้นหาข้อมูล

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

Re : สอบถามเรื่องการใช้ ajax query + datatable ครับ มีลิ้งตัวอย่างด้านใน

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Load balance : Server 02

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); [PHP] สอบถามเรื่องการใช้ ajax query + datatable ครับ มีลิ้งตัวอย่างด้านใน

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

ค้นหาข้อมูล

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

Notice

[PHP] สอบถามเรื่องการใช้ ajax query + datatable ครับ มีลิ้งตัวอย่างด้านใน