jQuery dataTable을 다시로드 / 새로 고침하는 방법은 무엇입니까?
화면의 버튼을 클릭하면 jQuery dataTable 이 새로 고쳐지 는 기능을 구현하려고합니다 (dataTable이 생성 된 이후 서버 측 데이터 소스가 변경되었을 수 있으므로).
내가 가진 것은 다음과 같습니다.
$(document).ready(function() {
$("#my-button").click(function() {
$("#my-datatable").dataTable().fnReloadAjax();
});
});
그러나 이것을 실행하면 아무것도하지 않습니다. 버튼을 클릭 할 때 dataTable을 새로 고치는 적절한 방법은 무엇입니까? 미리 감사드립니다!
다음을 시도 할 수 있습니다.
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);
});
http://www.meadow.se/wordpress/?p=536
DataTables 1.10.0 버전을 사용하면 다음과 같이 쉽게 기본 제공됩니다.
var table = $('#example').DataTable();
table.ajax.reload();
아니면 그냥
$('#example').DataTable().ajax.reload();
http://datatables.net/reference/api/ajax.reload ()
광범위한 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();
먼저 데이터 테이블을 파괴 한 다음 데이터 테이블을 그립니다.
$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
나는 같은 문제가 있었는데 이것이 내가 그것을 고친 방법입니다.
먼저 원하는 방법으로 데이터를 가져옵니다. 테이블을 변경할 결과를 제출 한 후 ajax를 사용합니다. 그런 다음 새로운 데이터를 지우고 추가합니다.
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
var ref = $('#example').DataTable();
ref.ajax.reload();
당신이 추가하려면 다시로드 / 새로 고침 버튼을 에 DataTables 1.10 후 사용 drawCallback을 .
아래 예를 참조하십시오 ( 부트 스트랩 CSS와 함께 DataTables 를 사용 하고 있습니다)
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();
}
이것이 제가하는 방법입니다 ... 아마도 최선의 방법은 아니지만 확실히 더 간단하고 (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>없으면 작동하지 않는 경우가 있습니다. 그러나 당신은 그것 없이도 지나갈 수 있습니다. 나는 그것이 무엇이 필요하고 무엇이 필요하지 않은지 정확히 파악하지 못했습니다.
먼저 데이터 테이블을 파괴 한 다음 다시 설정하십시오.
var table;
$(document).ready(function() {
table = $("#my-datatable").datatable()
$("#my-button").click(function() {
table.fnDestroy();
table = $("#my-datatable").dataTable();
});
});
다음 코드를 사용하는 것이 좋습니다.
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>
이에 대한 자세한 내용은 여기 에서 찾을 수 있습니다.
스크립트를로드하는 방법 / 위치는 표시하지 않았지만 플러그인 API 함수를 사용하려면 DataTables 라이브러리를로드 한 후 DataTable을 초기화하기 전에 페이지에 포함시켜야합니다.
이렇게
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>
url 속성을 사용하는 경우
table.ajax.reload()
누군가에게 도움이되기를 바랍니다.
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);
});
var myTable = $ ( '# tblIdName'). DataTable (); myTable.clear (). rows.add (myTable.data) .draw ();
이것은 ajax를 사용하지 않고 나를 위해 일했습니다.
데이터 테이블을 새로 고치려면이 코드를 사용하십시오.
$("#my-button").click(function() {
$('#my-datatable').DataTable().clear().draw();
});
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++){
//
.......}
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' }
]
});
datatable 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">×</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">×</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');
}
}
업데이트 작업을 수행 한 후이 코드 줄을 작성해야합니다.
$('#example').DataTable().ajax.reload();
function autoRefresh(){
table.ajax.reload(null,false);
alert('Refresh');//for test, uncomment
}
setInterval('autoRefresh()', 5000);
초기화로 데이터 테이블을 다시 초기화하고 true ..done..so simple로 검색 쓰기
예.
TableAjax.init();
retrieve: true,
참고 URL : https://stackoverflow.com/questions/12934144/how-to-reload-refresh-jquery-datatable
'Programing' 카테고리의 다른 글
| Android 개발에서 커서 사용은 무엇입니까? (0) | 2020.10.31 |
|---|---|
| Python : _imagingft C 모듈이 설치되지 않았습니다. (0) | 2020.10.31 |
| Intellij 런처가 Unity에서 작동하지 않습니까? (0) | 2020.10.31 |
| 훈련 중 nans의 일반적인 원인 (0) | 2020.10.30 |
| 템플릿 typedefs-해결 방법은 무엇입니까? (0) | 2020.10.30 |