programing

DataTable을 다시 초기화할 수 없음 - 데이터 테이블의 동적 데이터

topblog 2023. 2. 27. 23:20
반응형

DataTable을 다시 초기화할 수 없음 - 데이터 테이블의 동적 데이터

모든 직원을 보여주는 데이터 테이블이 있습니다.모든 종업원이 정상적으로 동작하고 있습니다.document.ready저는 다음과 같은 직원 유형이 포함된 선택 태그를 가지고 있습니다.'project_manager' & 'team_leader'직원 유형이 변경되면 함수를 호출합니다.get_employees(emp_type)선택한 직원 유형을 전달합니다.

Ajax 응답에서 원하는 적절한 데이터를 가져오고 있지만 경고를 보냅니다.

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

부숴보려 했지만, 소용이 없었어요.

에 대해서도 시도되었다.

$('#example').dataTable().fnClearTable();
$('#example').dataTable().fnDestroy();

테이블을 지우고 새로 추가된 데이터를 표시하지만 매번 열 이름을 가진 새 정렬 이미지를 추가합니다.

여기 제 코드 조각이 있습니다.

$(document).ready(function() {
            get_employees('all');
        });

        function get_employees(emp_type)
        {
            $.ajax({
                url: '../ajax_request.php',
                type: "POST",
                data: {
                    action: "admin_get_all_employees",
                    type: emp_type
                },
                success: function(response) {
                    var response = jQuery.parseJSON(response);

                    // $('#example').destroy(); tried this but haven’t worked

                    $('#example').dataTable({
                        "aaData": response.data,
                    });
                }
            });
        }

잘 부탁드립니다.

DataTables의 현재 버전(1.10.4)에서는 다음과 같이 간단히 추가할 수 있습니다.destroy:true재초기화 전에 이미 존재하는 테이블이 삭제되었는지 확인합니다.

$('#example').dataTable({
    destroy: true,
    aaData: response.data
});

데이터 테이블의 이 기술 노트 섹션에서는 이 경고의 이유를 설명합니다.관련 정보:

이 오류는 선택한 노드의 DataTable 인스턴스가 이미 초기화되었을 때 DataTables 생성자 개체에 옵션을 전달하여 트리거됩니다.예를 들어 다음과 같습니다.

$('#example').dataTable( {
    paging: false
} );


$('#example').dataTable( {
    searching: false
} );

위의 문서에서는 이 문제에 대처하는 두 가지 방법을 설명합니다.

  1. 검색:true 로의 설정 취득을 사용하는 것으로, 초기화 후에 추가 옵션을 적용하는 방법(이전에 초기화되지 않은 경우에서도 동작합니다)에 대해서는, 다음과 같이, 다음과 같이, true 로의 설정 취득을 사용합니다.
table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );
  1. 파기:이 경우 호출을 통해 객체를 명시적으로 파기할 수 있습니다.table.destroy();테이블을 다시 만듭니다.아니면 그냥 통과해도 돼destroy: true옵션을 선택합니다.

    table = $('#example').DataTable( {
        paging: false
    } );
    
    table.destroy();
    
    table = $('#example').DataTable( {
        searching: false
    } );
    

destroy: true 옵션 사용:

$('#example').DataTable( {
    destroy: true,
    searching: false } );

주의: 이 오류는 dataTable을 여러 번 작성하는 javascript 파일을 포함하는 경우에도 발생할 수 있습니다.아파치 타일을 사용하고 있었는데, 베이스와 확장 화질에 포함시켰기 때문에, 이 에러가 발생했습니다.

이것이 도움이 되었습니다.

var table = $('#example').DataTable( {
    // Clear previous data
    destroy: true,
    // Load new data with AJAX from data.json file.
    ajax: "data.json" 
} );

다음과 같은 것을 시도해 보십시오.

    var $table=$('#example').dataTable({
                    "aaData": response.data,
                });


    $table.fnDestroy();

다른 모든 답변은 인스턴스를 알고 있을 때만 작동합니다.html 테이블에 데이터 테이블을 적용하기 위한 js 코드가 js 파일에 포함되어 있는지 모르기 때문에 데이터 테이블 인스턴스를 모르기 때문에 다른 모든 응답은 작동하지 않습니다.

가장 좋은 방법은 html 테이블에서 데이터 테이블 클래스를 삭제하는 것입니다.예:

<table class="datatable" id="maintable"></table>

그런 다음 jquery를 통해 테이블에 데이터 적용 테이블을 수동으로 초기화합니다.

$(document).ready(function () { 
    $('#maintable').dataTable({
        //put all your datatable config and setting and filter here.
    });
})

언급URL : https://stackoverflow.com/questions/24545792/cannot-reinitialise-datatable-dynamic-data-for-datatable

반응형