Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Datatable not working on ajax call

I use Datatable in my web application. Following is my simple code to get data using ajax.

<script>
    $(document).ready(function() {
        $('#mytable').DataTable();
    } );
</script>

<body>
  <h2>AJAX SELECT</h2><hr>
  <div align="center">
    Select Team :
    <select name="select" id ='teamSelect'>
        <option value="">Select Value</option>
        <option value="op2">Company 1</option>
    </select>
  </div>
  <div id='tableContainer' align="center"></div>

 <script>
    $(function() {
        $("#teamSelect").bind("change", function() {
            $.ajax({
                type: "GET", 
                url: "getData.php",
                "dataSrc": "tableData",
                success: function(html) {
                    $("#tableContainer").html(html);
                }
            });
        });

    });
</script>

and Getdata.php Code

<table id="mytable" class="display" cellspacing="0" width="50%">
    <thead>
    <tr>
        <th>First name</th>
        <th>Last Name</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
    </tr>
    <tr>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
    </tr>
</tbody>

I Link Jquery, datatable css and js both.but still It return output as normal HTML table. No console error founded. I need that data in datatable. So how can i get that.

and i also tested datatable in index.php page. It working quite good.

like image 656
TarangP Avatar asked Dec 08 '22 16:12

TarangP


2 Answers

You are initializing datatable before table added. You need to initialize it in ajax

remove following script

<script>
    $(document).ready(function() {
        $('#mytable').DataTable();
    } );
</script>

update ajax as below:

<script>
    $(function() {
        $("#teamSelect").bind("change", function() {
            $.ajax({
                type: "GET", 
                url: "getData.php",
                "dataSrc": "tableData",
                success: function(html) {
                    $("#tableContainer").html(html);
                    $('#mytable').DataTable({ 
                      "destroy": true, //use for reinitialize datatable
                   });
                }
            });
        });

    });
</script>
like image 111
B. Desai Avatar answered Dec 10 '22 23:12

B. Desai


Put

<script>
$(document).ready(function() {
    $('#mytable').DataTable();
} );
</script>

At the bottom of your Getdata.php file also links to the datatable css and js.

Or use ajaxComplete function() to call the datatable.

like image 32
Dimitris Filippou Avatar answered Dec 10 '22 22:12

Dimitris Filippou