Apply datatable fixed header property to Dynamically populated table

meHere

Iam using DataTable in my webpage. The problem is when i populate a table using Ajax , the "DataTable " plugin is not functioning. The error iam getting is this :

 Uncaught TypeError: Cannot read property 'length' of undefined

Using a button , i make an AJAX call , where i use query and retrieve the data in a Table like this:

$options2.= "<table id=\"mtable\"><thead><tr><th>Data1</th><th>Data2</th></tr></thead></tr><tbody><tr><td>d11</td><td>d12</td></tr><tr><td>e11</td><td>e12</td></tr></tbody></table>";
echo $options2;

And in my Success call of Ajax , i use the above like this:

jQuery("div#tablelistitem").html(returnval);

Can someone please guide me why iam getting this error, and can u pleasehelp me resolve this issue.

i calls the plugin as:

var table = $('#mtable').DataTable({"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }] });
                        new $.fn.dataTable.FixedHeader( table, {
                    } );