jQuery 데이터 테이블을 다시 로드/새로 고침하는 방법은 무엇입니까?

jQuery 데이터 테이블을 다시 로드/새로 고침하는 방법은 무엇입니까?

화면에서 버튼을 클릭하면 jQuery dataTable이 새로 고쳐지는 기능을 구현하려고 합니다(dataTable이 생성된 이후 서버 측 데이터 소스가 변경되었을 수 있음).

제가 가진 것은 다음과 같습니다.

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

하지만 제가 이걸 실행해도 아무 소용이 없습니다.버튼을 클릭할 때 dataTable을 새로 고치는 올바른 방법은 무엇입니까?

DataTables 버전 1.10.0에는 다음과 같은 기능이 내장되어 있습니다.

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

아니면 그냥

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

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

데이터 테이블을 먼저 파괴한 다음 데이터 테이블을 그립니다.

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

데이터 테이블의 광범위한 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();

다음을 시도할 수 있습니다.

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

저도 같은 문제가 있었습니다. 다음과 같이 해결했습니다.

먼저 당신이 선택한 방법으로 데이터를 얻습니다. 테이블을 변경할 결과를 제출한 후에 아약스를 사용합니다.그런 다음 새 데이터를 지우고 추가합니다.

var refreshedDataFromTheServer = getDataFromServer();

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

출처는 다음과 같습니다: https://datatables.net/reference/api/clear()

이 간단한 대답은 나에게 효과가 있었습니다.

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

ref https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

저는 다음 코드를 사용하는 것을 추천합니다.

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>

자세한 내용은 여기에서 확인할 수 있습니다.

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

데이터 테이블 1.10에 다시 로드/새로 고침 버튼을 추가하려면 drawCallback을 사용합니다.

아래 예를 참조하십시오(나는 부트스트랩 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();
}

데이터 테이블을 새로 고치려면 다음 코드를 사용합니다.

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

먼저 데이터 테이블을 삭제한 후 다시 설정해 보십시오. 예

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

이게 내가 하는 방법으로...최선의 방법은 아닐 수도 있지만, 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>동작되지 않습니다.하지만 당신은 그것 없이도 살아갈 수 있을지도 모릅니다.무엇이 그것을 요구하고 무엇이 요구하지 않는지 정확히 파악하지 못했습니다.

url 속성을 사용하는 경우에는 다음을 수행합니다.

table.ajax.reload()

스크립트를 로드하는 방법과 위치를 표시하지 않았지만 플러그인 API 기능을 사용하려면 DataTables 라이브러리를 로드한 후 DataTable을 초기화하기 전에 페이지에 포함시켜야 합니다.

이것처럼.

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

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

이것은 아약스를 사용하지 않고도 저에게 효과가 있었습니다.

Allan Jardine의 DataTables는 표 형식의 데이터를 표시하기 위한 매우 강력하고 매끄러운 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>

자바스크립트

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);
});

원천

당신은 업데이트 작업을 한 후에 이 코드 라인을 작성해야 합니다.

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

데이터 테이블 도움말에 따르면 테이블을 대신할 수 있습니다.

데이터 테이블에 여러 개의 데이터베이스가 필요합니다.

예: 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' }
        ]
    });

하는 경우 데터테이 v1.10.12를로 전화를 겁니다..draw() 및 .full-reset,page그러면 당신은 새로운 데이터로 당신의 dt를 다시 그릴 것입니다.

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

어떤 행동을 합니다.

dt.draw('full-reset')

더 많은 데이터 테이블 문서를 확인

내가 이 일과 관련된 일을...아래는 당신이 필요로 하는 자바스크립트 샘플입니다.여기에 대한 데모가 있습니다. 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');
    }
}

나의 경우(DataTables 1.10.7) 다음 코드가 나에게 적용됩니다.

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

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

Data tables clear(): 테이블에서 모든 데이터 행을 제거하기만 하면 됩니다.

매우 간단한 대답

$("#table_name").DataTable().ajax.reload(null, false); 

내 테이블의 첫 번째 전화:

var myTable = $('.myTable').DataTable({
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
    },
    dom: 'Bfrtip',
    processing: true,
    "paging": false
});

아약스 호출 코드입니다.

아약스 결과 이후:

//Destroy my table
myTable.destroy();

//Place my table again
$("#tableWrapper").html(''+
    '<table class="table-striped myTable">'+
        '<thead>'+
            '<tr>'+
                '<th>Title</th>'+
            '</tr>'+
        '</thead>'+
        '<tbody id="info_conds">'+
            '<td>Content</td>'+
        '</tbody>'+
    '</table>'+
'');

테이블 속성을 다시 호출하는 중

myTable = $('.myTable').DataTable({
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
    },
    dom: 'Bfrtip',
    processing: true,
    "paging": false
});

다 했어요.

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++){
    //
.......}

이것이 제가 이 문제를 해결한 이유입니다.

const myTable= $('#mytable');
myTable.DataTable({
  **bDestroy: true**
}
);

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

setInterval('autoRefresh()', 5000);

데이터 테이블을 init로 다시 초기화하고 쓰기 검색을 true로 ..done.아주 간단합니다.

예를 들면

TableAjax.init();
retrieve: true,

언급URL : https://stackoverflow.com/questions/12934144/how-to-reload-refresh-jquery-datatable