จะโหลด / รีเฟรช jQuery dataTable ได้อย่างไร?

Question 1

ฉันกำลังพยายามใช้ฟังก์ชันโดยการคลิกปุ่มบนหน้าจอจะทำให้jQuery dataTableของฉันรีเฟรช (เนื่องจากแหล่งข้อมูลฝั่งเซิร์ฟเวอร์อาจมีการเปลี่ยนแปลงตั้งแต่สร้าง dataTable)

นี่คือสิ่งที่ฉันมี:

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

แต่เมื่อฉันเรียกใช้สิ่งนี้มันไม่ทำอะไรเลย วิธีที่เหมาะสมในการรีเฟรช dataTable เมื่อคลิกปุ่มคืออะไร? ขอบคุณล่วงหน้า!

Question 2

คุณสามารถลองทำสิ่งต่อไปนี้:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536

Question 3

ด้วย DataTables เวอร์ชัน 1.10.0 เป็นแบบในตัวและใช้งานง่าย:

var table = $('#example').DataTable();
table.ajax.reload();

หรือเพียงแค่

$('#example').DataTable().ajax.reload();

http://datatables.net/reference/api/ajax.reload ()

Question 4

ทำลาย datatable ก่อนแล้วจึงวาด datatable

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

Question 5

คุณสามารถใช้ DataTable API ที่ครอบคลุมเพื่อโหลดซ้ำได้โดย ajax.reload()

หากคุณประกาศว่าข้อมูลของคุณเป็นDataTable()(เวอร์ชันใหม่) คุณต้อง:

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

หากคุณประกาศว่าข้อมูลของคุณเป็นdataTable()(เวอร์ชันเก่า) คุณต้อง:

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

Question 6

ฉันมีปัญหาเดียวกันนี่คือวิธีที่ฉันแก้ไข:

ก่อนอื่นรับข้อมูลด้วยวิธีการที่คุณเลือกฉันใช้ ajax หลังจากส่งผลลัพธ์ที่จะทำการเปลี่ยนแปลงกับตาราง จากนั้นล้างและเพิ่มข้อมูลใหม่:

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

นี่คือที่มา: https://datatables.net/reference/api/clear ()

Question 7

คำตอบง่ายๆนี้ใช้ได้ผลสำหรับฉัน

                  $('#my-datatable').DataTable().ajax.reload();

อ้างอิงhttps://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

Question 8

var ref = $('#example').DataTable();
ref.ajax.reload();

หากคุณต้องการเพิ่มปุ่มรีโหลด / รีเฟรชในDataTables 1.10 ให้ใช้drawCallback drawCallback

ดูตัวอย่างด้านล่าง (ฉันใช้ DataTablesกับ bootstrap css)

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}

Question 9

ฉันอยากจะแนะนำให้ใช้รหัสต่อไปนี้

table.ajax.reload(null, false);

ด้วยเหตุนี้การแบ่งหน้าผู้ใช้จะไม่ถูกรีเซ็ตเมื่อโหลดซ้ำ
ตัวอย่าง:

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

สามารถดูรายละเอียดเกี่ยวกับเรื่องนี้ได้ที่นี่

Question 10

นี่คือวิธีที่ฉันทำ ... อาจจะไม่ใช่วิธีที่ดีที่สุด แต่มันง่ายกว่า (IMHO) และไม่ต้องใช้ปลั๊กอินเพิ่มเติมใด ๆ

HTML

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

หมายเหตุ: ในการทำงานของฉันกับ jQuery dataTable บางครั้งถ้าคุณไม่มี<thead></thead><tbody></tbody>ก็ไม่ได้ผล แต่คุณอาจจะผ่านพ้นไปได้ ฉันยังไม่ทราบแน่ชัดว่าอะไรทำให้ต้องใช้และอะไรไม่ได้

Question 11

ลองทำลาย datatable ก่อนแล้วตั้งค่าอีกครั้งเช่น

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});

Question 12

หากคุณใช้แอตทริบิวต์ url ให้ทำ

table.ajax.reload()

หวังว่าจะช่วยใครบางคน

Question 13

ใช้รหัสนี้เมื่อคุณต้องการรีเฟรชข้อมูลของคุณ:

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });

Question 14

คุณไม่ได้แสดงให้เห็นว่าคุณกำลังโหลดสคริปต์อย่างไร / ที่ไหน แต่ในการใช้ฟังก์ชันปลั๊กอิน API คุณต้องรวมไว้ในหน้าของคุณหลังจากที่คุณโหลดไลบรารี DataTables แต่ก่อนที่คุณจะเริ่มต้น DataTable

แบบนี้

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>

Question 15

DataTables ของ Allan Jardine เป็นปลั๊กอิน jQuery ที่มีประสิทธิภาพและลื่นไหลสำหรับการแสดงข้อมูลแบบตาราง มีคุณสมบัติมากมายและสามารถทำสิ่งที่คุณต้องการได้เกือบทั้งหมด สิ่งหนึ่งที่ยากอย่างน่าประหลาดใจคือวิธีการรีเฟรชเนื้อหาด้วยวิธีง่ายๆดังนั้นฉันจึงใช้เพื่อการอ้างอิงของตัวเองและอาจเป็นไปเพื่อประโยชน์ของผู้อื่นเช่นกันนี่คือตัวอย่างที่สมบูรณ์ของวิธีหนึ่งหากทำสิ่งนี้:

HTML

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Javascript

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

ที่มา

Question 16

var myTable = $ ('# tblIdName') DataTable (); myTable.clear (). rows.add (myTable.data) .draw ();

สิ่งนี้ใช้ได้ผลสำหรับฉันโดยไม่ต้องใช้ ajax

Question 17

        if(data.length==0){
            alert("empty");
              $('#MembershipTable > tbody').empty();
            // $('#MembershipTable').dataTable().fnDestroy();
                    $('#MembershipTable_info').empty(); 
                    $("#MembershipTable_length").empty();
                    $("#MembershipTable_paginate").empty();

             html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
           $("#MembershipTable").append(html);
        }

        else{
             $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable > tbody').empty();

         for(var i=0; i<data.length; i++){
            //

....... }

Question 18

ตามความช่วยเหลือของDataTableฉันสามารถทำได้สำหรับตารางของฉัน

ฉันต้องการฐานข้อมูลหลายฐานข้อมูลใน DataTable ของฉัน

ตัวอย่างเช่น data_1.json> 2500 ระเบียน - data_2.json> 300 ระเบียน - data_3.json> 10265 ระเบียน

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });

Question 19

ถ้าใช้ v1.10.12 DataTable แล้วก็เรียก.draw()วิธีการและผ่านประเภทวาดของคุณจำเป็นเช่นfull-reset, pageแล้วคุณจะ re-วาด dt ของคุณด้วยข้อมูลใหม่

let dt = $("#my-datatable").datatable()

// ดำเนินการบางอย่าง

dt.draw('full-reset')

สำหรับข้อมูลเพิ่มเติมตรวจสอบเอกสารที่สามารถจัดเก็บข้อมูลได้

Question 20

ฉันได้ทำบางสิ่งที่เกี่ยวข้องกับสิ่งนี้ ... ด้านล่างนี้เป็นตัวอย่างจาวาสคริปต์พร้อมสิ่งที่คุณต้องการ มีการสาธิตที่นี่: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}

Question 21

คุณต้องเขียนโค้ดบรรทัดนี้หลังจากดำเนินการอัปเดต

$('#example').DataTable().ajax.reload();

Question 22

สำหรับกรณีของฉัน (DataTables 1.10.7) รหัสต่อไปนี้ใช้ได้กับฉัน


let table = $(tableName).DataTable();
table.clear().draw();

$(tableName).dataTable({ ... });

Datatables clear (): เพียงแค่ลบแถวข้อมูลทั้งหมดออกจากตาราง

Question 23

    function autoRefresh(){
        table.ajax.reload(null,false); 
        alert('Refresh');//for test, uncomment
    }

    setInterval('autoRefresh()', 5000);

Question 24

เริ่มต้นข้อมูลใหม่ด้วย init และเขียนดึงข้อมูลเป็นจริง .. ทำ.. ง่าย

เช่น.

TableAjax.init();
retrieve: true,