programing

Datatables 경고 (table id = 'example') : 데이터 테이블을 다시 초기화 할 수 없습니다.

coolbiz 2021. 1. 16. 10:15
반응형

Datatables 경고 (table id = 'example') : 데이터 테이블을 다시 초기화 할 수 없습니다.

datatables 예제로 작업 중이며 페이지를로드 할 때 다음과 같은 오류가 발생합니다. Datatables warning (table id = 'example') : cannot reinitialise data table. 이 테이블에 대한 DataTables 개체를 검색하려면 인수를 전달하지 않거나 bRetrieve 및 bDestroy에 대한 문서를 참조하십시오.

fnRowCallback을 테스트하려고했습니다.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>DataTables live example</title>
<script type="text/javascript" charset="utf-8" src="DataTables/media/js/jquery.js"></script>
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<style type="text/css">
  @import "DataTables/media/css/demo_table.css";
</style>
</head>
 <body id="dt_example">
<script>
$(document).ready(function() {
    $('#example').dataTable();
} );

$(document).ready( function() {
  $('#example').dataTable( {
   "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
     // Bold the grade for all 'A' grade browsers
     if ( aData[4] == "A" )
     {
       $('td:eq(4)', nRow).html( '<b>A</b>' );
     }
   }
 } );
 } );
    </script>

<div id="container">
  <h1>Live example</h1>

  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
      <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
      </tr>
      <tr class="even gradeC">
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
      </tr>
      <tr class="odd gradeA">
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td class="center">5.5</td>
        <td class="center">A</td>
      </tr>
      <tr class="even gradeA">
        <td>Trident</td>
        <td>Internet Explorer 6</td>
        <td>Win 98+</td>
        <td class="center">6</td>
        <td class="center">A</td>
      </tr>
      <tr class="odd gradeA">
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td class="center">7</td>
        <td class="center">A</td>
      </tr>
      <tr class="even gradeA">
        <td>Trident</td>
        <td>AOL browser (AOL desktop)</td>
        <td>Win XP</td>
        <td class="center">6</td>
        <td class="center">A</td>
      </tr>
      <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 1.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.7</td>
        <td class="center">A</td>
      </tr>
      <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 1.5</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
      </tr>
    </tfoot>
  </table>
</div>
</body>
</html>

내가 뭘 잘못하고 있니?

데이터 테이블을 두 번 초기화하는 이유는 무엇입니까?

// Take this off
/*
$(document).ready(function() {
    $( '#example' ).dataTable();
} );
*/
$(document).ready( function() {
  $( '#example' ).dataTable( {
   "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
     // Bold the grade for all 'A' grade browsers
     if ( aData[4] == "A" )
     {
       $('td:eq(4)', nRow).html( '<b>A</b>' );
     }
   }
 } );
 } );

"bDestroy": true를 옵션 객체 리터럴에 추가해보십시오. 예 :

$('#dataTable').dataTable({
    ...
    ....
    "bDestroy": true
});

출처 : iodocs.com

또는 첫 번째 제거 :

$(document).ready(function() {
    $('#example').dataTable();
} );

귀하의 경우에는 최고의 옵션 vjk 입니다.

datatablenew를 만들기 전에 다음 코드를 사용하여 이전 코드를 삭제할 수도 있습니다 datatable.

$("#example").dataTable().fnDestroy();

Add "bDestroy": true in your dataTable Like:-

   $('#example').dataTable({
    ....
    stateSave: true,
    "bDestroy": true
    });

It Will Work.

You can add destroy:true to the configuration to make sure data table already present is removed before being reinitialized.

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

This problem occurs if we initialize dataTable more than once.Then we have to remove the previous.

On the other hand we can destroy the old datatable in this way also before creating the new datatable use the following code :

$(“#example”).dataTable().fnDestroy();

There is an another scenario ,say you send more than one ajax request which response will access same table in same template then we will get error also.In this case fnDestroy method doesn’t work properly because you don’t know which response comes first or later.Then you have to set bRetrieve TRUE in data table configuration.That’s it.

This is My senario:

<script type="text/javascript">

$(document).ready(function () {

        $('#DatatableNone').dataTable({
            "bDestroy": true
        }).fnDestroy();

        $('#DatatableOne').dataTable({
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": ["sorting_disabled"]
            }],
            "bDestroy": true
        }).fnDestroy();

});

</script>

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

Make it a class so you can instantiate multiple table at a time

$('.example').dataTable();

You have to destroy the datatable and empty the table body before binding DataTable by doing this below,

function Create() {
if ($.fn.DataTable.isDataTable('#dataTable')) {
    $('#dataTable').DataTable().destroy();
}
$('#dataTable tbody').empty();
//Here call the Datatable Bind function;}

Remove the first:

$(document).ready(function() {
    $('#example').dataTable();
} );

In my case the ajax call was being interfered by the data-plugin tag applied to the table. The data-plugin does background initialization and will give this error when you have it as well as yourTable.DataTable({ ... }); initialization.

From 

 <table id="myTable" class="table-class" data-plugin="dataTable" data-source="data-source">

To

<table id="myTable" class="table-class" data-source="data-source">

In my case

From

<table id="example" class="display compact table-hover" cellspacing="0" >

To

<table id="example" class="table table-condensed table-hover" cellspacing="0" >

Solved my problem

ReferenceURL : https://stackoverflow.com/questions/13708781/datatables-warningtable-id-example-cannot-reinitialise-data-table

반응형

'programing' 카테고리의 다른 글

내 애플리케이션에 AsyncTask 또는 IntentService를 사용해야합니까?  (0) 2021.01.17
.net 사용자 지정 구성 enum ConfigurationProperty를 구문 분석하는 대 / 소문자를 구분하지 않는 방법  (0) 2021.01.16
envsubst : Mac OS X 10.8에서 명령을 찾을 수 없음  (0) 2021.01.16
MATLAB의 장점은 무엇입니까?  (0) 2021.01.16
경로에서 파일 이름을 추출하는 방법은 무엇입니까?  (0) 2021.01.16

'programing'의 다른글

  • 현재글Datatables 경고 (table id = 'example') : 데이터 테이블을 다시 초기화 할 수 없습니다.

관련글

댓글

티스토리툴바