AJAX source

anees

Hello Dear,

I have two files index.php and datatable.php. datatable.php has full html table which I want to change to datatable. when I put the code of datatable.php on index.ph it works fine. But it does not work when I try to load datatable.php with ajax call.

Please tell me that where should I add the javascript files for datatable ? on index.php or on datatables.php

I have tried in different ways but it is not working for me.

Thanks

anees

here is my code

index.php

<script src="jquery.dataTables.min.js"></script>
<script src="dataTables.tableTools.js"></script>
<script src="dataTables.bootstrap.js"></script>

<div id="data"></div>


<script>
$.ajax({
        url     : "datatable.php",
        type    : 'POST',
        success : function(data)
        {   $("#data").html(data);  }
    });
</script>

datatable.php
--------------------------------------------------------------

 <table id="dt" class="table table-striped table-bordered" cellspacing="0" width="100%">
                  <thead>
                    <tr>
                        <th>Type</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                  </tbody>
</table>

<script>
$(document).ready(function() {
    var table = $('#dt').DataTable({
        tableTools: {"sSwfPath": "swf/copy_csv_xls_pdf.swf"}
    });
    var tt = new $.fn.dataTable.TableTools( table );
    $( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
} );
</script>

It loads page with plain table. But datatable does not appear to work on ajax loaded page.

Thanks in advance

allan

I would suggest using DataTables to Ajax source the data for you rather than doing it manually.

Allan

anees

Hello Allan,

Thanks for reply. Actually I have a scenario and I need it in this way. I know about Ajax source. But it is necessary in case that I follow the same thing which I am doing. Can you please help me with it ? these tables are from third party and we do not have control over that to change them.

Thanks

allan

No you don't have to do it that way. If your Ajax feed includes the HTML for the table, then initialise the DataTable in the callback handler. If you need to get another table, then destroy the old table first using destroy().

Allan

anees

Hello Allan,

Thanks for the reply. I will check with these tips and will get back to you :) your support is really good.

:)