|
 |
| |
สอบถามผู้รู้หน่อยครับ เกี่ยวกับการปรับแต่งการแสดงข้อมูล ของ server-side ของ datatable เพื่อใช้งานฟังก์ชั่น fancybox |
| |
 |
|
|
 |
 |
|
ขออ้างอิงจากกระทู้ 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
|
 |
 |
 |
 |
| Date :
2016-04-27 15:01:06 |
By :
akkaneetha |
View :
1546 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ใหน ๆ มันก็น่าจะใช้bootstrap ทำไมไม่ใช้ modal bootstrap เลยล่ะครับ
|
| |
|
|
| |
| Date :
2016-04-27 18:19:14 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอนนี้แก้ได้แล้วครับ จากคำแนะนำ จากเพจ 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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
