Table styled on repopulation

kingrichard2005

Hi, I have a datatable that is periodically repopulated with data. I notice that when it gets repopulated the html table element gets a width style applied to it, e.g. table when it iniitally loads has no styling [code] [/code], after repopulating the table, it gets a width style applied to it [code] [/code]

Just to minimize any confusion, here is the code that populates the table:

[code]
$('myDataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bDeferRender": true,
"bDestroy": true,
"iDisplayLength": 25,
"aaSorting": [[1, "desc"]],
"aaData": aaData
});
[/code]

I went over my style sheets and didn't see that style set anywhere. I just want to make sure Datatables has no automatic styling. Any questions, please ask. Help is appreciated.

fbas

by default, "bAutoWidth" is set to true

you can set it to false in your intialization.

http://www.datatables.net/ref

kingrichard2005

Thanks for the reference fbas, disabling resolved the issue.

fbas

to get myself oriented with the default initialization values of DataTables, I put together this file that explicitly declares all the default values (there are some exceptions, this code doesn't actually run).

this particular list is alphabetical. you might prefer to see items grouped semantically.

these blocks of code should be equivalent in 1.8.1
[code]
$(document).ready(function() {
oTable = $('#example').dataTable();
});
[/code]

[code]
$(document).ready(function() {
oTable = $('#example').dataTable({
/* arrays */
aaSorting: null, // array of arrays. inner array is tuple of colnum and direction (asc or desc)
aaSortingFixed: null, // array of arrays. user can't override these values. all sorts are after this sort order
aLengthMenu: [ 10, 25, 50, 100 ], // values for the iDisplayLength drop-down list (can be 2d array, vals and names)
aoColumns: null, // column definitions - see column definitions section
aoColumnDefs: null, // targeted column definitions - see column definitions section
aoSearchCols: null, // initial search values for each column
asStripClasses: [ 'odd', 'even' ], // array of classes to cycle through for each row added

/* booleans */
bAutoWidth: true, // let DataTables resize column widths
bDeferRender: false, //defer the creation of the table elements for each row until they are needed for a draw
bDestroy: false, // destroy the original table and remake one using these initialization settings
bFilter: true, // use DataTables filter capabilities
bInfo: true, // show info about visible data
bJQueryUI: false, // use JQueryUI ThemeRoller support
bLengthChange: true, // allow user to change number of rows displayed. requires bPaginate. uses Length Menu
bPaginate: true, // break data into pages
bProcessing: true, // display oLanguage.sProcessing message
bRetrieve: false, // retrieve DataTables object (the intialializations) of a table
bScrollCollapse: false, // force the footer to collapse up to table size if smaller than sScrollY
bScrollInfinite: false, // use with sScrollY for infinite scrolling. this disables bPaginate
bSort: true, // allow user to sort columns marked bSortable
bSortCellsTop: false, // use top unique cell? or bottom?
bSortClasses: true, // apply sort classes for sorted columns
bStateSave: false, // set cookie to save state (pagination, length, filtering, sorting)

/* callback functions */
fnCookieCallback: void, // function(sName, oData, sExpires, sPath) returns cookie string
fnDrawCallback: void, // function() called after draw
fnFooterCallback: void, // function( nFooterNode, aasData, iStart, iEnd, aiDisplay )
fnFormatNumber: {function using commas for grouping}, // function(iIn) return formatted string of iIn
fnHeaderCallback: void, // function( nHeaderNode, aasData, iStart, iEnd, aiDisplay )
fnInfoCallback: void, // function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) return string
fnInitCallback: void, // function() called after initializations are complete
fnPreDrawCallback: void, // function( oSettings ) return false to telling DataTables not to proceed, else continue
fnRowCallback: void, // function( nRow, aData, iDisplayIndex, iDisplayIndexFull )
fnServerData: $.getJSON, // function ( sSource, aoData, fnCallback )
fnStateLoadCallback: void, // function ( oSettings, oData )
fnStateSaveCallback: void, // function ( oSettings, sValue )

/* integers */
iCookieDuration: 7200, // length of time til cookie expiration in seconds, default 2 hours
iDeferLoading: null, // don't run XHR at load time, use data on page instead until first redraw
iDisplayLength: 10, // number of rows to show per page
iDisplayStart: 0, // row number to start on (zero indexed)
iScrollLoadGap: 100, // amount of scrolling remaining that triggers next page load

/* objects */
oLanguage: { // language settings
oPaginate: {
sFirst: "First",
sLast: "Last",
sNext: "Next",
sPrevious: "Previous"
},
sEmptyTable: "No data available in table",
sInfo: "Showing _START_ to _END_ of _TOTAL_ entries", // display of records showing, with replacement of values
sInfoEmpty: "Showing 0 to 0 of 0 entries", //
sInfoFiltered: "(filtered from _MAX_ total entries)",
sInfoPostFix: "sInfoPostFix", // additional description
sLengthMenu: "Show _MENU_ entries",
sLoadingRecords: "Loading...", // message shown when loading client side data
sProcessing: "Processing...", // message shown when loading server side data
sSearch: "Search:", // label shown next to search textbox. you can place the textbox within the text by using _INPUT_ pseudo variable
sUrl: "", // url to external JSON file containing oLanguage object
sZeroRecords: "No matching records found" // message shown when no records found during search
},
oSearch: { // initial search settings
"sSearch": "", // search string to apply to all bSearchable columns
"bRegex": false, // whether or not sSearch is a regular expression
"bSmart": true // whether or not to use smart filtering functionality
},

/* strings */
sAjaxProp: "aaData", // name of variable that holds data you want used
sAjaxSource: null, // url of external data
sCookiePrefix: "SpryMedia_DataTables_", // prefix of cookie variables
sDom: "lfrtip", // DOM definition string. if JQueryUI is used, this value will be '<"H"lfr>t<"F"ip>'
sPaginationType: "two_button", // definition of page markers
sScrollX: "", // CSS unit or number for viewport width
sScrollXInner: "", // CSS unit or number for additional spacing for tables using sScrollX
sScrollY: "", // CSS unit or number for viewport height

});

/* column definitions */
mycol = {
asSorting: [ 'asc', 'desc' ], // sorting direction
aTargets: null // columns to apply a column definition to
bSearchable: true, // allow user to search this column
bSortable: true, // allow user to sort this column
bUserRendered: true, // sort this column using rendered value, not original value
bVisible: true, // display this column
fnRender: null, // custom render function(oObj) returns string, oObj = { iDataRow, iDataColumn, aData, oSettings }
iDataSort: {this column num}, // columns to sort before this one
mDataProp: {this column num}, // column index or name to get data from
sClass: "", // class to apply to this column
sDefaultContent: null, // value to use if data is null
sName: "", // column name for server side processing, i.e. database field name
sSortDataType: "std", // source data type
sTitle: {TH value}, // column display header
sType: {auto selected}, // type used for sorting. 'string', 'numeric', 'date' or 'html', extendible via plugins
sWidth: {automatic} // CSS value for column width

}

});
[/code]

I had enumerated all the API functions too, in context that looks like code, but I guess that copy is at work.

allan

Good grief there are a lot of options these days! :-)