DataTables Pagination And Search With PHP/MySQL

สวัสดีครับในวันนี้เราจะมาแนะนำการใข้งาน 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>

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

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

<!DOCTYPE html>

<html>

<head>

<title>Data Table</title>

$(document).ready( function () {

//คำสั่ง Javascript สำหรับเรียกใช้งาน Datatable

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

} );

</script>

</head>

<body>

<thead>

<tr>

<th>Position</th>

<th>Office</th>

<th>Start date</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

<tr>

<td>Tiger Nixon</td>

<td>System Architect</td>

<td>Edinburgh</td>

</tr>

<tr>

<td>Garrett Winters</td>

<td>Accountant</td>

<td>Tokyo</td>

</tr>

<tr>

<td>Ashton Cox</td>

<td>Junior Technical Author</td>

<td>San Francisco</td>

</tr>

<tr>

<td>Cedric Kelly</td>

<td>Senior Javascript Developer</td>

<td>Edinburgh</td>

</tr>

<tr>

<td>Airi Satou</td>

<td>Accountant</td>

<td>Tokyo</td>

</tr>

<tr>

<td>Brielle Williamson</td>

<td>Integration Specialist</td>

</tr>

<tr>

<td>Herrod Chandler</td>

<td>Sales Assistant</td>

<td>San Francisco</td>

</tr>

<tr>

<td>Rhona Davidson</td>

<td>Integration Specialist</td>

<td>Tokyo</td>

</tr>

<tr>

<td>Colleen Hurst</td>

<td>Javascript Developer</td>

<td>San Francisco</td>

</tr>

<tr>

<td>Sonya Frost</td>

<td>Software Engineer</td>

<td>Edinburgh</td>

</tr>

<tr>

<td>Jena Gaines</td>

<td>Office Manager</td>

<td>London</td>

</tr>

<tr>

<td>Quinn Flynn</td>

<td>Support Lead</td>

<td>Edinburgh</td>

</tr>

<tr>

<td>Charde Marshall</td>

<td>Regional Director</td>

<td>San Francisco</td>

</tr>

<tr>

<td>Haley Kennedy</td>

<td>Senior Marketing Designer</td>

<td>London</td>

</tr>

<tr>

<td>Tatyana Fitzpatrick</td>

<td>Regional Director</td>

<td>London</td>

</tr>

<tr>

<td>Michael Silva</td>

<td>Marketing Designer</td>

<td>London</td>

</tr>

<tr>

<td>Chief Financial Officer (CFO)</td>

</tr>

<tr>

<td>Gloria Little</td>

<td>Systems Administrator</td>

</tr>

<tr>

<td>Bradley Greer</td>

<td>Software Engineer</td>

<td>London</td>

</tr>

<tr>

<td>Personnel Lead</td>

<td>Edinburgh</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');

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);
	
}


?>

<?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>

<!DOCTYPE html>

<html>

<head>

<title>Data Table</title>

$(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>

<thead>

<tr>

<th>First name</th>

<th>Email</th>

</tr>

</thead>

</table>

</body>

</html>

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

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

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

Popular Posts