Building a table with jquery

gutzofter

When I build a table using jquery then use dataTables with the new table, none of the classes get assigned to the table:
table builder
[code]
$('#monitor_messages')
.append('');

$('' +
'' +
'StatusCompletion Time mSec(s)' +
'' +
'').appendTo('#monitor_table');
$('' +
'' +
'------0' +
'' +
'').appendTo('#monitor_table');
$('' +
'' +
'StatusCompletion Time mSec(s)' +
'' +
'').appendTo('#monitor_table');

[/code]
jquery ready function:
[code]
$(function() {
var tableSettings = {
aoColumns: [
{ sWidth: "20%" }
,{ sWidth: "80%" }
]
};

var $ajaxMonitor = $('#ajax_monitor').ajaxMonitor({maximize: true, monitorActive: true});
var monitorTable = $('#monitor_table').dataTable(tableSettings);

$('#get_message').click(function() {
$.ajax({
type: 'GET'
,url: 'server_side.php'
,async: false
,dataType: 'json'
,beforeSend: function() {
$('#message_container').html('Starting Request');
}
,success: function(response) {
if (response.status === 'success') {
$('#message_container').html(response.message);
}
}
});
monitorTable.fnDestroy();
monitorTable = $('#monitor_table').dataTable(tableSettings);
});
});
[/code]

I know i'm destroying the tables and reinitializing. This is first step into implementing dataTables into my plug-in.

When debugging and breakpointing at the assignment I use firebug to inspect element. it is not there, but the table is shown on the web page (somewhat).
No letting the page finsih loading I see:
[code]
Monitor Messages

Show
10
25
50
100
entries

Search:



Status
Completion Time mSec(s)




Status
Completion Time mSec(s)




------
0



Showing 1 to 1 of 1 entries






[/code]

Where did the style wide of 828px come from?

allan

The applied width comes from DataTables trying to 'fix' the width of the table so it doesn't bounce around when paging etc. To stop DataTables trying to be too smart you can disabled the auto-width calculations that DataTables does: http://datatables.net/usage/features#bAutoWidth

I don't understand the bit about the classes not being applied. What's the problem there?

Regards,
Allan

gutzofter

Really need some help on this one. I had to put class="display" in my tag.

Here is my source code repository:
http://github.com/gutzofter/ajaxMonitor

And here is my working example:
http://gutzofter.herobo.com/ajaxMonitor/

The impetus for this was because of all the server-side questions on your forum. I thought what was needed was a plug-in/tool to help with the situation.

harpreetsingh

here is a data table intro i chalked out

http://rowsandcolumns.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html

gutzofter

Thanks. I figured it out. For some reason I thought that dataTables initialization applied a default class to the data table. LOL! Jokes on me.

Next step is to actually have a default table setup in the view. If dataTables plugin exists then utilize it.