Ajax를 사용하여 테이블 내용을 새로 고친 후 데이터 테이블을 다시 그리시겠습니까?
저는 Datables를 사용하고 있으며 AJAX를 사용하여 테이블을 새로 고치는 버튼이 페이지에 있습니다.테이블에서 Ajax 데이터 소스를 사용하지 않고 필요한 경우에만 Ajax를 사용하여 데이터를 새로 고치고 있습니다.아약스는 테이블이 포장된 디브를 새로 고치고 있습니다.테이블을 다시 그려야 하기 때문에 페이지 설정 단추와 필터링 기능이 손실되는 것을 알고 있지만 테이블 초기화 코드에 이를 추가하는 방법을 잘 모르겠습니다.
데이터 테이블 코드
var oTable6;
$(document).ready(function() {
oTable6 = $('#rankings').dataTable( {
"sDom":'t<"bottom"filp><"clear">',
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSortable": false, "sWidth": "10px" },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
});
});
아약스 코드는 다음과 같습니다.
$("#ajaxchange").click(function(){
var campaign_id = $("#campaigns_id").val();
var fromDate = $("#from").val();
var toDate = $("#to").val();
var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
$.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
function( data ) {
$("#ajaxresponse").html(data);
});
});
저는 이것을 시도했지만 작동하지 않았습니다.
"fnDrawCallback": function() {
function( data ) {
$("#ajaxresponse").html(data);
};
},
API 기능을 사용하여 다음 작업을 수행할 수 있습니다.
- 테이블 지우기(fnClearTable)
- 테이블에 새 데이터 추가(fnAddData)
- 테이블 다시 그리기(fnDraw)
갱신하다
DOM 데이터 소스(서버 측 처리용)를 사용하여 테이블을 생성하는 것 같습니다.저는 처음에는 잘 이해하지 못했기 때문에 전에 했던 대답은 그것에 효과가 없을 것입니다.
서버 사이드 코드를 다시 작성하지 않고 작동하려면:
이전 테이블(돔)을 완전히 제거하고 Ajax 결과 콘텐츠로 바꾼 다음 데이터 테이블을 다시 초기화해야 합니다.
// in your $.post callback:
function (data) {
// remove the old table
$("#ajaxresponse").children().remove();
// replace with the new table
$("#ajaxresponse").html(data);
// reinitialize the datatable
$('#rankings').dataTable( {
"sDom":'t<"bottom"filp><"clear">',
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSortable": false, "sWidth": "10px" },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
}
);
}
bDestroy:true를 사용하여 데이터 테이블을 파괴해 보십시오.
$("#ajaxchange").click(function(){
var campaign_id = $("#campaigns_id").val();
var fromDate = $("#from").val();
var toDate = $("#to").val();
var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
$.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
function( data ) {
$("#ajaxresponse").html(data);
oTable6 = $('#rankings').dataTable( {"bDestroy":true,
"sDom":'t<"bottom"filp><"clear">',
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSortable": false, "sWidth": "10px" },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
}
);
});
});
bDestroy: true는 새 선택기를 다시 초기화하기 전에 먼저 해당 선택기와 연결된 데이터 가능 인스턴스를 삭제합니다.
왜 그런지는 잘 모르겠습니다만.
oTable6.fnDraw();
나한테 효과가 있어요.저는 그것을 다음 줄에 놓았습니다.
사용:
var table = $(selector).dataTables();
table.api().draw(false);
또는
var table = $(selector).DataTables();
table.draw(false);
최신 DataTables(1.10 이상) 사용자의 경우 이 페이지의 모든 답변과 예제는 새 API가 아닌 이전 API에 대한 것입니다.새로운 예제를 찾는 데 어려움을 겪었지만 마침내 이 DT 포럼 게시물(대부분의 사용자를 위한 TL;DR)을 발견하여 이 간결한 예제를 만들었습니다.
HTML 문자열을 바로 둘러싼 $() 선택기 구문을 마침내 알아차린 후 예제 코드가 작동했습니다.문자열이 아닌 노드를 추가해야 합니다.
이 예는 정말 볼 가치가 있지만 SO의 정신으로 작동하는 코드의 일부를 보려면 다음과 같이 하십시오.
var table = $('#example').DataTable();
table.rows.add( $(
'<tr>'+
' <td>Tiger Nixon</td>'+
' <td>System Architect</td>'+
' <td>Edinburgh</td>'+
' <td>61</td>'+
' <td>2011/04/25</td>'+
' <td>$3,120</td>'+
'</tr>'
) ).draw();
주의 깊은 독자는 데이터 행을 하나만 추가하기 때문에 table.row.add(...)도 사용할 수 있고 사용할 수 있다는 점에 주목할 수 있습니다.
이것은 나에게 효과가 있습니다.
var dataTable = $('#HelpdeskOverview').dataTable();
var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();
초기화에서 다음을 사용합니다.
"fnServerData": function ( sSource, aoData, fnCallback ) {
//* Add some extra data to the sender *
newData = aoData;
newData.push({ "name": "key", "value": $('#value').val() });
$.getJSON( sSource, newData, function (json) {
//* Do whatever additional processing you want on the callback, then tell DataTables *
fnCallback(json);
} );
},
다음을 사용합니다.
$("#table_id").dataTable().fnDraw();
fnServerData에서 중요한 것은 다음과 같습니다.
newData = aoData;
newData.push({ "name": "key", "value": $('#value').val() });
aoData에 직접 푸시하면 테이블을 처음 그릴 때 변경 내용이 영구적으로 적용되며 fnDraw는 원하는 방식으로 작동하지 않습니다.
Ajax에서 검색한 데이터를 테이블에 제공하는 방법은 다음과 같습니다(이것이 모범 사례인지는 잘 모르겠지만 직관적이고 효과적입니다).
/* initialise table */
oTable1 = $( '.tables table' ).dataTable
( {
'sPaginationType': 'full_numbers',
'bLengthChange': false,
'aaData': [],
'aoColumns': [{"sTitle": "Tables"}],
'bAutoWidth': true
} );
/*retrieve data*/
function getArr( conf_csv_path )
{
$.ajax
({
url : 'my_url'
success : function( obj )
{
update_table( obj );
}
});
}
/* build table data */
function update_table( arr )
{
oTable1.fnClearTable();
for ( input in arr )
{
oTable1.fnAddData( [ arr[input] );
}
}
fnAddData 확인: https://legacy.datatables.net/ref
$(document).ready(function () {
var table = $('#example').dataTable();
var url = '/RESTApplicationTest/webresources/entity.person';
$.get(url, function (data) {
for (var i = 0; i < data.length; i++) {
table.fnAddData([data[i].idPerson, data[i].firstname, data[i].lastname, data[i].email, data[i].phone])
}
});
});
언급URL : https://stackoverflow.com/questions/7819036/redraw-datatables-after-using-ajax-to-refresh-the-table-content
'programing' 카테고리의 다른 글
| 이 평균 가격 루프를 더 빠르게 수행할 수 있는 방법이 있습니까? (0) | 2023.08.18 |
|---|---|
| X-Powered-By: ASP와 같은 IIS 사용자 정의 헤더를 삭제하는 방법응답에서 NET? (0) | 2023.08.18 |
| PHP에서 모호하고 잘못된 날짜 시간을 탐지하는 방법은 무엇입니까? (0) | 2023.08.18 |
| Node.js를 Maria에 연결할 수 없습니다.DB (0) | 2023.08.18 |
| 두 열의 빠른 비교 방법 (0) | 2023.08.18 |