Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,291

HOME > PHP > PHP Forum > สอบถามผู้รู้หน่อยครับ เกี่ยวกับการปรับแต่งการแสดงข้อมูล ของ server-side ของ datatable เพื่อใช้งานฟังก์ชั่น fancybox





 

สอบถามผู้รู้หน่อยครับ เกี่ยวกับการปรับแต่งการแสดงข้อมูล ของ server-side ของ datatable เพื่อใช้งานฟังก์ชั่น fancybox

 



Topic : 122641



โพสกระทู้ ( 344 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



ขออ้างอิงจากกระทู้ https://www.thaicreate.com/php/forum/122576.html ที่ผมสอบถามไปแล้ว และ แก้ปัญหาได้ส่วนเดียว

และเท่าที่หาอ่าน และที่เจอ ก็มีแค่จาก http://www.mccran.co.uk/index.cfm/2011/5/19/JQuery-datatable-with-added-FancyBox-and-auto-refresh
ทางเว็บสร้างตัวอย่างเป็น http://www.mccran.co.uk/examples/datatables-fancybox/

พยายามแกะโค้ดอยู่ แต่ก็ยังงงอยู่ครับ

ว่าจะสร้างลิ้งคืใน datatable ให้เปิดใช้งาน class fancybox ยังไง

ปล. หรือว่าจะแนะนำว่า จะใช้วิธีอื่นที่มีลักษณะการค้นหา และแสดงผลคล้ายกันก็ได้ เดิมๆ ที่เคยทำ คือ เลือกฟิลด์ แล้วใส่คำค้นหา กดปุ่มค้นเอา

โค้ดหน้าหลัก
Code (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" />
        <!-- fancybox -->
  		<script type="text/javascript" src="../../fancybox/scripts/jquery-1.4.3.min.js"></script>
  		<script type="text/javascript" src="../../fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
  		<script type="text/javascript" src="../../fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  		<link rel="stylesheet" href="../../fancybox/style/style.css" />
  		<link rel="stylesheet" type="text/css" href="../fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
        <script type="text/javascript">
   		var $jq143 = jQuery.noConflict(true);
		</script>
        <!-- DataTable -->
		<script type="text/javascript" language="javascript" src="datatable/media/js/jquery163.js"></script>
		<script type="text/javascript" language="javascript" src="datatable/media/js/jquery.dataTables.edit.js"></script>
        <!--  Other file -->
        <link rel="stylesheet" href="datatable/media/css/page_stype.css">
		
		<title>DataTables example</title>
       <!-- นำเข้าสคริปที่เกี่ยวข้อง-->
		<style type="text/css" title="currentStyle">
			@import "datatable/media/css/demo_page.css";
			@import "datatable/media/css/demo_table.css";
		</style>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#CourseList').dataTable( {  // เขียนโค้ด โดยระบุให้ ไปดึงข้อมูลจาก ไฟล์ ids.php ที่อยุ่ในโฟลเดอร์ scripts มาทำงาน 
					"bProcessing": true,    // โดยเอาข้อมูลที่ได้มาแสดง ใน table ที่มี ไอดี เท่ากับ example
					"bServerSide": true,
					"sAjaxSource": "datatable/scripts/serverEditProcessing.php"
				} );
			} );
		</script>
<script type="text/javascript"> 
 // JavaScript Document
  $jq143(document).ready(function() {
			$jq143('a[id^="ADD"]').fancybox({
				'width'				: '80%',
				'height'			: '100%',
				'autoScale'     	: false,
				'speedIn'		:	600,
				'speedOut'		:	200,
				'transitionIn'	:	'elastic',  //other elastic,fade
				'transitionOut'	:	'fade',
				/*'transitionIn'		: 'none',
				'transitionOut'		: 'none',*/
				'type'				: 'iframe',
				onClosed	:	function() {
				//window.location='Course_Manage.php'; 
				window.location.reload(true);
				//document.iframe['ShowData'].location.reload(true); 
				}
			});
			
			$jq143('a[id^="DEL"]').fancybox({
				'width'				: '50%',
				'height'			: '50%',
				'autoScale'     	: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
				onStart		:	function() {
					return window.confirm('ต้องการลบข้อมูลรายการนี้?');
				},
				onClosed	:	function() {
				window.location='Course_Manage.php'; 
				//window.location.reload(true);
				//document.iframe['ShowData'].location.reload(true); 
				}
			});
		});
</script>
	</head>
	<!-- <body id="dt_example"> -->
    <body>
    <div class="databox">
    <div id="h1">จัดการรายการกิจกรรม</div>
		<div id="container">
<div class="linkpage" style="margin:20px 0px 20px 0px; text-align:right"><a id="ADD" href="Course_Register.php" class="fancybox" title="เพิ่มรายการกิจกรรมใหม่">เพิ่มรายการใหม่</a></div>
		  <div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="CourseList">
	<thead>
		<tr>
			<th width="20%">ชื่อกิจกรรม (ไทย)</th>
			<th width="20%">ชื่อกิจกรรม (อังกฤษ)</th>
			<th width="20%">ที่ปรึกษากิจกรรม</th>
			<th width="10%">จำนวนที่รับ</th>
         <th width="10%">จัดการ </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="6" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
</table>
			</div>
		</div>
        </div>
	</body>
</html>


โค้ด server-side
Code (PHP)
<?php
	
    //$aColumns = array('iso', 'name', 'printable_name', 'iso3','numcode' , 'id');
	$aColumns = array('courseNameTh', 'courseNameEn', 'courseAdviser', 'courseMaxadmit','courseID'); 
	
	/* กำหนด primary key ให้กับคอลัมน์ */
	//$sIndexColumn = "id";
	$sIndexColumn = "courseID";
	
	/* ชื่อตาราง */
	//$sTable = "country";
	$sTable = "tb_course";
	
	/* ส่วนของการเชื่อมต่อฐานข้อมูล */
	$gaSql['user']       = "root";
	$gaSql['password']   = "1234";
	//$gaSql['db']         = "country";
	$gaSql['db']         = "free_course";
	$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'] );
	mysql_query("SET NAMES utf8");
	
	/* 
	 * แบ่งหน้า
	 */
	$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 ข้างล่าง 
			if ( $aColumns[$i] == "courseID" ) 
			{
				 $id = $aRow['courseID'];
				 $nameth = $aRow['courseNameTh'];
				/* เมื่อมาถึงส่วนนี้ก็สามารถ ดึง เอา id ที่เป็น primary key ไปใช้ด้วยแล้ว ส่งไปค่าไปอีกหน้า หรือเขียน javascript function มารับค่าไปทำอะไรต่อ ก็ตามสบายเลยครับ */
				//$row[] = "<a href='javascript:alert(".$id.")' >แก้ไข</a><a href='http://www.turotialdev.com?id=".$id."' >ลบ</a>" ;
				$row[] = "<center><a id='EDIT' href='Course_edit.php?CourseID=".$id."' class='fancybox' title='แก้ไขข้อมูลของ ".$nameth." '><img src='images/edit.png' width='15' height='15'></a>         <a id='DEL' class='fancybox' href='Course_edit.php?CourseID=".$id."'  title='ลบข้อมูลของ  ".$nameth." '><img src='images/del.png' width='15' height='15' ></a></center>" ;
			}			
			else if ( $aColumns[$i] != ' ' )
			{
				$row[] = "<center>".$aRow[ $aColumns[$i] ]."</center>";        /* General output */
			}
		}
		$output['aaData'][] = $row;
	}
	echo json_encode( $output );
?>




Tag : PHP, MySQL, Ajax, jQuery









ประวัติการแก้ไข
2016-04-27 15:02:46
2016-04-27 17:22:37
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-04-27 15:01:06 By : akkaneetha View : 634 Reply : 2
 

 

No. 1



โพสกระทู้ ( 5,123 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ใหน ๆ มันก็น่าจะใช้bootstrap ทำไมไม่ใช้ modal bootstrap เลยล่ะครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-04-27 18:19:14 By : deawx
 


 

No. 2



โพสกระทู้ ( 344 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอนนี้แก้ได้แล้วครับ จากคำแนะนำ จากเพจ http://www.tutorialdev.com/

หน้าหลัก เพิ่ม ฟังก์ชั่นนี้เข้ามา
Code (JavaScript)
<script type="text/javascript">		
	function pop(url,reCall,width,height){
	   if(!url) return;
	   if(typeof width=="undefined")
		   width = '70%';
	   if(typeof height=="undefined")
		   height = '100%';
	   $jq143.fancybox({
		   'showCloseButton' : true,
		  'autoDimensions'	 : true,
		   'width'         	 : width,
		   'height'        	 : height,
		   'autoScale'		 : false,
		   'centerOnScroll'  : true,
		   'transitionIn'	 : 'elastic',
		   'transitionOut'	 : 'fade',
		   'speedIn'		:	600,
		   'speedOut'		:	200,
		   'titlePosition'   : 'outside',
		   'type'		     : 'iframe',
		   'href'		     : url,				
		   'onClosed': function (){
				//alert(1);
				//window.location='Course_Manage.php'; 
				window.location.reload(true);
				//document.iframe['ShowData'].location.reload(true); 
				   
		  }
	   });
	}
			
	function EDIT(id){
		if(!id)return;
		var url = "Course_edit.php";
		pop(url);
	}
	
	function ADD(id){
		if(!id)return;
		var url = "Course_Register.php";
		pop(url);
	}
	
	function DEL(id){
		if(!id)return;
		var url = "Course_del.php";
		/*		var width = '80';
		var height = '50';*/
		pop(url);	
	}
</script>

หน้า server-side แก้ตรงสร้างลิ้งค์
Code (PHP)
$row[] = "<center><a onclick='EDIT(".$id.")' title='$title'><img src='images/edit.png' width='15' height='15'></a>";



ประวัติการแก้ไข
2016-04-27 23:46:23
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-04-27 23:45:06 By : akkaneetha
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามผู้รู้หน่อยครับ เกี่ยวกับการปรับแต่งการแสดงข้อมูล ของ server-side ของ datatable เพื่อใช้งานฟังก์ชั่น fancybox
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่