使用ajax获取数据表数据

I am trying to display dataTable data using ajax but it didn't work.

This is my jquery code :

$('#example').DataTable({
                ajax: {
                    type: 'GET',
                    url: 'data.php',
                    success: function (msg) {
                        $("#tbody_example").html(msg);
                    }
                }
            });

This is my data.php page :

    <?php   echo '<td>Name</td>
            <td>Position</td>
            <td>Office</td>
            <td>Extn.</td>
            <td>Start date</td>
            <td>Salary</td>'; ?>

and This is my dataTable :

 <table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody id="tbody_example">

    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

My dataTable still empty and I get MOCK GET: data.php as error. Any one can help me.

Try the below thing, It should work

In php file

$content = "<td>Name</td>
            <td>Position</td>
            <td>Office</td>
            <td>Extn.</td>
            <td>Start date</td>
            <td>Salary</td>";

$return["json"] = json_encode();
echo json_encode($return);

In ajax

ajax: {
         type: 'GET',
         url: 'data.php',
         success: function (msg) {
               $("#tbody_example").html(msg["json"]);
         }
}

That will not work.

Please, reference DataTables documentation to see that success must not be overridden as it is used internally in DataTables.

Instead you might use function ajax( data, callback, settings )

$('#example').DataTable({
    ajax: function(data, callback, settings) {
        $.get({
            type: 'GET',
            url: 'data.php',
            success: function (msg) {
                $("#tbody_example").html(msg); // this is NOT how the table should be populated

                // invoke callback(msg) to populate the table
            });
    }
});

Thus, you populate the table by calling callback(response_data) with the response_data that is either string[][] or object[] type. In case of the latter you might need to add "columns" property to DataTables config.

It works for me.I just add dataType

                ajax: {
                   type: 'GET',
                   url: 'data.php',
                   dataType : 'html',
                   success: function (msg) {
                      $("#tbody_datatable").html(msg);

                    },
                    error: function (req, status, err) {
                         console.log('Something went wrong', status, err);
                    }
                }