Datatables warning table id example cannot reinitialise data table

Question

I am working with datatables example and getting an error like this when loading page  Datatables warning table id    example    cannot reinitialise data table  To retrieve the DataTables object for this table  pass no arguments or see the docs for bRetrieve and bDestroy   I was trying to test the fnRowCallback   lt    page language  java  contentType  text html  charset ISO-8859-1  pageEncoding  ISO-8859-1   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt    lt head gt   lt meta http-equiv  content-type  content  text html  charset utf-8    gt    lt title gt DataTables live example lt  title gt   lt script type  text javascript  charset  utf-8  src  DataTables media js jquery js  gt  lt  script gt   lt script class  jsbin  src  http   datatables net download build jquery dataTables nightly js  gt  lt  script gt   lt style type  text css  gt     import  DataTables media css demo table css    lt  style gt   lt  head gt    lt body id  dt example  gt   lt script gt    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    lt b gt A lt  b gt                                   lt  script gt    lt div id  container  gt     lt h1 gt Live example lt  h1 gt      lt table cellpadding  0  cellspacing  0  border  0  class  display  id  example  gt       lt thead gt         lt tr gt           lt th gt Rendering engine lt  th gt           lt th gt Browser lt  th gt           lt th gt Platform s  lt  th gt           lt th gt Engine version lt  th gt           lt th gt CSS grade lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt         lt tr class  odd gradeX  gt           lt td gt Trident lt  td gt           lt td gt Internet Explorer 4 0 lt  td gt           lt td gt Win 95  lt  td gt           lt td class  center  gt  4 lt  td gt           lt td class  center  gt X lt  td gt         lt  tr gt         lt tr class  even gradeC  gt           lt td gt Trident lt  td gt           lt td gt Internet Explorer 5 0 lt  td gt           lt td gt Win 95  lt  td gt           lt td class  center  gt 5 lt  td gt           lt td class  center  gt C lt  td gt         lt  tr gt         lt tr class  odd gradeA  gt           lt td gt Trident lt  td gt           lt td gt Internet Explorer 5 5 lt  td gt           lt td gt Win 95  lt  td gt           lt td class  center  gt 5 5 lt  td gt           lt td class  center  gt A lt  td gt         lt  tr gt         lt tr class  even gradeA  gt           lt td gt Trident lt  td gt           lt td gt Internet Explorer 6 lt  td gt           lt td gt Win 98  lt  td gt           lt td class  center  gt 6 lt  td gt           lt td class  center  gt A lt  td gt         lt  tr gt         lt tr class  odd gradeA  gt           lt td gt Trident lt  td gt           lt td gt Internet Explorer 7 lt  td gt           lt td gt Win XP SP2  lt  td gt           lt td class  center  gt 7 lt  td gt           lt td class  center  gt A lt  td gt         lt  tr gt         lt tr class  even gradeA  gt           lt td gt Trident lt  td gt           lt td gt AOL browser  AOL desktop  lt  td gt           lt td gt Win XP lt  td gt           lt td class  center  gt 6 lt  td gt           lt td class  center  gt A lt  td gt         lt  tr gt         lt tr class  gradeA  gt           lt td gt Gecko lt  td gt           lt td gt Firefox 1 0 lt  td gt           lt td gt Win 98    OSX 2  lt  td gt           lt td class  center  gt 1 7 lt  td gt           lt td class  center  gt A lt  td gt         lt  tr gt         lt tr class  gradeA  gt           lt td gt Gecko lt  td gt           lt td gt Firefox 1 5 lt  td gt           lt td gt Win 98    OSX 2  lt  td gt           lt td class  center  gt 1 8 lt  td gt           lt td class  center  gt A lt  td gt         lt  tr gt       lt  tbody gt       lt tfoot gt         lt tr gt           lt th gt Rendering engine lt  th gt           lt th gt Browser lt  th gt           lt th gt Platform s  lt  th gt           lt th gt Engine version lt  th gt           lt th gt CSS grade lt  th gt         lt  tr gt       lt  tfoot gt     lt  table gt   lt  div gt   lt  body gt   lt  html gt    What am i doing wrong in this

User · Answer

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

User · Answer

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    lt script type  text javascript  gt     document  ready function                   DatatableNone   dataTable                bDestroy   true            fnDestroy                 DatatableOne   dataTable                aoColumnDefs                       bSortable   false                   aTargets     sorting disabled                                bDestroy   true            fnDestroy           lt  script gt

User · Answer

You are initializing datatables twice  why      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    lt b gt A lt  b gt

User · Answer

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     lt table id  myTable  class  table-class  data-plugin  dataTable  data-source  data-source  gt    To   lt table id  myTable  class  table-class  data-source  data-source  gt

User · Answer

When searching this topic I found the solution elsewhere but adding the answer here since I had the same problem as above together with the text  quot Uncaught TypeError  Cannot set property   DT CellIndex  of undefined quot   Cause was due to having one to many  tags in the table body

User · Answer

Search in your code maybe you have initialized dataTable twice in your code  You shold have like this code       example   dataTable   paging  false       Only one time in your code

User · Answer

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

User · Answer

I know its an old question  This problem can be easily reproduced if you try to reinitialize the Datatable again    For example in your function somewhere you are calling     example   DataTable    searching  false     again   There is easy resolving this issue  Please follow the steps   Initialize the Datatable to a variable rather than directly initializing  DataTable method     For Example Instead of calling     example   DataTable    searching  false     try to declare it globally  or in scope of javascription that you are using  like this var table       example   DataTable    searching  false        Now Whenever you are calling this method     example   DataTable    searching  false     again then before calling it perform the following actions   if  table    undefined  amp  amp  table    null     table destroy    table   null      Once you have followed the steps above then go ahead with re-initializing the table with same variable without using var keyword  as you have already defined it  i e table       example   DataTable    searching  false         JSFiddle Code Also attached for any reference of same code http   jsfiddle net vibs2006 qxy4nwfg

User · Answer

Try adding  bDestroy   true to the options object literal  e g       dataTable   dataTable                         bDestroy   true       Source  iodocs com  or Remove the first     document  ready function             example   dataTable           In your case is the best option vjk

User · Answer

You can also destroy the old datatable by using the following code before creating the new datatable       example   dataTable   fnDestroy

User · Answer

Remove the first     document  ready function             example   dataTable

User · Answer

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

User · Answer

Add   bDestroy   true in your dataTable Like -         example   dataTable                stateSave  true       bDestroy   true           It Will Work

[jquery] Datatables warning(table id = 'example'): cannot reinitialise data table

Examples related to jquery

Examples related to html

Examples related to datatables