Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all articles
Browse latest Browse all 1816

heading and data column widths differ

$
0
0
I've a datatable that gets server side data via POST from a servlet returning json aaData. The data has 53 columns. When the table first displays, it has all the data. I then hide all but the default columns. Everything displays fine. When the user (me right now) selects a different set of columns to display (from a selection list in a hidden div), the headings and data display, but with different widths. For example, but I'm not explicitly stetting column widths, heading = 50px and data = 30px. If I click on one of the headings, sorting the data, the columns align. I'm pretty sure I might be missing a refresh call, but have hit a wall.

The document ready function:
	$.extend($.fn.dataTable.defaults, {
		"bSort": true,
		"sScrollY": 550,
		"sScrollX": "100%",
		"bScrollCollapse": true,
		"bProcessing": true,
		"bPaginate": false,
		"bInfo": false,
		"bFilter": false,
		"bServerSide": true,
		"sServerMethod": 'POST',
        "sAjaxSource": 'GetJSONViewColumnValues?whatToGet=data',
        "fnInitComplete": function () {
            $("#tableData tr").contextMenu({
                menu : 'tableMenu'
            },
            function(action, el, pos) {
            	contextMenuCb(action, el, pos);
            });
        }
	});
	
	$("#tableData").dataTable();

	$(window).load(getColumns());


getColumns():
	$.post("GetJSONViewColumnValues?whatToGet=columns", function(data) {
		var numCols = data.numCols; // num of cols returned by servlet's json
		
		
		// try setting some/all of this with default fn
		// some table config
		data.bDestroy = true;
		data.bAutoWidth = true;
		
		// apply to the table
		$("#tableData").dataTable(data);
		
		// show the default column(s)
		hideShowColumns(numCols);
	}, "json");


hideShowColumns():
	var oTable = $("#tableData").dataTable();   // data tables object
	var selectedVals = $("#currentView").val(); // values in selection list
	
	// hide all columns
	if (numCols > 0) {
		for (var i = 0; i < numCols; i++) {
		   	oTable.fnSetColumnVis(i, false);
		}
	}
	
	// show column(s)
	$.each(selectedVals, function(index, value) {
		// remove leading zero-padding of two-digit value
		var unpadded = value.replace(/^0/g,"");
		
		oTable.fnSetColumnVis(unpadded, true);
	});
	
	// calculate column widths needed based on current data and redraw table
	oTable.fnAdjustColumnSizing();

Viewing all articles
Browse latest Browse all 1816

Trending Articles