Datatable : ตอน แก้ไข ลบข้อมูล ด้วย datatable

By -

จากบทความนี้  การแทรกคลาสเข้าไปใน datatable  มาจนถึงบทความนี้ … ผมจะเอา แนวคิดมาใช้กับการ แก้ไข หรือ ลบ ข้อมูล นะครับ ตอนนี้ผมงานยุ่งมากเลยจริงๆ จนแทบไม่ได้เขียนบทความนานแล้ว จนมะเช้าตื่นนอนมาออนเอม  มีน้องคนนึงมาถามเกี่ยวกับ datatable  + กับขู่บังคับ ผมเลยบอกว่า ถ้ามีคนมากด like ครับ 100 ผมจะเขียนบทความนี้ให้ ดัน ครบเลยจริงๆ เลยต้องตามสัญญาครับ เอาละเข้าเรื่อง ถ้ายังไม่เข้าใจ datatable ก็กลับไปอ่านบทความ เกี่ยวกับ datatable ที่ผมได้เขียนเอาไว้ บ้างนะครับ เพราะ มาถึงตรงนี้ ถ้าคนที่เคยใช้ จะถึงบางอ้อทันที

ก่อนอื่น สร้าง ไฟล์ server_side_edit.php แล้วเขียนโค้ด

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
		
		<title>DataTables example</title>
       <!-- นำเข้าสคริปที่เกี่ยวข้อง-->
        
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#example').dataTable( {  // เขียนโค้ด โดยระบุให้ ไปดึงข้อมูลจาก ไฟล์ serverEditProcessing.php ที่อยุ่ในโฟลเดอร์ scripts มาทำงาน 
					"bProcessing": true,    // โดยเอาข้อมูลที่ได้มาแสดง ใน table ที่มี ไอดี เท่ากับ example
					"bServerSide": true,
					"sAjaxSource": "scripts/serverEditProcessing.php"
				} );
			} );
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				<p>DataTables server-side processing Tutorialdev.com</p>
				<p>ตอนแทรก ลบ แก้ไข ข้อมูล </p>
        </div>
			
			<h1>&nbsp;</h1>
<h1>Live example</h1>
			<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width="20%">iso</th>
			<th width="25%">name</th>
			<th width="25%">printable_name</th>
			<th width="15%">iso3</th>
			<th width="15%">numcode</th>
         <th width="15%">แก้ไข - ลบ </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="6" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
</table>
			</div>
			
			
	
		</div>
	</body>
</html>

 

จากสคริปด้านบน   เขียนโค้ด โดยระบุให้ ไปดึงข้อมูลจาก ไฟล์ serverEditProcessing.php ที่อยุ่ในโฟลเดอร์ scripts มาทำงาน

ต่อมาก็สร้าง ไฟล์ที่ชื่อ   serverEditProcessing.php

แล้วเขียนโค้ด

<?php
	
	/* ทำการย้าย สลับ นิดหน่อย เอา id มาต่อท้าย 
	 */
	$aColumns = array('iso', 'name', 'printable_name', 'iso3','numcode' , 'id');  
	
	/* กำหนด primary key ให้กับคอลัมน์ */
	$sIndexColumn = "id";
	
	/* ชื่อตาราง */
	$sTable = "country";
	
	/* ส่วนของการเชื่อมต่อฐานข้อมูล */
	$gaSql['user']       = "root";
	$gaSql['password']   = "1234";
	$gaSql['db']         = "country";
	$gaSql['server']     = "localhost";
	
	/* ถ้าเกิดต้องการนำเข้าแบบไฟล์ ก็ต้อง ปิดตรงส่วนการเชื่อมต่อด้านบน แล้วใช้ โค้ดด้านล่างนี้แทน  */
	//include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
	
	

	/* 
	 * MySQL connection
	 */
	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
		die( 'Could not open connection to server' );
	
	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
		die( 'Could not select database '. $gaSql['db'] );
	
	
	/* 
	 * แบ่งหน้า
	 */
	$sLimit = "";
	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
	{
		$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
			mysql_real_escape_string( $_GET['iDisplayLength'] );
	}
	
	
	/*
	 * จัดเรียงลำดับ
	 */
	$sOrder = "";
	if ( isset( $_GET['iSortCol_0'] ) )
	{
		$sOrder = "ORDER BY  ";
		for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
		{
			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
			{
				$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
				 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
			}
		}
		
		$sOrder = substr_replace( $sOrder, "", -2 );
		if ( $sOrder == "ORDER BY" )
		{
			$sOrder = "";
		}
	}
	
	
	$sWhere = "";
	if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
	{
		$sWhere = "WHERE (";
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
		}
		$sWhere = substr_replace( $sWhere, "", -3 );
		$sWhere .= ')';
	}
	
	/* เวลาค้นหาในคอลัมน์  */
	for ( $i=0 ; $i<count($aColumns) ; $i++ )
	{
		if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
		{
			if ( $sWhere == "" )
			{
				$sWhere = "WHERE ";
			}
			else
			{
				$sWhere .= " AND ";
			}
			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
		}
	}
	
	
	/*
	 *คำสั่ง SQL ดึงข้อมูลออกมาโชว์
	 * 
	 */
	$sQuery = "
		SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
		FROM   $sTable
		$sWhere
		$sOrder
		$sLimit
	";
	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	
	/* จำนวนข้อมูลหลังจากค้นหา */
	$sQuery = "
		SELECT FOUND_ROWS()
	";
	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];
	
	/*  จำนวนทั้งหมด */
	$sQuery = "
		SELECT COUNT(".$sIndexColumn.")
		FROM   $sTable
	";
	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];
	
	
	/*
	 * ส่วนการแสดงผล
	 */
	$output = array(
		"sEcho" => intval($_GET['sEcho']),
		"iTotalRecords" => $iTotal,
		"iTotalDisplayRecords" => $iFilteredTotal,
		"aaData" => array()
	);
	
	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
		$row = array();
		
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
			if ( $aColumns[$i] == "id" ) // ถ้าเจอ collumns ที่มีชื่อว่า id ก็ ให้ แทนที่ ค่าที่จะส่งกลับไปให้ id ด้วย link ข้างล่าง 
			{
				 $id = $aRow['id'];
				/* เมื่อมาถึงส่วนนี้ก็สามารถ ดึง เอา id ที่เป็น primary key ไปใช้ด้วยแล้ว ส่งไปค่าไปอีกหน้า หรือเขียน javascript function มารับค่าไปทำอะไรต่อ ก็ตามสบายเลยครับ
				 */
				$row[] = "<a href='javascript:alert(".$id.")' >แก้ไข</a><a href='http://www.turotialdev.com?id=".$id."' >ลบ</a>" ;
			
			}
			else if ( $aColumns[$i] != ' ' )
			{
				/* General output */
				$row[] = $aRow[ $aColumns[$i] ];
			}
		}
		$output['aaData'][] = $row;
	}
	
	echo json_encode( $output );
	
	?>

มีจุดที่น่าสังเกตุ อยู่หน่อยนึงนะครับ  ในไฟล์ที่ทุกอย่างแทบๆจะเหมือนเดิมเลย กับบทความก่อน ๆ เพียงแค่เราตุกติกกับ datatable นิดนึง

	/* ทำการย้าย สลับ นิดหน่อย เอา id มาต่อท้าย 
	 */
	$aColumns = array('iso', 'name', 'printable_name', 'iso3','numcode' , 'id');  

ตรงนี้ผมทำงารสลับ เอา id มาอยู่ท้ายสุด

 			if ( $aColumns[$i] == "id" ) // ถ้าเจอ collumns ที่มีชื่อว่า id ก็ ให้ แทนที่ ค่าที่จะส่งกลับไปให้ id ด้วย link ข้างล่าง 
			{
				 $id = $aRow['id'];
				/* เมื่อมาถึงส่วนนี้ก็สามารถ ดึง เอา id ที่เป็น primary key ไปใช้ด้วยแล้ว ส่งไปค่าไปอีกหน้า หรือเขียน javascript function มารับค่าไปทำอะไรต่อ ก็ตามสบายเลยครับ
				 */
				$row[] = "<a href='javascript:alert(".$id.")' >แก้ไข</a><a href='http://www.turotialdev.com?id=".$id."' >ลบ</a>" ;
			
			}

แล้วก็ตอนที่ loop เช็ค ผมก็แค่เช็คว่า เพื่อ ดึง เอาไอดี ขึ้นมา แล้วใส่ link หรือจะเป็นรูปภาพ อะไรก็แล้วแต่ครับ ส่วนการทำงานก็คอมเมนต์ไว้เรียบร้อยแล้ว โหลดไปรันได้เลย ครับ

view

สุดท้ายก็ Download All File ซะ

mitsumasa