รีเฟรช DataTable โดยไม่ต้องโหลดหน้าซ้ำ

Question

ฉันกำลังพยายามโหลดข้อมูลที่ถูกแทรกลงในแท็บใหม่

โปรดอ้างอิงคำถาม : AJAX Update DataTable หลังจากประสบความสำเร็จ

คลาส php userX.php มี 3 ดาต้าพร้อมการใช้งานฝั่งไคลเอ็นต์ ฉันสามารถเปลี่ยนแถวของตารางแรกโดยใช้ปุ่มเมื่อเสร็จแล้วบันทึกจะไปที่แท็บ 2 -> และเนื้อหาของตารางที่สอง ฉันกำลังเปลี่ยนสถานะโดยใช้ AJAX เป็นสิ่งนี้

  $(".changeStatus").click(function(event){ if(confirm("Are you sure changing status?")){ event.preventDefault(); var status = "In Production"; var id = $(this).attr('data-id');
        $.ajax({ url : 'dbo.php', method : 'POST', data : {status : status , id : id}, success : function(data){ $('tr#'+id+'').css('background-color', '#ccc');
            $('tr#'+id+'').fadeOut('slow');
          }
        });
      }
      else{
        return false;
      }
    });

ในระหว่างนี้ก็ต้องอัปเดตในแท็บ 2 ตารางด้วย ฉันพยายามบรรลุสิ่งนี้โดยใช้เนื้อหา div ดูเหมือนทั้งคู่จะไม่ได้ผล ฉันขาดอะไร. เปิดรับข้อเสนอแนะ

Answer 1

ตารางสามารถโหลดซ้ำได้โดยวิธีการเริ่มต้นใหม่ของ datatable และโหลดซ้ำผ่าน AJAX ในตัว บล็อกโค้ดด้านล่างจะช่วยได้

             $(document).on('click','#ChangeNext',function(event){ if(confirm("Are you sure changing status?")){ event.preventDefault(); var statusid = $(this).attr('data-id');
                    $.ajax({ url : 'dbo.php', method : 'POST', data : {statusid : statusid}, success : function(data) { $('#exampleone').DataTable().ajax.reload();
                        }
                    });
                }
                else{
                    return false;
                }
            });

Answer 2

วิธีที่ดีที่สุดในการใส่ข้อมูลลงใน DataTables พร้อมคำขอ ajax คือ DataTables ajax api ที่คุณสามารถดูได้ในลิงค์ต่อไปนี้:

DataTables Ajax ข้อมูลที่มา

jQuery ตัวอย่าง:

jQuery('.changeStatus').click(function(event){
    $('#example').DataTable({ ajax: 'data.json' });
});

ตัวอย่าง JSON:

{
    "data": [
        [
            "Roshan Zaid",
            "Stackoverflow user",
            "New member"
        ],
        [
            "AmirAli Esteki",
            "Stackoverflow and AskUbuntu user",
            "New member"
        ]
    ]
}

การตอบสนองของคำขอ ajax ของคุณควรเป็น json โดยค่าเริ่มต้น