 |
การใช้ Fancybox กับ dataTable แบบ server-side-in-phpmysql-and-ajax |
| |
 |
|
|
 |
 |
|
พูดยากครับ กับการแก้ไขผลลัพท์ของ output ที่เกี่ยวข้องกับ javascript /่ jquery ถ้าไม่ได้อยู่หน้างานตอบลำบาก องค์ประกอบมันเยอะไหนจะมี CSS / การแสดงผลของBrowser /รูปแบบการเขียนของผู้พัฒนา(คนที่โค้ดมาแต่แรก) มีเป็นพันๆรูปแบบ .... ไม่เหมือนพวก PHP หรือ mysql ที่มองแล้วตอบได้เลย วิธีแก้ก็คือ ค่อยๆทำไปทีละจุด ผิดตรงไหนก็หยุดกดctrl+Z แล้วนั่งพิจารณา หัดแกะโค้ดไปเรื่อยๆ อันไหนยากก็ตัดใจไปหาโหลดอันที่เราเข้าใจมาทำ ทุกวันนี้ตัวช่วยลูกเล่นพวกนี้เยอะเต็มไปหมด fancybox ตกรุ่นไปแล้วมั้งครับ
|
 |
 |
 |
 |
| Date :
2016-03-18 00:03:36 |
By :
meannerss |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
โค้ดที่ให้มาคือ ตัวที่จะคืนค่าเป็น json กลับไปให้ไฟล์ index.php เพื่อสร้างเป็น datatable ใช่ไหมครับ
งั้นขอดูโค้ดไฟล์ index.php ได้ไหมครับ
|
| |
|
|
| |
| Date :
2016-03-18 10:43:02 |
By :
WiTT |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<title>PO</title>
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- ทำแฟนซี -->
<link href="fancy/site.css" rel="stylesheet" />
<link href="fancy/photoswipe.css" rel="stylesheet" />
<link href="fancy/default-skin.css" rel="stylesheet" />
<script src="fancy/photoswipe.min.js"></script>
<script src="fancy/photoswipe-ui-default.min.js"></script>
<script src="fancy/snf1yod.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script type="text/javascript" src="fancybox/jquery1.4.js"></script>
<script>
!window.jQuery && document.write('<script src="fancybox/jquery-1.4.3.min.js"><\/script>');
</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" type="text/css" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="fancybox/style2.css" />
<script type="text/javascript">
jQuery(function($){
/*
* Examples - images
*/
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example8").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="js/jquery2.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
}
} );
} );
</script>
<style>
div.container {
margin: 0 auto;
max-width:760px;
}
div.header {
margin: 100px auto;
line-height:30px;
max-width:760px;
}
body {
background: #f7f7f7;
color: #333;
font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<div id="templatemo_container">
<div id="templatemo_header">
<div id="templatemo_site_title">PO</div>
<div class="templatemo_menu">
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="addPO.php">เพิ่มข้อมูล PO</a> </li>
<li><a href="showPO.php">ข้อมูล PO</a> </li>
<li><a href="../<? echo $Pages;?>/<? echo $Pages;?>Page.php">โปรแกรมใบเสนอราคา</a> </li>
</ul>
</div>
</div>
<div id="templatemo_content">
<table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead>
<tr>
<th width="5%">Company</th>
<th width="10%">วันที่ PO</th>
<th width="10%">PO. No.</th>
<th width="10%">QT. No.</th>
<th width="25%">บริษัท</th>
<th>ไฟล์ </th>
<th width="10%">ผู้รับผิดชอบ</th>
<th width="5%">แก้ไข </th>
</tr>
</thead>
</table>
</div>
<div id="templatemo_footer">
Copyright © Cwheel <!-- Credit: www.templatemo.com -->
</div>
</div>
</body>
</html>
ตามนี้ค่ะ รบกวนด้วยค่ะ
|
| |
|
|
| |
| Date :
2016-04-18 14:16:34 |
By :
bsaranya |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<title>PO</title>
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- ทำแฟนซี -->
<link href="fancy/site.css" rel="stylesheet" />
<link href="fancy/photoswipe.css" rel="stylesheet" />
<link href="fancy/default-skin.css" rel="stylesheet" />
<script src="fancy/photoswipe.min.js"></script>
<script src="fancy/photoswipe-ui-default.min.js"></script>
<script src="fancy/snf1yod.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script type="text/javascript" src="fancybox/jquery1.4.js"></script>
<script>
!window.jQuery && document.write('<script src="fancybox/jquery-1.4.3.min.js"><\/script>');
</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" type="text/css" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="fancybox/style2.css" />
<script type="text/javascript">
jQuery(function($){
/*
* Examples - images
*/
/*$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example8").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});*/
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="js/jquery2.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
},
"fnDrawCallback": function () {
//alert('test');
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example8").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
}
} );
} );
</script>
<style>
div.container {
margin: 0 auto;
max-width:760px;
}
div.header {
margin: 100px auto;
line-height:30px;
max-width:760px;
}
body {
background: #f7f7f7;
color: #333;
font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<div id="templatemo_container">
<div id="templatemo_header">
<div id="templatemo_site_title">PO</div>
<div class="templatemo_menu">
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="addPO.php">เพิ่มข้อมูล PO</a> </li>
<li><a href="showPO.php">ข้อมูล PO</a> </li>
<li><a href="../<? echo $Pages;?>/<? echo $Pages;?>Page.php">โปรแกรมใบเสนอราคา</a> </li>
</ul>
</div>
</div>
<div id="templatemo_content">
<table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead>
<tr>
<th width="5%">Company</th>
<th width="10%">วันที่ PO</th>
<th width="10%">PO. No.</th>
<th width="10%">QT. No.</th>
<th width="25%">บริษัท</th>
<th>ไฟล์ </th>
<th width="10%">ผู้รับผิดชอบ</th>
<th width="5%">แก้ไข </th>
</tr>
</thead>
</table>
</div>
<div id="templatemo_footer">
Copyright © Cwheel <!-- Credit: www.templatemo.com -->
</div>
</div>
</body>
</html>
|
| |
|
|
| |
| Date :
2016-04-19 13:24:45 |
By :
9nonameman |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองเปลี่ยนหน้า index.php แล้วไม่ได้ค่ะ เลยส่งโค้ดหน้า employee-grid-data.php ไม่ให้ดูค่ะ
Code (PHP)
<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "4321";
$dbname = "sales";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
mysqli_set_charset($conn,"utf8");
/* Database connection end */
// storing request (ie, get/post) global array to a variable
$requestData= $_REQUEST;
$columns = array(
// datatable column index => database column name
0 =>'date',
1 =>'name_partner',
2 =>'po_no',
3 => 'qt_no',
4=> 'com',
5=> 'Ename',
6=> 'file'
);
// getting total number records without any search
$sql = "SELECT po.id As idPO,date, name_partner, po_no, qt_no, com,Ename,Enname,file ";
$sql.=" FROM po,partner,employee,po_detail where po.id_partner=partner.id_partner AND po.id_author=employee.Eid AND po.id=po_detail.id_po";
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.
$sql = "SELECT po.id As idPO,date, name_partner, po_no, qt_no, com,Ename,Enname,file ";
$sql.=" FROM po,partner,employee,po_detail where po.id_partner=partner.id_partner AND po.id_author=employee.Eid AND po.id=po_detail.id_po AND 1=1";
if( !empty($requestData['search']['value']) ) { // if there is a search parameter, $requestData['search']['value'] contains search parameter
$sql.=" AND ( po_no LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR qt_no LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR date LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR name_partner LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR Ename LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR Enname LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR file LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR com LIKE '".$requestData['search']['value']."%' )";
}
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result.
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." ";
/* $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc */
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$data = array();
while( $row=mysqli_fetch_array($query) ) { // preparing an array
$idPO= $row["idPO"];
$nestedData=array();
if($row['com']=='CC') { $nestedData[] = "<div style='color: red;opacity:0.0;'>$row[com]</div><img src='images/central.png' height='40px'/>";}
if($row['com']=='CL') { $nestedData[] = "<div style='color: red;opacity:0.0;'>$row[com]</div><img src='images/clwheel.png' height='40px'/>";}
if($row['com']=='DS') { $nestedData[] = "<div style='color: red;opacity:0.0;'>$row[com]</div><img src='images/dreamshop.png' height='40px'/>";}
list($Year,$month,$day) = explode("-",$row['date']);
$nestedData[] = (int)$day."/".(int)$month."/".($Year+543);
$nestedData[] = $row["po_no"];
$nestedData[] = $row["qt_no"];
$nestedData[] = $row["name_partner"];
$nestedData[] = $row['Ename']." (".$row['Enname'].")";
list($name,$type) = explode(".",$row['file']);
if ($type =='pdf') { $nestedData[] = "<a id='example8' href='images/po/$row[file]'><img src='images/po/PDF-icon.png' align='left' width='60px'/></a>";}
else { $nestedData[] = "<a id='example3' href='images/po/$row[file]'><img src='images/po/$row[file]' width='60px'/></a>";}
$nestedData[] = "<a id='example3' href='checkEdit.php?idx=$idPO&po=po' target='_self'><img src='../images/edit.png' width='30' title='แก้ไข' border='0' ></a>";
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
"recordsTotal" => intval( $totalData ), // total number of records
"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data // total data array
);
echo json_encode($json_data); // send data as json format
?>
|
| |
|
|
| |
| Date :
2016-05-12 14:38:00 |
By :
bsaranya |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมไม่มีฐานข้อมูลของคุณนะครับ ผมเลยทดลองทำ ตาม 2 ไฟล์ด้านล่างนี้ ใช้งานได้นะครับ เอาไปลองรันของคุณดูครับ
index.php
Code (PHP)
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>test</title>
<!-- DataTables CSS -->
<link href="css/dataTable/jquery.dataTables.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<!-- DataTables -->
<script src="js/dataTable/jquery.dataTables.js"></script>
<!-- Fancy -->
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
var $= jQuery.noConflict();
$(document).ready(function() {
var t = $('#datatable').DataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": 'test-data.php',
"iDisplayLength": 10,
"fnDrawCallback": function(){
$('.test-fancy').fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
}
});
});
</script>
</head>
<body>
<table id="datatable">
<thead>
<tr>
<th>ลำดับ</th>
<th>ข้อมูล</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
test-data.php
Code (PHP)
<?php
$iDisplayStart = $_GET['iDisplayStart'];
$iDisplayLength = $_GET['iDisplayLength'];
$iTotalRecords = 30;
// Output
$output = array(
//'iTotalRecords' => $iTotalRecords,
'iTotalDisplayRecords' => $iTotalRecords,
'aaData' => array()
);
for($i=0;$i<$iDisplayLength;$i++){
$iDisplayStart = $iDisplayStart+1;
$row = array($iDisplayStart);
$row[] = 'data-'.$iDisplayStart.' » <a href="https://www.thaicreate.com/php/forum.html" class="test-fancy"> Click </a>';
$output['aaData'][] = $row;
}
echo json_encode($output);
?>
|
ประวัติการแก้ไข
2016-05-13 14:02:15
| |
|
|
| |
| Date :
2016-05-13 14:01:43 |
By :
9nonameman |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้ว ขอบคุณนะคะ
|
| |
|
|
| |
| Date :
2016-05-16 17:01:01 |
By :
bsaranya |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แล้วถ้าต้องการเพิ่มในส่วน jquery ของ Fancybox ให้ print ได้ ต้องเพิ่มในส่วนไหนคะ
เพราะดูจาก ตย. อีกโค้ดนึง http://www.simplefactorygroup.com/print-fancybox/print-fancybox/
โค้ดหน้า http://www.simplefactorygroup.com/print-fancybox/print-fancybox/jquery.fancybox-1.2.1.pack.js
มันมีในเรื่องของปุ่ม print ด้วย ขอบคุณล่วงหน้าค่ะ
|
| |
|
|
| |
| Date :
2016-05-17 13:37:47 |
By :
bsaranya |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อันนั้นอยู่ที่ fancy ที่ใช้แล้วละครับ มันคนละเวอร์ชั่นกัน ถ้าไม่มี คุณก็คงต้องแกะจากตัวอย่างที่คุณให้มา
แล้วปรับใช้กับของคุณอีกที ครับ
|
| |
|
|
| |
| Date :
2016-05-17 14:08:23 |
By :
9nonameman |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
หนูลองเปลี่ยนมาใช้เวอร์ชั้นนี้ ใช้ได้ค่ะ
เผื่อเพื่อนๆทำแบบเดียวกัน 
http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.html
|
ประวัติการแก้ไข
2016-05-18 14:31:22
| |
|
|
| |
| Date :
2016-05-18 14:24:06 |
By :
bsaranya |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
