สอนวิธีใช้ datatables หน่อยครับ ท่านใดช่วยแนะนำหน่อยครับ
เผื่อยังมีผู้ต้องการศึกษา datatables จึงได้นำมาเพิ่มเติม ทั้งในส่วนที่เคยโหลด และอ่านศึกษาเอง (สอบถามจากผู้ Support ที่ชื่อ อัลลัน บ้าง แต่ก็ไม่ได้รับคำตอบที่ต้องการ)jedit.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
loaddataP.php <?php
updateP <?php
Date :
2013-10-24 01:39:59By :
PMChin
มันคืออะไรหนอ ดาต้าเทเบิล มีค่าใ้ชจ่ายในการถามคนออกแบบด้วยจ่ายที 3000 บ๊ะเงินดีจริงๆ
ประวัติการแก้ไข
Date :
2013-10-24 02:44:22By :
meannerss
พอดีเห็นว่า ดาต้าเทเบิ้ล มีสิ่งที่เรียกข้อมูลง่าย แก้ไข เปลี่ยนแปลงได้ ก็เลยลองศึกษาดู เห็นประโยชน์เลยจะคลิกบริจาค แล้วค่อยสอบถาม แต่เขา ปิดรับ ..เลยกลายเป็นเรื่องที่ต้องยอมขอความรู้ นี่คือบทสนทนา แต่ก็ไม่ได้ตามประสงค์นัก คลิก 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/ 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> © 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:18By :
PMChin
ผมว่าคุณโดนฝรั่งหลอกกินเงิน 3000 แล้วหละครับ มันแพงเกินไปแล้วเนี่ย ค่าปรึกษา 3000 เหอๆ
Date :
2013-10-24 11:21:41By :
meannerss
Server 02
Load balance : Server 02
ไม่ได้ตังส์เลย ไปตอบในเว็บที่ว่านี้ดีกว่า เหอๆๆๆ
