Integrating DataTables with own search filter cause display issue

akymakr

I have a standard jQuery ajax request to my own PHP code to return a formatted HTML code

$.ajax({
    type: "POST",
    url: "ajaxSearch.php",
    data: $('#form').serializeArray(),
    dataType: "json",
    timeout: 10000,
    success: function(returnData) {
        if(returnData.Type == 'success') {
            $('#tbody').html(returnData.Message);
            $('#table').DataTable({
                paging: true,
                searching: false,
                lengthMenu: [[5, 10, 20, 50, 100], [5, 10, 20, 50, 100]],
                iDisplayLength: 5,
                columnDefs: [{
                    orderable: true,
                    targets: -1
                }]
            });
        }
    },
});

I have initialized the table:

<table id="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>

After returnData.Message is embedded into #tbody, the table will look like this:

<table id="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody">
       <tr>
          <td>1</td>
          <td>John Smith</td>
          <td><a href="edit.php?id=1">Edit</a></td>
       </tr>
       <tr>
          <td>2</td>
          <td>John Doe</td>
          <td><a href="edit.php?id=2">Edit</a></td>
       </tr>
    </tbody>
</table>

Then I use DataTables to beautify my table. Also providing searching and paging function.
But there is a problem, my custom form #form may affect the returnData.Message result.
When DataTables is being called again, even though there is nothing inside returnData.Message.
I clicked on the table, the table will show all non-filtered results.

How can I fix this?