ตัวอย่าง code DataTable + PHP + mysqli (ฟรี code)

worksohp : DataTable + PHP + MySQL แบบง่ายสไตล์ devbanban นะครับ อย่างที่ได้กล่าวไปแล้วในบทความ การใช้งาน data table อย่างง่ายๆ ตอนที่ 1 และ WE.12 การใช้งาน data table ร่วมกับ Dreamweaver + php + database การใช้ datatable แบบง่ายๆ ส่วนใน workshop นี้จะเอา mysqli เข้าใช้นะครับ เพราะมีคนหาตัวอย่างกันเยอะมากๆ มาดูลูกเล่นที่เด่นๆ

แสดงข้อมูลในตารางอย่างเป็นระเบียบ
มีระบบค้นหาข้อมูลแม่นมากๆ Realtime ด้วยนะ
มีระบบเรียงลำดับข้อมูล
มีการแบ่งหน้าให้อัตโนมัติ และแสดงข้อมูลหน้าถัดไป
มีการแสดงผลรวมของข้อมูลอย่างถูกต้อง
สามารถแสดงตารางแบบ Responsive ได้
และที่สำคัญเอามาใช้ฟรี จ้าาา

มาสร้างตารางที่ใช้กันก่อนนะครับ ผมตั้งชื่อตารางตัวอย่างว่า tb_member ส่วนฐานข้อมูลตั้่งชื่อว่า myproduct และในตารางตัวอย่างมีข้อมูลตัวอย่างให้ทดลองด้วยนะ

(export มาจาก XAMPP Apache + MariaDB + PHP + Perl for Windows 5.5.38)

CREATE TABLE `tb_member` (
  `mem_id` int(8) NOT NULL,
  `mem_name` varchar(50) NOT NULL,
  `mem_last` varchar(50) NOT NULL,
  `mem_email` varchar(20) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--
-- Dumping data for table `tb_member`
--

INSERT INTO `tb_member` (`mem_id`, `mem_name`, `mem_last`, `mem_email`) VALUES
(1, 'เก่งมาก', 'เก่งมาก', 'no@hotmail.com'),
(2, 'เรียนดี', 'เรียนดี', 'aaa@live.com'),
(3, 'ขยันดี', 'ขยันดี', 'aaa@hotmail.com'),
(4, 'ผู้ทดสอบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),
(5, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),
(6, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),
(7, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),
(8, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),
(9, 'aaa', 'ทดสอบระบบฐานข้อมูล', 'aa@aa'),
(10, 'bbb', 'ทดสอบระบบฐานข้อมูล', 'a@a');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_member`
--
ALTER TABLE `tb_member`
  ADD PRIMARY KEY (`mem_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tb_member`
--
ALTER TABLE `tb_member`
  MODIFY `mem_id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;

CREATE TABLE `tb_member` (

`mem_id` int(8) NOT NULL,

`mem_name` varchar(50) NOT NULL,

`mem_last` varchar(50) NOT NULL,

`mem_email` varchar(20) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

-- Dumping data for table `tb_member`

INSERT INTO `tb_member` (`mem_id`, `mem_name`, `mem_last`, `mem_email`) VALUES

(1, 'เก่งมาก', 'เก่งมาก', 'no@hotmail.com'),

(2, 'เรียนดี', 'เรียนดี', 'aaa@live.com'),

(3, 'ขยันดี', 'ขยันดี', 'aaa@hotmail.com'),

(4, 'ผู้ทดสอบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),

(5, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),

(6, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),

(7, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),

(8, 'ผู้ทดสอบระบบ', 'ทดสอบระบบฐานข้อมูล', 'test@test.com'),

(9, 'aaa', 'ทดสอบระบบฐานข้อมูล', 'aa@aa'),

(10, 'bbb', 'ทดสอบระบบฐานข้อมูล', 'a@a');

-- Indexes for dumped tables

-- Indexes for table `tb_member`

ALTER TABLE `tb_member`

ADD PRIMARY KEY (`mem_id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `tb_member`

ALTER TABLE `tb_member`

MODIFY `mem_id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;

ต่อไปการสร้างการเชื่อมต่อฐานข้อมูล ตั้งชื่อไฟล์่ว่า conn.php root คือ username , password คือ รหัสที่ใช้ในการเชื่อมต่อฐานข้อมูล *ถ้าไม่ได้ตั้งไว้ก็ลบ password ออกครับ หรือเปลียนตามที่เราตั้ง

<?php
$con= mysqli_connect("localhost","root","password","myproduct") or die("Error: " . mysqli_error($con));

mysqli_query($con, "SET NAMES 'utf8' ");
 
?>

<?php

$con= mysqli_connect("localhost","root","password","myproduct") or die("Error: " . mysqli_error($con));

mysqli_query($con, "SET NAMES 'utf8' ");

มาที่พระเอกของเรา datatable.php (อาจตั้งชื่อไหนก็ได้เช่น devbanban.php หึๆ ) คำอธิบาย code ก็อยู่ในคอมเม้นนะจ๊ะ

<meta charset="UTF-8">
<title>dataTables example by devbanban.com</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
 
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js">
</script>
 <script>    
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

<?php
//1. เชื่อมต่อ database: 
include('conn.php');  //ไฟล์เชื่อมต่อกับ database ที่เราได้สร้างไว้ก่อนหน้าน้ี

//2. query ข้อมูลจากตาราง tb_member: 
$query = "SELECT * FROM tb_member" or die("Error:" . mysqli_error()); 
//3.เก็บข้อมูลที่ query ออกมาไว้ในตัวแปร result . 
$result = mysqli_query($con, $query); 
//4 . แสดงข้อมูลที่ query ออกมา โดยใช้ตารางในการจัดข้อมูล: 

echo "<table id='example' class='display' cellspacing='0' border='1'>";
//หัวข้อตาราง
echo "<thead>";
echo "<tr>";
echo "<th>รหัส</th><th>ชื่อ</th><th>นามสกุล</th><th>อีเมล์</th>";
echo "</tr>";
echo "</thead>";
while($row = mysqli_fetch_array($result)) { 
  echo "<tr>";
  echo "<td>"."<center>" .$row["mem_id"] ."</center>"."</td> "; 
  echo "<td>" .$row["mem_name"] .  "</td> ";
  echo "<td>" .$row["mem_last"] .  "</td> ";
  echo "<td>" .$row["mem_email"] .  "</td> ";
  echo "</tr>";
}
echo "</table>";
//5. close connection
mysqli_close($con);
?>
<!--
  reference : https://datatables.net/examples/basic_init/zero_configuration.html
 
  -->

<title>dataTables example by devbanban.com</title>

</script>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

<?php

//1. เชื่อมต่อ database:

include('conn.php'); //ไฟล์เชื่อมต่อกับ database ที่เราได้สร้างไว้ก่อนหน้าน้ี

//2. query ข้อมูลจากตาราง tb_member:

$query = "SELECT * FROM tb_member" or die("Error:" . mysqli_error());

//3.เก็บข้อมูลที่ query ออกมาไว้ในตัวแปร result .

$result = mysqli_query($con, $query);

//4 . แสดงข้อมูลที่ query ออกมา โดยใช้ตารางในการจัดข้อมูล:

echo "<table id='example' class='display' cellspacing='0' border='1'>";

//หัวข้อตาราง

echo "<thead>";

echo "<tr>";

echo "<th>รหัส</th><th>ชื่อ</th><th>นามสกุล</th><th>อีเมล์</th>";

echo "</tr>";

echo "</thead>";

while($row = mysqli_fetch_array($result)) {

echo "<tr>";

echo "<td>"."<center>" .$row["mem_id"] ."</center>"."</td> ";

echo "<td>" .$row["mem_name"] . "</td> ";

echo "<td>" .$row["mem_last"] . "</td> ";

echo "<td>" .$row["mem_email"] . "</td> ";

echo "</tr>";

}

echo "</table>";

//5. close connection

mysqli_close($con);

<!--

reference : https://datatables.net/examples/basic_init/zero_configuration.html

-->

ผลการทำงาน

ปรับแต่งเพิ่มเติม

<script>    
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

การเรียงลำดับ DESC “aaSorting” :[[0,’desc’]]
การเลือกช่วงแสดงข้อมูล “lengthMenu” : [[20,50,100, -1], [20,50,100,”All’]]

ลองปรับแต่งเพิ่มเติมได้ตามคู่มือที่ : https://datatables.net/

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี   เลขที่  878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี เลขที่ 406-359094-1
————————————————————————————
ธนาคารกสิกร สาขาเออร์เบิร์น สแควร์ ประชาชื่น
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี เลขที่ 048-1-17571-2

Fanpage : https://www.facebook.com/sornwebsites/

devbanban

ตัวอย่าง code DataTable + PHP + mysqli (ฟรี code)

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

แจกฟรี To-do list Ui ออกแบบจาก Bootstrap v5.3

Byพิศิษฐ์ บวรเลิศสุธี

Share this:

Related

Related Post

You missed