Forgot Password ??

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

	Registered : 109,037

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

สอบถามเรื่องการใช้ 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 : 2141

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,586 )
บทความ ( 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,586 )
บทความ ( 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] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

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

โดย

อีเมล์

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