how to fix this error : To retrieve the DataTables object for this table,..

Question

cokerz_written 0 Newbie Poster

13 Years Ago

i have error like this :

DataTables warning (table id = 'datatables'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).

in my code when i want to display data from database in a same page (index) with diffrent query,,

this is my index code :

<!DOCTYPE html>
<html>
<head>
<title>Informasi Peralatan</title>
  <div id="container">
  <div id="text">
  <h1>Data informasi aset <br> Gedung BOP</h1>
  <h2>PT.PLN (PERSERO) SEKTOR PEMBANGKITAN TARAHAN</h2>
  <span class="admin">Selamat datang admin | Logout</span>
  </div>
  <div id="center">
  <link rel="stylesheet" href="../CSS/alat.css" type="text/css" media="screen" />
  <link href="../jquery-ui-1.8.16.custom/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
  <script src="../jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"></script>
  <script src="../jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>


  <script>
  $(document).ready(function() {
    $("#tabs").tabs();
  });
  </script>
  </head>
<body style="font-size:62.5%;">
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>Alat (Lab Batu-bara)</span></a></li>
        <li><a href="#fragment-2"><span>Spare Part (Lab Batu bara)</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>

    <div id="fragment-1">
        <p></p>
        <pre><code></code></pre>

      **<?php include "tampil_alat.php" ?> ** my first include

    </div>
    <div id="fragment-2">

    ** <?php include "sparepart.php"; ?>  second included**

    </div>
    <div id="fragment-3">

    </div>
    <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script>
  $(document).ready(function() {
    $("#slider").slider();
  });
  </script>

</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<script>
  $(document).ready(function() {
    $("#dialog").dialog();
  });
  </script>
</head>
<body style="font-size:62.5%;">
<div id="footer"> 
<script>
    $(function(){
    $( "button,input:submit,a".".demo").button();
    $("a",".demo").click(function() {return false;});
    });
</script>
<div class="demo">
  <input type="submit" value="Tambah">
 <a href="#">tambah.php</a>

 <input type="submit" value="Edit">
 <a href="#"></a>

  <input type="submit" value="Hapus">
 <a href="#"></a>
 </div>
</div>
</div>
</div>
</div>
</body>
</html>

first include code :

<?php
include "koneksi.php";
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Datatables</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
        <script src="media/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> var jY = $.noConflict(true); </script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
        <link rel="StyleSheet" href="media/css/demo_table_jui.css" type="text/css" />



        <style>
            *{
                font-family: arial;

            }
        </style>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $('#datatables').dataTable({
                    "sPaginationType":"full_numbers",
                    "aaSorting":[[2, "desc"]],
                    "bJQueryUI":true

                });
            })

        </script>
    </head>
    <body>
        <div class="wrap">
            <div class="header">
            </div>
            <table id="datatables" class="display">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Peralatan</th>
                        <th>No Part</th>
                        <th>Lokasi</th>
                        <th>Merk</th>
                        <th>Satuan</th>
                        <th>Jumlah</th>
                        <th>Fungsi</th>
                        <th>Keterangan</th>
                        <th>Gambar</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    if($_GET['action']  == 'delete'){  
                      mysql_query("delete from lab_batubara where id='".mysql_real_escape_string($_GET['idhapus'])."'");
                      echo("<script>alert('Data berhasil di hapus !');document.location.href='admin.php'</script>");
}

                  $result = mysql_query("SELECT * FROM lab_batubara where id=2"); code to display data

                    $no = 1;
                    while ($row = mysql_fetch_array($result)) {
                        ?>
                        <tr>
                            <td><?php echo $no; ?></td>
                            <td><?php echo $row['Nama_peralatan']?></td>
                            <td><?php echo $row['Part_No']?></td>
                            <td><?php echo $row['Lokasi']?></td>
                            <td><?php echo $row['Merk']?></td>
                            <td><?php echo $row['Satuan']?></td>
                            <td><?php echo $row['Jumlah']?></td>
                            <td><?php echo $row['Fungsi']?></td>
                            <td><?php echo $row['Keterangan']?></td>
                            <td><?php echo $row['Gambar']?></td>
                            <td><a class='delete' href='forminput_bop.php' onClick='DeleteData($(this))'>Tambah</a> |
                            <a class='edit' href='#' onClick='EditData($(this))'>Edit</a> |
                            <a href= "tampil_alat.php?idhapus=<?php echo $row['id'] ?>&action=delete" onClick="return confirm('Data akan di hapus dari database !')"> Delete</a>
                            </td>
                        </tr>
                        <?php
                        $no++;
                    }
                    ?>
                </tbody>
            </table>
        <div class="footer">
            <p align="center"> &copy; <?php echo date('Y'); ?></p>
        </div>
        </div>
    </body>
</html>

and this is my seconde inluded code

<?php
include "koneksi.php";
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Datatables</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
        <script src="media/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> var jY = $.noConflict(true); </script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
        <link rel="StyleSheet" href="media/css/demo_table_jui.css" type="text/css" />



        <style>
            *{
                font-family: arial;

            }
        </style>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $('#datatables').dataTable({
                    "sPaginationType":"full_numbers",
                    "aaSorting":[[2, "desc"]],
                    "bJQueryUI":true

                });
            })

        </script>
    </head>
    <body>
        <div class="wrap">
            <div class="header">
            </div>
            <table id="datatables" class="display">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Peralatan</th>
                        <th>No Part</th>                        
                        <th>Merk</th>
                        <th>Lokasi</th>
                        <th>Satuan</th>
                        <th>Jumlah</th>
                        <th>Fungsi</th>
                        <th>Keterangan</th>
                        <th>Gambar</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    if($_GET['action']  == 'delete'){  
                      mysql_query("delete from lab_batubara where id='".mysql_real_escape_string($_GET['idhapus'])."'");
                      echo("<script>alert('Data berhasil di hapus !');document.location.href='admin.php'</script>");
}

                  $result = mysql_query("SELECT * FROM lab_batubara where id=1"); code to display data

                    $no = 1;
                    while ($row = mysql_fetch_array($result)) {
                        ?>
                        <tr>
                            <td><?php echo $no; ?></td>
                            <td><?php echo $row['Nama_peralatan']?></td>
                            <td><?php echo $row['Part_No']?></td>                            
                            <td><?php echo $row['Merk']?></td>
                            <td><?php echo $row['Lokasi']?></td>
                            <td><?php echo $row['Satuan']?></td>
                            <td><?php echo $row['Jumlah']?></td>
                            <td><?php echo $row['Fungsi']?></td>
                            <td><?php echo $row['Keterangan']?></td>
                            <td><?php echo $row['Gambar']?></td>
                            <td><a class='delete' href='forminput_bop.php' onClick='DeleteData($(this))'>Tambah</a> |
                            <a class='edit' href='#' onClick='EditData($(this))'>Edit</a> |
                            <a href= "tampil_alat.php?idhapus=<?php echo $row['id'] ?>&action=delete" onClick="return confirm('Data akan di hapus dari database !')"> Delete</a>
                            </td>
                        </tr>
                        <?php
                        $no++;
                    }
                    ?>
                </tbody>
            </table>
        <div class="footer">
            <p align="center"> &copy; <?php echo date('Y'); ?></p>
        </div>
        </div>
    </body>
</html>

thanks for any your help...

javascript:jquery

Edited 13 Years Ago by pritaeas because: Moved

3 Contributors
4 Replies
1K Views
3 Years Discussion Span
Latest Post 10 Years Ago Latest Post by Febby

Dani AI

Generated 10 Months Ago

The posts show the typical root cause: the page ends up loading jQuery/DataTables and running an initialization more than once (the same table id appears inside different included fragments). As noted, a DataTable instance should be created only once. Practical fixes and safe patterns follow.

First, simplify the markup: keep all <script>/<link> includes (jQuery, DataTables CSS/JS) in the main page only. Make PHP includes return only the table HTML (no full <html>/<head>/<body> or duplicated script tags). Give each table a unique id or a shared class (for example class="my-datatable") so multiple tables do not collide. Avoid calling .noConflict(true) from several places — call it only if a real conflict exists and do it once, then use the single jQuery reference consistently.

Second, initialize safely (lazy-init on tab activation and guard against reinitialization). Example pattern for jQuery UI tabs:

$( "#tabs" ).on( "tabsactivate", function( e, ui ) {
  var $tbl = ui.newPanel.find("table.my-datatable");
  if ( $tbl.length && !$.fn.dataTable.isDataTable( $tbl[0] ) ) {
    $tbl.DataTable({
      pagingType: "full_numbers",
      order: [[2, "desc"]],
      jQueryUI: true
    });
  }
});

If reinitialization is required (rare), destroy the old instance first. Modern API:

if ( $.fn.dataTable.isDataTable('#datatables') ) {
  $('#datatables').DataTable().clear().destroy();
}
$('#datatables').DataTable({ /* options */ });

For older DataTables releases the destroy method may be fnDestroy(). Finally, prefer updating an existing table via the DataTables API or Ajax reloads rather than tearing it down and recreating it whenever possible.

All 4 Replies

pritaeas 2,276 Most Valuable Poster

13 Years Ago

You can call

$('#datatables').dataTable({...});

only once.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

cokerz_written 0 Newbie Poster · Answer 1 · 2012-10-04T08:59:42+00:00

cokerz_written 0 Newbie Poster

13 Years Ago

its still not working in another tab...

cokerz_written 0 Newbie Poster · Answer 2 · 2012-10-05T08:43:49+00:00

cokerz_written 0 Newbie Poster

13 Years Ago

Finaly i solved that..
thanks
:)

Febby 0 Newbie Poster · Answer 3 · 2016-05-18T06:49:27+00:00

Febby 0 Newbie Poster

10 Years Ago

How to solved that ?

how to fix this error : To retrieve the DataTables object for this table,..

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers