Jquery $('#dataTable').DataTable().destroy() does not work

ASPDEV
ASPDEV used Ask the Experts™
on
Hello Experts,

I 'm new to JQuery and using Datatable(3rd party o plug-in) to show data(grid style) on the page. Once the record is inserted I want to update the grid(new record is inserted via button click which opens modal popup and later I'm refreshing the grid). But I'm getting "Not available" when destroying the datatable so I rebuild it again with new data. Below is the sample code.

HTML
<div class="table-responsive m-t-40">

                    <table id="dataTable" class="display nowrap table  dataTable" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>                               
                                <th>Phone</th>
                                <th>Email</th>                              
                            </tr>
                        </thead>
                        <tbody id="tblbody"></tbody>
                    </table>
                </div>

Open in new window


JavaScript
 $("#tblbody").empty();

                            data = JSON.parse(data);
                           $('#datatable').datatable().destroy(); -- Error here on  on Quick watch the value is "not available"
                            
                             -- Rest of the code doesn't execute due to error     
                            var html = '';
                            for (var i = 0; i < data.length; i++) {
                                var obj = data[i];

                                html += '<tr>'
                                html += '<td>' + obj.FirstName + '</td>';
                                html += '<td>' + obj.LastName + '</td>';                             
                                html += '<td>' + obj.PhoneNumber + '</td>';
                                html += '<td>' + obj.Email + '</td>';                                                                 
                                html += '</tr>'
                            }

Open in new window


If I comment $('#dataTable').DataTable().destroy() and try the above code I get a Warning message(popup) on the page and also tried $('#dataTable').DataTable().clear() it doesn't throw error but I got the same warning. Attached is the warning message.

Thanks,
ASPDEV
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi

First this change ID of table you are using to destroy datatable.

Remember ID is case sensitive in retrieving in jQuery.

Change:
$('#dataTable').datatable().destroy();

This should work. If not works then try by using: 'On'

var table = $('#dataTable').DataTable();
$('<button_ID>').on( 'click', function () {
    table.destroy();
} );

Reference:
https://datatables.net/reference/api/destroy()
Commented:
Mrunal,

I found the issue in my code, due to missing extra column(BLANK) for EDIT button. Thanks for your time and help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial