I'm working in v 1.9.4 and using jQuery UI v 1.10.3.
I have searched all over for an answer to this and nothing I'm finding is working.
I have a page that uses UI tabs. In that tab is a button that does an ajax call for new tables. The call returns fully formatted html tables that are then appended to a div on the page inside the tab using jQuery and then have the dataTable initialize called on the new table. The table is never hidden so that should not be an issue here. That all works great but then when I try to set the width of the columns nothing happens its like its getting over written or ignored. Here's my code.
HTML
JS
I have tried just about every solution on these forms and stack overflow with no luck.
Thank you
UPDATE: It appears that any and all setting in the dataTable function call is being ignored. I just tried to add aaSorting to the call and its being ignored as well. Can anyone shed some light on this please.
I have searched all over for an answer to this and nothing I'm finding is working.
I have a page that uses UI tabs. In that tab is a button that does an ajax call for new tables. The call returns fully formatted html tables that are then appended to a div on the page inside the tab using jQuery and then have the dataTable initialize called on the new table. The table is never hidden so that should not be an issue here. That all works great but then when I try to set the width of the columns nothing happens its like its getting over written or ignored. Here's my code.
HTML
<table id="toBeStarted"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> </tr> </tbody> </table>
JS
$('#myprojects').on('click',function(){ $('#userprojects').val($('#myprojects').data('myid')); $.ajax({ type: 'POST', url: 'myservice.php', cache:false, data: {userID: $('#myprojects').data('myid') }, dataType: 'json', success: function(data, textStatus){ if(data.error){ alert(data.error_msg); } else{ $('#tables').empty(); $('#tables').append(data.que); var toBeStartedTabel = $('#toBeStarted').dataTable({"bAutoWidth": false, "sScrollX": "100%", "aoColumns": [ /*id*/{ "sWidth": "50px"}, /*client*/{ "sWidth": "100px"}, /*project*/null, /*period*/null, /*priority*/null, /*in*/null, /*due*/null, /*Note*/{ "sWidth": "100px"} ] }); toBeStartedTabel.fnAdjustColumnSizing(); $('#tables').append(data.inprocess); var inprocessTabel = $('#inProcess').dataTable(); $('#tables').append(data.rework); var inprocessTabel = $('#rework').dataTable(); $('#tables').append(data.review); var inprocessTabel = $('#review').dataTable(); } }, error: function(xhr, textStatus, errorThrown){ alert(errorThrown); alert(xhr.responseText); //alert(Object.keys(xhr)); } }); });
I have tried just about every solution on these forms and stack overflow with no luck.
Thank you
UPDATE: It appears that any and all setting in the dataTable function call is being ignored. I just tried to add aaSorting to the call and its being ignored as well. Can anyone shed some light on this please.