|
 |
| |
ช่วยด้วยครับ x-editable ไม่ทำงาน เมื่อใช้ pagination ใน Datatable |
| |
 |
|
|
 |
 |
|
 ตัวแบ่งหน้ามันเป็น Ajax หรือว่า Link ครับ
|
 |
 |
 |
 |
| Date :
2016-02-02 09:44:28 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
เคยใช้
แบบที่ 1. fnRowCallback
$(document).ready(function() {
$('#ss_table1').dataTable({
responsive: true,
"order": [[ 0, "desc" ]],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$('#ss_table1 .studentID a').editable({
type: 'text',
title: 'แก้ไข-รหัสนิสิต'
});
$('#ss_table1 .pname a').editable({
type: 'select',
title: 'แก้ไข-คำนำหน้าชื่อ',
source: [
{value: '1', text: 'นาย'},
{value: '2', text: 'นาง'},
{value: '3', text: 'นางสาว'}
]
});
$('#ss_table1 .name a').editable({
type: 'text',
title: 'แก้ไข-ชื่อ'
});
$('#ss_table1 .lastname a').editable({
type: 'text',
title: 'แก้ไข-นามสกุล'
});
$('#ss_table1 .isNameThai a').editable({
type: 'textarea',
title: 'แก้ไข-ชื่องานนิพนธ์ภาษาไทย'
});
}
});
});
แบบที่ 2
- ใช้การสร้างตารางธรรมดา
- ในไฟล์ที่เรียกมา ให้ข้อมูลส่งเป็น json
<table id="borrow" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>รหัส</th>
<th>ชื่อ-นามสกุล</th>
<th>ห้อง</th>
<th>อุปกรณ์</th>
<th>หมายเลข</th>
<th>วัน/เวลา/ยืม</th>
<th>วัน/เวลา/คืน</th>
<th>สถานะการคืน</th>
<th>ก่อน-หลัง</th>
</tr>
</thead>
<tfoot>
<tr>
<th>รหัส</th>
<th>ชื่อ-นามสกุล</th>
<th>ห้อง</th>
<th>อุปกรณ์</th>
<th>หมายเลข</th>
<th>วัน/เวลา/ยืม</th>
<th>วัน/เวลา/คืน</th>
<th>สถานะการคืน</th>
<th>ก่อน-หลัง</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
$('#borrow').DataTable( {
"iDisplayLength": 25,
"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
"processing": true,
"order": [[7, "asc" ],[8, "asc" ]],
"ajax": {
url: 'ssp-remote.php',
dataType: 'json'
},
language: {
'paginate': {
'previous': '<span class="glyphicon glyphicon-chevron-left"></span>',
'next': '<span class="glyphicon glyphicon-chevron-right"></span>'
}
}
});
});
</script>
ในไฟล์ที่เรียกมายาวหน่อย ใส่ script editable ไว้ในนี้
$columns = array
(
"idOrStudent",
"tb_orderstudent.idS",
"idStudent",
"nameStudent",
"tb_orderstudent.idRoom",
"nameRoom",
"tb_orderstudent.idTool",
"nameDevice",
"tb_orderstudent.idRemote",
"nameRemote",
"dateBorrow",
"dateBack",
"statusDevice",
"statusName"
);
// the table being queried
$table = "tb_orderstudent";
// any JOIN operations that you need to do
$joins = "LEFT JOIN `tb_student`
ON `tb_orderstudent`.`idS`=`tb_student`.`idS`
LEFT JOIN `tb_room`
ON `tb_orderstudent`.`idRoom`=`tb_room`.`idRoom`
LEFT JOIN `tb_device`
ON `tb_orderstudent`.`idTool`=`tb_device`.`idDevice`
LEFT JOIN `tb_remote`
ON `tb_orderstudent`.`idRemote`=`tb_remote`.`idRemote`
LEFT JOIN `tb_statusname`
ON `tb_orderstudent`.`statusDevice`=`tb_statusname`.`idstatusDevice`
";
$main = $mysql->query("
SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $columns))."
FROM {$table} {$joins}
");
while ($rs = $mysql->fetch())
{
$row = array();
if($rs['statusDevice'] == 3){ //คืนเรียบร้อย
$row[] = $rs['idStudent']; //$rs['idOrStudent'].":".
$row[] = $rs['nameStudent'];
$row[] = $rs['nameRoom'];
$row[] = $rs['nameDevice'];
if($rs['idRemote']==0){
$row[] = "-";
}else{
$row[] = $rs['idRemote'];
}
$dateBr = thai8($rs['dateBorrow']);
$row[] = $dateBr;
if($rs['dateBack'] == '0000-00-00 00:00:00'){
$row[] = "-";
}else{
$dateBa = thai8($rs['dateBack']);
$row[] = $dateBa;
}
$row[] = '<span style="color:#01DFD7;">'.$rs['statusName'].'</span>';
}else{
$row[] = '<a class="idStudent" href="#" id="idStudent' . $rs['idOrStudent'] . '" data-pk="' . $rs['idS'] . '" data-url="upIDStudent.php" " data-value="' . $rs['idStudent'] . '" data-name="idStudent" rel="remote_data.php" >'.$rs['idStudent'].'</a>
<script>
$(document).ready(function() {
$("#idStudent' . $rs['idOrStudent'] . '").editable({
type: "text",
title:"แก้ไข : รหัสนิสิต ' . $rs['idStudent'] . ' ",
success: function() {
var link = $(this).attr("rel");
$.ajax({
url: link,
type: "GET",
success: function (result) {
$("#content").html(result);
}
});
}
});
});
</script>
';
$row[] = '
<a class="nameStudent" href="#" id="nameStudent' . $rs['idOrStudent'] . '" data-pk="' . $rs['idS'] . '" data-url="upNameStudent.php" " data-value="' . $rs['nameStudent'] . '" data-name="nameStudent" rel="remote_data.php" >'.$rs['nameStudent'].'</a>
<script>
$(document).ready(function() {
$("#nameStudent' . $rs['idOrStudent'] . '").editable({
type: "text",
title:"แก้ไข : ชื่อนิสิต ' . $rs['nameStudent'] . ' ",
success: function() {
var link = $(this).attr("rel");
$.ajax({
url: link,
type: "GET",
success: function (result) {
$("#content").html(result);
}
});
}
});
});
</script>
';
$row[] = '<a class="nameRoom" href="#" id="nameRoom' . $rs['idOrStudent'] . '" data-pk="' . $rs['idOrStudent'] . '" data-url="upRoom.php" " data-value="' . $rs['idRoom'] . '" data-name="idRoom" data-source="room.php" rel="remote_data.php">'.$rs['nameRoom'].'</a>
<script>
$(document).ready(function() {
$("#nameRoom' . $rs['idOrStudent'] . '").editable({
type: "select",
title:"แก้ไข : สถานที่ใช้อุปกรณ์ ' . $rs['nameRoom'] . ' ",
success: function() {
var link = $(this).attr("rel");
$.ajax({
url: link,
type: "GET",
success: function (result) {
$("#content").html(result);
}
});
}
});
});
</script>
';
$row[] = '<a class="nameDevice" href="#" id="nameDevice' . $rs['idOrStudent'] . '" data-pk="' . $rs['idOrStudent'] . '" data-url="upIDTool.php" " data-value="' . $rs['idTool'] . '" data-name="idTool" data-source="tool.php" rel="remote_data.php">'.$rs['nameDevice'].'</a>
<script>
$(document).ready(function() {
$("#nameDevice' . $rs['idOrStudent'] . '").editable({
type: "select",
title:"แก้ไข : ชนิดของอุปกรณ์ ' . $rs['nameDevice'] . ' ",
success: function() {
var link = $(this).attr("rel");
$.ajax({
url: link,
type: "GET",
success: function (result) {
$("#content").html(result);
}
});
}
});
});
</script>
';
//$row[] = $rs['nameRoom'];
//$row[] = $rs['nameDevice'];
if($rs['idRemote']==0){
$row[] = "-";
}else{
$row[] = '<a class="noRemote" href="#" id="noRemote' . $rs['idOrStudent'] . '" data-pk="' . $rs['idOrStudent'] . '" data-url="upIDRemote.php" " data-value="' . $rs['idRemote'] . '" data-name="idRemote" data-source="remote.php" rel="remote_data.php">'.$rs['nameRemote'].'</a>
<script>
$(document).ready(function() {
$("#noRemote' . $rs['idOrStudent'] . '").editable({
type: "select",
title:"แก้ไข : หมายเลขรีโมท ' . $rs['nameRemote'] . ' ",
success: function() {
var link = $(this).attr("rel");
$.ajax({
url: link,
type: "GET",
success: function (result) {
$("#content").html(result);
}
});
}
});
});
</script>
';
}
$dateBr = thai8($rs['dateBorrow']);
$row[] = $dateBr;
if($rs['dateBack'] == '0000-00-00 00:00:00'){
$row[] = "-";
}else{
$dateBa = thai8($rs['dateBack']);
$row[] = $dateBa;
}
if($rs['statusDevice']==1){
$row[] = '<a class="status" href="#" id="status' . $rs['idOrStudent'] . '" data-pk="' . $rs['idOrStudent'] . '" data-url="upStatus.php" " data-value="' . $rs['statusDevice'] . '" data-name="statusDevice" data-source="status.php" rel="remote_data.php"><span style="color:#FF00FF;font-size:1.1em;" >'.$rs['statusName'].'</span></a>
<script>
$(document).ready(function() {
$("#status' . $rs['idOrStudent'] . '").editable({
type: "select",
title:"แก้ไข : สถานะการยืม ' . $rs['statusName'] . ' ",
success: function() {
var link = $(this).attr("rel");
$.ajax({
url: link,
type: "GET",
success: function (result) {
$("#content").html(result);
}
});
}
});
});
</script>
';
}else if($rs['statusDevice']==2){
$row[] = '<a class="status" href="#" id="status' . $rs['idOrStudent'] . '" data-pk="' . $rs['idOrStudent'] . '" data-url="upStatus.php" " data-value="' . $rs['statusDevice'] . '" data-name="statusDevice" data-source="status.php" rel="remote_data.php"><span style="color:#FF00FF;font-size:1.1em;" >'.$rs['statusName'].'</span></a>
<script>
$(document).ready(function() {
$("#status' . $rs['idOrStudent'] . '").editable({
type: "select",
title:"แก้ไข : สถานะการยืม ' . $rs['statusName'] . ' ",
success: function() {
var link = $(this).attr("rel");
$.ajax({
url: link,
type: "GET",
success: function (result) {
$("#content").html(result);
}
});
}
});
});
</script>
';
}
}
$response['data'][] = $row;
}
// prevent caching and echo the associative array as json
header('Cache-Control: no-cache');
header('Pragma: no-cache');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo json_encode($response);
ที่เหลืออยู่ที่วางไฟล์ถูกหรือเปล่า
แบบที่ 1 ถ้าข้อมูลเยอะ แค่สัก 1000 นิดๆ จะโหลดช้า
แบบที่ 2 จะโหลดข้อมูลเร็วกกว่า
|
| |
|
|
| |
| Date :
2016-02-02 13:28:15 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ทุกอย่างที่แนะนำมา อยู่ใน docs ของ Datatable และ x-editable
ผสมกับหาคำตอบจากบอร์ดของทั้ง 2 ตัวครับ 
|
| |
|
|
| |
| Date :
2016-02-02 13:29:47 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
