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

Registered : 109,027

HOME > PHP > PHP Forum > สอนวิธีใช้ datatables หน่อยครับ ท่านใดช่วยแนะนำหน่อยครับ



 

สอนวิธีใช้ datatables หน่อยครับ ท่านใดช่วยแนะนำหน่อยครับ

 



Topic : 084402

Guest




http://www.datatables.net
ผมเพิ่งหัดเขียน web ครับ ช่วยแนะนำ การใช้ API พวกนี้หน่อยครับ



Tag : PHP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-09-23 04:35:41 By : mai View : 5736 Reply : 6
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

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

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

ไม่ใช้พวก JSON ครับ



Go to : PHP และ JSON กับ Web Service การรับส่งข้อมูลจาก MySQL ในรูปแบบของ JSON






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-09-23 06:03:58 By : mr.win
 


 

No. 2

Guest


เผื่อยังมีผู้ต้องการศึกษา datatables จึงได้นำมาเพิ่มเติม ทั้งในส่วนที่เคยโหลด และอ่านศึกษาเอง (สอบถามจากผู้ Support ที่ชื่อ อัลลัน บ้าง แต่ก็ไม่ได้รับคำตอบที่ต้องการ)

ตัวอย่าง datatables ที่สามารถ เพิ่ม แก้ไข ลบได้

https://jquery-datatables-in-line-editing.googlecode.com/files/CreativePathExample.zip

โค้ดข้างล่างนี้ ต่างกับ zip ไฟล์ข้างบน

หลังจากที่ทดสอบ จนได้ในส่วนที่ต้องการ จึงได้นำมาเผยแพร่ในที่นี้ เพื่อเป็นกรณีศึกษาสำหรับผู้ต้องการ

ยังติดปัญหาเฉพาะในส่วนของ select และ ป้องกันไม่ให้กรอกในตำแหน่งที่ไม่ต้องการให้อับเดท .. เห็นในเวบแนะนำให้ใช้ .makeEditable (เป็นฟังชั่นของ jquery.dataTables.editable.js ต่างกับ คำสั่ง .editable ซึ่งเป็นของ jquery.jeditble.js) โดยให้กำหนดที่ aColumns .. ซึ่งลองทดสอบแล้ว ยังดับเบิ้ลคลิกเข้าไปได้ ไม่ได้ป้องกันฟิลด์ที่ต้องการป้องกัน และที่แย่ ไม่สามารถ บันทึกฟิลด์ที่ต้องการอยากให้บันทึก ทำเอาปวดหัว ..ขณะเขียนข้อความนี้ ลองทดสอบดู... ไม่สำเร็จ ที่ทำสำเร็จ คือใช้เฉพาะตัว jeditable ดังจะขียนต่อไปนี้..

jedit.html
<!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>ศัพท์บาลีในธรรมบท (Vocab of Stories about Buddhism in the past)</title>

<style type="text/css" title="currentStyle">
@import "media/css/demo_page.css";
@import "media/css/demo_table_jui.css";
@import "ColumnFilter/media/css/themes/smoothness/jquery-ui-1.7.2.custom.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 src="ColumnFilter/media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="ColumnFilter/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="ColumnFilter/media/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="/jq/jquery.jeditable.js"></script>
<script type="text/javascript" charset="utf-8">

function fnCreateSelect( aData )
{
var r='<select><option value=""></option>', i, iLen=aData.length;
for ( i=0 ; i<iLen ; i++ )
{
r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
}
return r+'</select>';
}

var oTable;
$(document).ready(function() {
/* Initialise the DataTable */
oTable = $('#example').dataTable( {
"oLanguage": {
"sUrl": "language/th_TH.txt",
"sSearch": "Search all columns:",
},
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Cfr>t<"F"ip>',
//"sDom": 'C<"clear">lfrtip',
//"sDom": '<"H"Tfr>t<"F"ip>',
"sAjaxSource": "scripts/loaddataP.php",
"fields": [ {
"label": "Story ID:",
"name": "StoryID"
}, {
"label": "Page No",
"name": "page_no",
}, {
"label": "Story topic:",
"name": "StoryTopic"
}, {
"label": "Word:",
"name": "word"
}, {
"label": "Meaning:",
"name": "mean"
}
] ,
"fnDrawCallback": function () {

//$('#example tbody td:not(.readonly)').editable( './scripts/updateP.php', { //very slow.. not work
$('#example tbody td').editable( './scripts/updateP.php', {
/* "aoColumnDefs": [
{ "sClass": "readonly", "aTargets": [0] },
{ "sClass": "readonly", "aTargets": [1] },
{ "sClass": "readonly", "aTargets": [2] },
{ "sClass": "readonly", "aTargets": [3] },
{ "sClass": "center", "aTargets": [4] }
], */
"callback": function( sValue, y , event) {
event.preventDefault(); //prevent loop back ป้องกันการกลับไปหน้าแรก
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
oTable.fnDraw();
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"col1": oTable.fnGetData( oTable.fnGetPosition( this )[0])[1],
"oPos_2": oTable.fnGetPosition( this )[2] ,
"col2": oTable.fnGetData( oTable.fnGetPosition( this )[0])[2],
"col3": oTable.fnGetData( oTable.fnGetPosition( this )[0])[3],
"col4": oTable.fnGetData( oTable.fnGetPosition( this )[0])[4]
};
},
"height": "14px",
"width": "100%"
} ); //tbody
} //fnDrawCallback
} );
$('#example').dataTable().columnFilter({
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* ... additional variables ... */
$.getJSON( sSource, aoData, function (json) {
/* Create the select elements on the first run */
if ( json.sEcho !=='' )
{
$("tfoot th").each( function (i) {
/* Insert the select menu */
this.innerHTML = fnCreateSelect(json.select[i]);

/* Add the event listener for the newly created element */
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
}
/* DataTables callback */
fnCallback(json)
} );
},
aoColumns: [ { type: "select", values: [ '1', '2', '3', '4', '5', '6', '7', '8'] },
{ type: "text" },
{ type: "number" },
{ type: "text" },
{ type: "text" }
]
}
);

$("tfoot input").keyup( function (event) {

if(event.keyCode!='9') {
if(search_timeout != undefined) {
clearTimeout(search_timeout);
}
$this = this;
search_timeout = setTimeout(function() {
search_timeout = undefined;
oTable.fnFilter( $this.value, $("tfoot input").index($this) );
}, 100);
}
} );

$("tfoot input").focusout( function () {
if(search_timeout != undefined) {
clearTimeout(search_timeout);
}
$this = this;
oTable.fnFilter( $this.value, $("tfoot input").index($this) );
} );
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
</div>
<h1>ศัพท์บาลีในธรรมบท (Vocab of Thammabot_Stories about Buddhism in the past)</h1>
<div class="ui-helper-clearfix">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width='35'>ภาค</th>
<th width='230'>หัวข้อเรื่อง</th>
<th width='35'>หน้า</th>
<th width='300'>คำศัพท์</th>
<th width='455'>คำแปล/ความหมาย</th>
</tr>
<tfoot>
<th width='35'>ภาค</th>
<th width='230'>หัวข้อเรื่อง</th>
<th width='35'>หน้า</th>
<th width='300'>คำศัพท์</th>
<th width='455'>คำแปล/ความหมาย</th>
</tfoot>
</thead>
<tbody>
<tr id="Row_Id" class="gradeX">
<!--<td class="readonly">ไทย</td>
<td class="readonly">มีดี</td>
<td class="readonly">เพราะมีพระพุทธศาสนา..</td>
<td class="readonly">ช่วยดูแลรักษาหัวใจให้ใฝ่ธรรม</td>
<td class="center"></td> -->
<td colspan="10" class="dataTables_empty">กำลังโหลดข้อมูล...</td>
</tr>

</tbody>

</table>
</div>
<div class="spacer"></div>
<!-- <style type="text/css">
@import "examples/examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="examples/examples_support/syntax/js/shCore.js"></script> -->

<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>

<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>



และไฟล์ของ loaddataP.php

loaddataP.php
<?php
header('Content-Type: text/html; charset=UTF-8');

/*
* Script: DataTables server-side script for PHP and MySQL
* Copyright: 2010 - Allan Jardine, 2012 - Chris Wright
* License: GPL v2 or BSD (3-point)
*/

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/

/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( 'StoryID', 'StoryTopic', 'page_no' , 'word', 'mean');

/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";

/* DB table to use */
$sTable = "tbl_vocab_tb";

/* Database connection information */
$gaSql['user'] = "user";
$gaSql['password'] = "password...";
$gaSql['db'] = "databaseName";
$gaSql['server'] = "localhost";

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/

/*
* Local functions
*/
function fatal_error ( $sErrorMessage = '' )
{
header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
die( $sErrorMessage );
}


/*
* MySQL connection
*/
if ( ! $gaSql['link'] = mysql_connect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) )
{
fatal_error( 'Could not open connection to server' );
}

if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
{
fatal_error( 'Could not select database ' );
}

/*
* Paging
*/
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
intval( $_GET['iDisplayLength'] );
}


/*
* Ordering
*/
$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] ) ]."
".($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
}
}

$sOrder = substr_replace( $sOrder, "", -2 );
if ( $sOrder == "ORDER BY" )
{
$sOrder = "";
}
}


/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
$sWhere = "";
if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
{
$sWhere = "WHERE (";
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
{
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
}
}
$sWhere = substr_replace( $sWhere, "", -3 );
$sWhere .= ')';
}

/* Individual column filtering */
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 queries
* Get data to display
*/
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
FROM $sTable
$sWhere
$sOrder
$sLimit
";
mysql_query('set names utf8');
$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );

/* Data set length after filtering */
$sQuery = "
SELECT FOUND_ROWS()
";
$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];

/* Total data set length */
$sQuery = "
SELECT COUNT(".$sIndexColumn.")
FROM $sTable
";
$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
$aResultTotal = mysql_fetch_array($rResultTotal);
$iTotal = $aResultTotal[0];


/*
* Output
*/
$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] == "version" )
{
/* Special output formatting for 'version' column */
$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
}
else if ( $aColumns[$i] != ' ' )
{
/* General output */
$row[] = $aRow[ $aColumns[$i] ];
}
}
$output['aaData'][] = $row;
}

echo json_encode( $output );



ส่วนไฟล์ที่จะทำการบันทึก ตั้งชื่อว่า updateP.php

updateP
<?php
$id = $_POST['row_id'];
$mean = trim($_POST['value']);
$mean2 = trim($_POST['col4']);
$word = $_POST['col3'] ;
$col1 = $_POST['col1'] ;
$col2 = $_POST['col2'] ;
$oPos_2 = $_POST['col2'] ;
$table = 'tbl_vocab_tb';
if(isset($mean)) {
if(substr($mean2,0,1) == ' ' || $mean == $col1 || $mean == $oPos_2 || $mean == $word || $mean == $col2 || $mean == $mean2){
echo 'Please EDIT the only Meaning, and fill it correctly';
//echo 'You MUST EDIT the only field of Meaning, please fill the column of Meaning correctly';
exit();
}
//connect mysql
//include_once( $_SERVER['DOCUMENT_ROOT']."/Datatables/mysql.php" );
$gaSql['user'] = "user";
$gaSql['password'] = "password...";
$gaSql['db'] = "databaseName";
$gaSql['server'] = "localhost";

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/

/*
* Local functions
*/
function fatal_error ( $sErrorMessage = '' )
{
header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
die( $sErrorMessage );
}


/*
* MySQL connection
*/
if ( ! $gaSql['link'] = mysql_connect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) )
{
fatal_error( 'Could not open connection to server' );
}

if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
{
fatal_error( 'Could not select database ' );
}
mysql_select_db('thammasa_CJ');
$sql= "UPDATE $table SET mean = '$mean', Type = Type+1 WHERE word like '$word' ";
echo ''.$mean;

mysql_query("set names utf8");
$result = mysql_query($sql);

if (!$result) {
die('MySQL failed: ' . mysql_error('MySql failed'));
} else {
//echo "Success".$result;
}
//@mysql_close($db);
}else{
echo 'You can update only the field of Meaning';
}

?>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-10-24 01:39:59 By : PMChin
 

 

No. 3

Guest


ใครที่รู้คำแปลบาลี จะเพิ่มเติมคำศัพท์ได้ที่นี่ http://www.thammasatu.net/DataTables/jedit.html

ในส่วนที่สำคัญของโค้ด ที่ส่งตัวแปร คือ

Code
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"col1": oTable.fnGetData( oTable.fnGetPosition( this )[0])[1],
"oPos_2": oTable.fnGetPosition( this )[2] ,
"col2": oTable.fnGetData( oTable.fnGetPosition( this )[0])[2],
"col3": oTable.fnGetData( oTable.fnGetPosition( this )[0])[3],
"col4": oTable.fnGetData( oTable.fnGetPosition( this )[0])[4]
};
},


1 - 4 เป็นเลขที่นำค่าส่งไปให้กับ updateP.php ซึ่งในเวบ datatables.net ก็ไม่ได้บอกรายละเอียดในส่วนตรงนี้ ต้องอ่าน ทำความเข้าใจ (ส่วนมากก็จะเดา..) ทดสอบแล้วทดสอบอีก

อุตส่าห์ยอมเพื่อจะขอให้ฝ่ายซัพพอร์ตตอบคำถาม (ชำระ 60 ยูโร เป็นจำนวนเงินไทยเกือบ 3000) ก็ไม่ได้คำตอบที่ต้องการ คงเป็นเพราะเขาต้องการจะติดตั้งในส่วนของ Editor ให้

ซึ่งนี่คือส่วนที่จ่ายค่าซัพพอร์ต (เป็นครั้งแรก ที่ติดต่อกับฝรั่ง เพื่อจะแลกเปลี่ยนความรู้โดยตรง แต่ก็ไม่ได้ดังประสงค์ ที่ได้ ก็มี เท่าที่เขาให้ คือ

http://www.thammasatu.net/DataTables/extras/Editor/Examples/vocab_tb.html

กด Ctrl + u เพื่อดูโค้ด ส่วน php ไฟล์ จะเขียนฟังชั่นคลาส เพื่อเรียกใช้ พอนำมาใช้ที่เครื่อง ปรากฏว่า อ่านไทยไม่ได้ เนื่องจากไม่พบคำสั่ง mysql_query ถ้าเจอคำสั่งนี้ แค่เราเพิ่มบรรทัด mysql_query("set names utf8"); ไว้ก่อนบรรทัดนั้น ก็จะสามารถอ่านไทยได้แล้ว (แม้เจอ class ที่มีคำสั่ง query ก็พอจะเดาได้ เช่น

Code
$utf8 = "set names utf8;" ;
$sql = "UPDATE course SET $column = :value WHERE CourseNo = :id";
$stmt = $dbh->query($utf8); //แก้ให้บันทึกภาษาไทยได้);
$stmt = $dbh->prepare($sql); //เดิมมีแต่บรรทัดนี้ ทำให้ไม่สามารถบันทึกภาษาไทยได้

ขอให้ได้รับความรู้ดังที่ได้ศึกษา ก็เพื่อหวังเป็นประโยชน์ต่อผู้อื่น เพราะเห็นเว็บไทย แนะนำแบบที่โหลดมารวดเดียว ทำให้มีปัญหาในกรณีที่เร็คคอร์ดมีปริมาณมากๆ

ซึ่งได้ทำไว้ทีแรกเลย ก็คือไฟล์..ตามลิงค์นี้

http://www.thammasatu.net/balee/vocab/vocab0.php?char=%E0%B8%89


PmChin : [email protected]
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-10-24 02:11:18 By : PMChin
 


 

No. 4



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



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


มันคืออะไรหนอ ดาต้าเทเบิล มีค่าใ้ชจ่ายในการถามคนออกแบบด้วยจ่ายที 3000 บ๊ะเงินดีจริงๆ
เลิกตอบในนี้ดีกว่า ไม่ได้ตังส์เลย ไปตอบในเว็บที่ว่านี้ดีกว่า เหอๆๆๆ


ประวัติการแก้ไข
2013-10-24 02:45:14
2013-10-24 02:45:19
2013-10-24 02:49:16
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-10-24 02:44:22 By : meannerss
 


 

No. 5

Guest


พอดีเห็นว่า ดาต้าเทเบิ้ล มีสิ่งที่เรียกข้อมูลง่าย แก้ไข เปลี่ยนแปลงได้ ก็เลยลองศึกษาดู เห็นประโยชน์เลยจะคลิกบริจาค แล้วค่อยสอบถาม แต่เขา ปิดรับ ..เลยกลายเป็นเรื่องที่ต้องยอมขอความรู้ นี่คือบทสนทนา แต่ก็ไม่ได้ตามประสงค์นัก คลิก http://www.thammasatu.net/DataTables/Talk_to_Allan_support.txt เป็นบทสนทนากับอัลลัน (support 1 hour per 60 uro)

สามารถดาวน์โหลด ด้าตาเทเบิ้ลได้ที่ https://github.com/DataTables/DataTables (มุมขวาล่างจะมี download as zip หรือจะไปที่ http://www.datatables.net/download/
พอดีเพิ่งได้ไอเดียเพิ่มเติมเกี่ยวกับ readonly ให้กับ textbox ที่ไม่อยากให้กรอก
จึงขอแก้ไขในส่วนของไฟล์ jedit.html

ก็แปลกดีที่ พอคิดจะให้ข้อมูลแก่ผู้อื่น ทำให้คิดออกง่ายดีแท้

Code (JavaScript)
<!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>ศัพท์บาลีในธรรมบท (Vocab of the Thammabot_Stories about Buddha and Others in the past)</title>

		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table_jui.css";
			@import "ColumnFilter/media/css/themes/smoothness/jquery-ui-1.7.2.custom.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 src="ColumnFilter/media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="ColumnFilter/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
		<script src="ColumnFilter/media/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
		<script type="text/javascript" language="javascript" src="/jq/jquery.jeditable.js"></script>
		<script type="text/javascript" charset="utf-8">

function fnCreateSelect( aData )
{
    var r='<select><option value=""></option>', i, iLen=aData.length;
    for ( i=0 ; i<iLen ; i++ )
    {
        r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
    }
    return r+'</select>';
}

var oTable;
			$(document).ready(function() {
				/* Initialise the DataTable */
				oTable = $('#example').dataTable( {
								"oLanguage": {
									"sUrl": "language/th_TH.txt",
									"sSearch": "Search all columns:",
								},
								"bProcessing": true,
								"bServerSide": true,
								"sPaginationType": "full_numbers",
								"sDom": '<"H"Cfr>t<"F"ip>',
								//"sDom": 'C<"clear">lfrtip',
 								//"sDom": '<"H"Tfr>t<"F"ip>',
								"sAjaxSource": "scripts/loaddataP.php",
								
					"aoColumnDefs": [
						{ "sClass": "readonly", "aTargets": [0,1,2,3] }, //ทดสอบใช้บรรทัดเดียว ก็สามารถป้องกันการกรอกข้อมูลได้
						/*{ "sClass": "readonly", "aTargets": [1] },
						{ "sClass": "readonly", "aTargets": [2] },
						{ "sClass": "readonly", "aTargets": [3] }, */
						{ "sClass": "required", "aTargets": [4] } //Meaning (คำแปล/ความหมาย) อนุญาตให้กรอกข้อมูลที่ฟิลด์ [เท็กซ์บ๊อก]นี้ได้
						], 
					"aaSorting": [ [0,'asc'], [2,'asc'] , [3,'asc'] ],
					"aoColumns": [ {}, {}, { "sType": 'numeric' }, {}, {
							"label": "Meaning:",
							"name": "mean"
						}
					] ,
					"fnDrawCallback": function () {
					
						$('#example tbody td:not(.readonly)').editable( './scripts/updateP.php', {  
						//$('#example tbody td').editable( './scripts/updateP.php', {
 							"callback": function( sValue, y , event) {
							event.preventDefault(); //prevent loop back ป้องกันการกลับไปหน้าแรก
								var aPos = oTable.fnGetPosition( this );
								oTable.fnUpdate( sValue, aPos[0], aPos[1] );
								oTable.fnDraw();
							},
					"submitdata": function ( value, settings ) {
						return {
							"row_id": this.parentNode.getAttribute('id'), //ตำแหน่ง id
							"col1": oTable.fnGetData( oTable.fnGetPosition( this )[0])[1], //Story Topic หัวข้อเรื่อง
							"oPos_2": oTable.fnGetPosition( this )[2] ,
							"col2": oTable.fnGetData( oTable.fnGetPosition( this )[0])[2], //Page No หน้า
							"col3": oTable.fnGetData( oTable.fnGetPosition( this )[0])[3], //Word คำศัพท์
							"col4": oTable.fnGetData( oTable.fnGetPosition( this )[0])[4] //Meaning คำแปล/ความหมาย
									};
							},
							"height": "14px",
							"width": "100%"
						} ); //tbody
				} //fnDrawCallback					
			} );
     $('#example').dataTable().columnFilter({
        "fnServerData": function ( sSource, aoData, fnCallback ) {
            /* ... additional variables ... */
            $.getJSON( sSource, aoData, function (json) {
                /* Create the select elements on the first run */
                if ( json.sEcho !=='' )
                {
                    $("tfoot th").each( function (i) {
                        /* Insert the select menu */
                        this.innerHTML = fnCreateSelect(json.select[i]);
                         
                        /* Add the event listener for the newly created element */
                        $('select', this).change( function () {
                            oTable.fnFilter( $(this).val(), i );
                        } );
                    } );
                }
                /* DataTables callback */
                fnCallback(json)
            } );
        },		  
			aoColumns: [ { type: "select", values: [ '1', '2', '3', '4', '5', '6', '7', '8']  },
				     { type: "text" },
				     { type: "number" },
				     { type: "text" },
				     { type: "text" }
				     ]
			}
		);
  
				$("tfoot input").keyup( function (event) {
				
                    if(event.keyCode!='9') {
                        if(search_timeout != undefined) {
                            clearTimeout(search_timeout);
                        }
                        $this = this;
                        search_timeout = setTimeout(function() {
                            search_timeout = undefined;
                            oTable.fnFilter( $this.value, $("tfoot input").index($this) );
                        }, 100);
                    }
                } );

                $("tfoot input").focusout( function () {
                    if(search_timeout != undefined) {
                        clearTimeout(search_timeout);
                    }
                    $this = this;
                    oTable.fnFilter( $this.value, $("tfoot input").index($this) );
                } );		
});
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
			</div>
			<h1>ศัพท์บาลีในธรรมบท (Vocab of the Thammabot_Stories about Buddha and Others in the past)</h1>
        <div class="ui-helper-clearfix">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width='35'>ภาค</th>
			<th width='230'>หัวข้อเรื่อง</th>
			<th width='35'>หน้า</th>
			<th width='300'>คำศัพท์</th>
			<th width='455'>คำแปล/ความหมาย</th>
		</tr>
	<tfoot>
			<th width='35'>ภาค</th>
			<th width='230'>หัวข้อเรื่อง</th>
			<th width='35'>หน้า</th>
			<th width='300'>คำศัพท์</th>
			<th width='455'>คำแปล/ความหมาย</th>
	</tfoot>		
	</thead>
	<tbody>
		<tr id="Row_Id" class="Balee_Pali">
			<!--<td class="readonly">ไทย</td>
			<td class="readonly">มีดี</td>
			<td class="readonly">เพราะมีพระพุทธศาสนา..</td>
			<td class="readonly">ช่วยดูแลรักษาหัวใจให้ใฝ่ธรรม</td>
			<td class="required"></td> -->
			<td colspan="10" class="dataTables_empty">กำลังโหลดข้อมูล...</td>
		</tr>

	</tbody>

</table>
			</div>
			<div class="spacer"></div>
			<!-- <style type="text/css">
				@import "examples/examples_support/syntax/css/shCore.css";
			</style>
			<script type="text/javascript" language="javascript" src="examples/examples_support/syntax/js/shCore.js"></script> -->
			
			<div id="footer" class="clear" style="text-align:center;">
				<p>
					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
				</p>
				
				<span style="font-size:10px;">
					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
				</span>
			</div>
		</div>
	</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-10-24 11:00:18 By : PMChin
 


 

No. 6



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



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


ผมว่าคุณโดนฝรั่งหลอกกินเงิน 3000 แล้วหละครับ มันแพงเกินไปแล้วเนี่ย ค่าปรึกษา 3000 เหอๆ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-10-24 11:21:41 By : meannerss
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอนวิธีใช้ datatables หน่อยครับ ท่านใดช่วยแนะนำหน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

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