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:
getColumns():
hideShowColumns():
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();