DataTables: #example working but #datatable not working when making AJAX call

Question

I want to know the difference between #example and #datatable. I have seen one example there they are using one table with div id as datatable using some hardcoded value. And another table with div id as example . I can make a Ajax call for that second example. But i cant do it for first one.

<script type="text/javascript">
    $(document).ready(function() {
        var oTable = $('#example').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "Json/CustomerListJson.php",
            "sScrollX": "70%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true
        } );
    } );                
</script>

The above code is working well. But If i change the table id to datatable like

<script type="text/javascript">
    $(document).ready(function() {
        var oTable = $('#datatable').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "Json/CustomerListJson.php",
            "sScrollX": "70%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true
        } );
    } );                
</script>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="datatable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Contact</th>
            <th>Email</th>
            <th>Address</th>
            <th>City</th>
            <th>State</th>
            <th>Country</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>     
</div>

I got one warning pop alert which says

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

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy.

This is my first project using Bootstrap CSS. Please provide me the best way.

I want this type of look and feel.

enter image description here But I got this type of table.

Finally I got this error message, if i use #datatable

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

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

I refer this link for the second example datatables.net/release-datatables/examples/server_side/… . But I dont want that look and feel — Sridhar
– Sridhar, Commented Oct 18, 2012 at 6:19

Community · Accepted Answer · 2017-05-23 12:12:12Z

2

+50

You will get a warning when you initialize same datatable twice. Check this example. Using an example given in the datatable docs i was able to apply Bootstrap css. Check the same fiddle link.

If for some reason you are not able to remove the second datatable call, set bDestroy to true link this example or check this link $("#tableId").dataTable().fnDestroy();.

    $('#example').dataTable({
        "sScrollY": "200px",
        "bPaginate": false
    });

    // Some time later....
    $('#example').dataTable({
        "bFilter": false,
        "bDestroy": true //<-- set bDestroy to true which will destroy the previous initializarion
    });

Change this

var oTable = $('#datatable').dataTable( {
        "bProcessing": true,
        "sAjaxSource": "Json/CustomerListJson.php",
        "sScrollX": "70%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true
    } );

to

var oTable = $('#datatable').dataTable( {
        "bProcessing": true,
        "sAjaxSource": "Json/CustomerListJson.php",
        "sScrollX": "70%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true,
        "bDestroy": true,
        "bJQueryUI": true
    } );

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Oct 22, 2012 at 6:27

bhb

2,5914 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sridhar Over a year ago

If I give <table id=example>, table will display just like 2nd Image.

Sridhar Over a year ago

At the same time if i use <table id=datatable> , table wont display and says DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable. To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

Sridhar Over a year ago

We have brought one Bootstrap template, there their datatable looks like first image.

bhb Over a year ago

It would be really helpful if you can create a fiddle out of it :)

bhb Over a year ago

So if you add <table id=datatable> it gives a alert right. That means you have another call to <table id=datatable> in your js file.

|

Collectives™ on Stack Overflow

DataTables: #example working but #datatable not working when making AJAX call

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related