Empty space after second table load.

Empty space after second table load.

88mpg88mpg Posts: 3Questions: 0Answers: 0
edited December 2013 in DataTables 1.9
I'm trying to serve some JSON data using multiple JSON files with Datatables. I want one of my columns to remain hidden but searchable. Everything seems to be fine until I click on a second table to load. When I do, an extra white space will appear to the right of my columns. At first I thought it was loading the hidden column, but it seems it's just adding empty space. When I click a column header to sort data, the columns will go back to normal.

Page in question (dev): http://rmin.us
Debugger: http://debug.datatables.net/ejimuj

1. Click a link from the header.
2. Click a second link from the header (note the white space on the right).
3. Click a column header (the white space will disappear).

Here is my JS. I'm nowhere near fluent in JS or JQuery so I'm sure I've done something wrong:

[code]
var $tableView = $('.table-view');
$('.show').on('click', function(event) {
var $target = $(event.target);
var name = $target.data('name');
$.ajax(name + '.json').fail(function() {
alert('error');
}).done(function(data) {
data = $.parseJSON(data);
var attacks = data.FrameData[0];
var rowTemplate = '{{#attacks}}{{ Command }} {{ Orientation }} {{ Damage }} {{ Frames }} {{ On Block }} {{ On Hit }} {{ CH }} {{ Notes }} {{/attacks}}';
$tableView.find('.table-view-body').html(Mustache.render(rowTemplate, attacks));
$tableView.show();
$('#framedata').dataTable( {
"bPaginate": false,
"bRetrieve": true,
"oLanguage": { "sSearch": "" },
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [7]}
],
"bSortCellsTop": true,
}).columnFilter({sPlaceHolder:"head:after"});
$('.dataTables_filter input').attr("placeholder", "Type here to filter your frame data! If Feng try \"punish\", \"bound\", \"launch\". More to come.");
$('.dataTables_filter input').addClass('search');
$('div.dataTables_filter input').focus();
// var oTable = $('#framedata').dataTable();
// new FixedHeader( oTable, {"offsetTop": 110} );
});
});
var processJson = function (json) {
var obj = json;
console.log(obj);
var attacks = obj.FrameData[0].attacks;
var attacksLength = attacks.length;
for (var i = 0; i < attacksLength; i++) {
// Make sure we clear the html for each new row
var html = '';
html = '';
// Loop through each property for an attack
for (var property in attacks[i]) {
if (attacks[i].hasOwnProperty(property)) {
html += '';
// Access the property via array syntax as dot notation doesn't work with variables
html += attacks[i][property];
html += '';
}
}
html += '';
$('.data-table > tbody:last').append(html);
}};
[/code]
This discussion has been closed.