Skip to main content

DataTables Pagination And Search With PHP/MySQL

monkeywebstudio PHP

สวัสดีครับในวันนี้เราจะมาแนะนำการใข้งาน Data Tables  ซึ่งเป็น plug-in สำหรับ จัดการการแสดงข้อมูลในรูปแบบตาราง ซึ่งใช้งานง่าย มาก ๆ ครับ

รายละเอียดเพิ่มเติม https://datatables.net/

มาติดตั้งแบบเริ่มต้นกันเลย

1.สร้างไฟล์ demo.html ดังนี้

<!DOCTYPE html>
<html>
<head>
	<title>Data Table</title>
	
	<!--นำเข้าไฟล์  Css -->
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>
	
	<!--นำเข้าไฟล์  Jquery -->
	<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
	
	<!--นำเข้าไฟล์  plug-in DataTable -->
	<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
	
	<script>
		$(document).ready( function () {
			
			//คำสั่ง Javascript สำหรับเรียกใช้งาน Datatable
			$('#example').DataTable();
		} );
	</script>
	
</head>
<body>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</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>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>

        </tbody>
    </table>

</body>
</html>

ตัวอย่างการทำงาน

DataTables จะทำการแบ่งหน้าให้อัตโนมัติ และ มีช่อง Search สามารถค้นหาข้อมูลได้ทันที แต่จากตัวอย่างนี้จะเป็นการแสดงข้อมูลแบบ Static ที่อยู่ใน Html  จะเหมาะกับตารางที่ไม่ค่อยมีข้อมูลเปลี่ยนแปลง

 

การใช้งาน  DataTables Server-side processing  แสดง และ ค้นหาข้อมูลด้วย PHP/MySQL

สำหรับต้วอย่างต่อไปนี้ เราจะใช้ความสามารถ  Server-side processing ของ DataTables  ในการแสดง และ ค้นหาข้อมูลจาก ฐานข้อมูล MySQL ด้วย PHP ครับ

ใน MySQL สร้างฐานข้อมูล Database ชื่อ test และ สร้างตารางชื่อ datatable ดังนี้

CREATE TABLE `datatable` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `first_name` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
 `last_name` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
 `email` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=51 DEFAULT CHARSET=utf8;

INSERT INTO `datatable` (`id`, `first_name`, `last_name`, `email`) VALUES
(1, 'Wendi', 'Drackford', 'wdrackford0@hp.com'),
(2, 'Ugo', 'Boundy', 'uboundy1@uol.com.br'),
(3, 'Porter', 'Henryson', 'phenryson2@biblegateway.com'),
(4, 'Karim', 'Koppens', 'kkoppens3@kickstarter.com'),
(5, 'Nicko', 'Bamford', 'nbamford4@quantcast.com'),
(6, 'Coop', 'Landrick', 'clandrick5@wired.com'),
(7, 'Kessia', 'Clemson', 'kclemson6@answers.com'),
(8, 'Shelley', 'Stanners', 'sstanners7@oakley.com'),
(9, 'Collete', 'Whelpdale', 'cwhelpdale8@chronoengine.com'),
(10, 'Arthur', 'Cowle', 'acowle9@gov.uk'),
(11, 'Marty', 'MacCrosson', 'mmaccrossona@dedecms.com'),
(12, 'Falkner', 'Chazotte', 'fchazotteb@upenn.edu'),
(13, 'Nina', 'Cowx', 'ncowxc@soundcloud.com'),
(14, 'Diane-marie', 'Keiley', 'dkeileyd@usnews.com'),
(15, 'Antonie', 'Petrenko', 'apetrenkoe@craigslist.org'),
(16, 'Elliott', 'Donnison', 'edonnisonf@accuweather.com'),
(17, 'Rube', 'Farmiloe', 'rfarmiloeg@geocities.jp'),
(18, 'Xavier', 'Earney', 'xearneyh@mail.ru'),
(19, 'Goran', 'Swarbrigg', 'gswarbriggi@phoca.cz'),
(20, 'Lavena', 'Repper', 'lrepperj@storify.com'),
(21, 'Sheila', 'Crank', 'scrankk@adobe.com'),
(22, 'Tillie', 'McGowran', 'tmcgowranl@wix.com'),
(23, 'Kirbie', 'Colisbe', 'kcolisbem@xing.com'),
(24, 'Kiley', 'Tinkham', 'ktinkhamn@opera.com'),
(25, 'Alvin', 'Hammon', 'ahammono@twitter.com'),
(26, 'Debora', 'Rodinger', 'drodingerp@ameblo.jp'),
(27, 'Cyndie', 'Myrick', 'cmyrickq@go.com'),
(28, 'Nichols', 'Baggarley', 'nbaggarleyr@hp.com'),
(29, 'Ramona', 'Clow', 'rclows@shutterfly.com'),
(30, 'Margaux', 'Golding', 'mgoldingt@google.cn'),
(31, 'Juditha', 'Lemasney', 'jlemasneyu@tripod.com'),
(32, 'Debora', 'Bonifazio', 'dbonifaziov@youtube.com'),
(33, 'Jennee', 'Dearle', 'jdearlew@jalbum.net'),
(34, 'Valentino', 'Thorouggood', 'vthorouggoodx@msn.com'),
(35, 'Ferdy', 'Horwell', 'fhorwelly@fda.gov'),
(36, 'Lodovico', 'Staniland', 'lstanilandz@foxnews.com'),
(37, 'Eben', 'Olijve', 'eolijve10@mozilla.com'),
(38, 'Gretta', 'Cullip', 'gcullip11@pagesperso-orange.fr'),
(39, 'Tedra', 'Blockey', 'tblockey12@biblegateway.com'),
(40, 'Carena', 'Bartlosz', 'cbartlosz13@independent.co.uk'),
(41, 'Garwood', 'Chipchase', 'gchipchase14@nps.gov'),
(42, 'Cybill', 'Klimkov', 'cklimkov15@oracle.com'),
(43, 'Marieann', 'Kimmings', 'mkimmings16@plala.or.jp'),
(44, 'Guglielmo', 'Alderton', 'galderton17@dailymotion.com'),
(45, 'Chad', 'Altree', 'caltree18@statcounter.com'),
(46, 'Tansy', 'Crumbleholme', 'tcrumbleholme19@constantcontact.com'),
(47, 'Casey', 'Simison', 'csimison1a@quantcast.com'),
(48, 'Hadley', 'Jaulme', 'hjaulme1b@about.me'),
(49, 'Gearalt', 'Chaffin', 'gchaffin1c@drupal.org'),
(50, 'Clim', 'Spary', 'cspary1d@bandcamp.com');

สร้างไฟล์  server_processing.php สำหรับประมวลผลข้อมูลจาก Server

โดยไฟล์นี้จะเป็นการรับข้อมูล เลขหน้าที่แสดง และ ข้อมูลการค้นหา จาก Datatable
จากนั้น  PHP ส่งผลการค้นหาที่ได้ กลับไป แสดงผล ยัง Datatable

<?php

if(isset($_POST['start'])){
	
		$start = $_POST['start'];//รับข้อมูล เลขหน้าที่จะแสดง 
		
		$length = $_POST['length']; //รับข้อมูล จำนวนที่แสดงต่อหน้า ค่าเริ่มต้นคือ 10
		
		$searchData = $_POST['search']['value'];//รับข้อมูล ช่อง Search
		
		$servername = "localhost";
		$username = "root";
		$password = "";
		$dbname = "test";//ชื่อฐานข้อมูล

		// Create connection
		$conn = mysqli_connect($servername, $username, $password, $dbname);
		
		// Check connection
		if (!$conn) {
		  die("Connection failed: " . mysqli_connect_error());
		}

		$searchValueResult = "";
		
		$searchValueData = mysqli_real_escape_string($conn,$searchData); // Search value
		
		//Query กรณีมีการค้นหาข้อมูล
		if($searchValueData != ''){
		   $searchValueResult = " WHERE first_name LIKE '%".$searchValueData."%'  OR last_name LIKE '%".$searchValueData."%' OR email LIKE '%".$searchValueData."%' ";
		}
		
		//Query นับจำนวนข้อมูลทั้งหมด
		$t = mysqli_query($conn,"SELECT COUNT(*) as total FROM datatable");
		$records = mysqli_fetch_assoc($t);
		$totalRecords = $records['total'];

		//Query ข้อมูลที่จะแสดงใน DataTable
		$sql = "SELECT * FROM datatable $searchValueResult LIMIT $start , $length";
		$result = mysqli_query($conn, $sql);
		
		$data = array();

		if (mysqli_num_rows($result) > 0) {

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

			    $data[] = array(
					'first_name'=> $row['first_name'],
					'last_name'=> $row['last_name'],
					'email'=> $row['email'],
				);
		  }
		}

		mysqli_close($conn);

		$json_data = array(
			"draw"            => intval( $_REQUEST['draw'] ),   
			"recordsTotal"    => intval($totalRecords ),  
			"recordsFiltered" => intval($totalRecords),
			"data"            => $data   // total data array
		);

		echo json_encode($json_data);
	
}


?>

สร้างไฟล์ index.php

โดยไฟล์นี้จะเป็นการแสดงข้อมูลที่ได้รับจากไฟล์  server_processing.php

<!DOCTYPE html>
<html>
<head>
	<title>Data Table</title>
	
	<!--นำเข้าไฟล์  Css -->
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>
	
	<!--นำเข้าไฟล์  Jquery -->
	<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
	
	<!--นำเข้าไฟล์  plug-in DataTable -->
	<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
	
	<script>
			$(document).ready(function() {
				
				//คำสั่ง Javascript สำหรับเรียกใช้งาน Datatable
				$('#example').DataTable( {
					"processing": true,
					"serverSide": true,
					'serverMethod': 'post',
					"ajax": "server_processing.php",
					      'columns': [
							 { data: 'first_name' },
							 { data: 'last_name' },
							 { data: 'email' },
						  ]
				} );
			} );
	</script>
</head>
<body>


	<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
				<th>Email</th>
            </tr>
        </thead>
    </table>

</body>
</html>

ตัวอย่างการทำงาน

เมื่อมีการเลือกเปลี่ยนหน้า หรือ ค้นหาข้อมูลในช่อง Search Datatable จะส่งข้อมูลไปยังไฟล์  server_processing.php เพื่อ Query ข้อมูลจาก Database และส่งข้อมูลกลับมาแสดงผลในตาราง Datatable

 

 

 

 


Deprecated: Function create_function() is deprecated in /home/service1/domains/monkeywebstudio.com/public_html/wp-content/plugins/simple-lightbox/controller.php on line 1642