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,037

HOME > PHP > PHP Forum > ช่วยด้วยครับ x-editable ไม่ทำงาน เมื่อใช้ pagination ใน Datatable



 

ช่วยด้วยครับ x-editable ไม่ทำงาน เมื่อใช้ pagination ใน Datatable

 



Topic : 121154



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



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




ผมได้โหลดข้อมูลจาก MySql มาใส่ Datatable และใช้ Pagination แบ่งหน้า และใช้ x-editable เพื่อ edit ในตารางได้ แต่ผลที่ได้ จะสามารถ edit ได้แต่หน้าแรกเท่านั้น พอคลิ้กไปที่หน้าอื่น ไม่สามารถ edit ได้ ใครพอช่วยแก้ปัญหาได้บ้างครับ

ขอบคุณล่วงหน้าครับ

หน้าที่ 1
หน้าแรก


หน้าที่ 2
หน้าที่ 2



Tag : PHP, MySQL, HTML/CSS, JavaScript, Ajax, jQuery






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-02-01 14:35:20 By : pandaflick View : 1188 Reply : 3
 

 

No. 1



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

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

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

ตัวแบ่งหน้ามันเป็น Ajax หรือว่า Link ครับ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-02-02 09:44:28 By : mr.win
 


 

No. 2



โพสกระทู้ ( 5,105 )
บทความ ( 4 )

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

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


เคยใช้
แบบที่ 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
 

 

No. 3



โพสกระทู้ ( 5,105 )
บทความ ( 4 )

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

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


ทุกอย่างที่แนะนำมา อยู่ใน docs ของ Datatable และ x-editable
ผสมกับหาคำตอบจากบอร์ดของทั้ง 2 ตัวครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-02-02 13:29:47 By : apisitp
 

   

ค้นหาข้อมูล
   
 

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