I have searched this forum and stack and attempted many things but cannot come up with a solution.
I have 6 columns to display in a datatable. The datatable will show 5 of those 6 but never all 6.
If I drop off one column from my data source and table, the grid will then show 4 of 5, drop it down to 4 the grid will show 3 of 4. If make the screen small to show a responsive view and then fresh all the fields will show up on that resized view, but never on a full page. **It short the grid will Always Display 1 Less than what is in the source **(unless I use the sized down mobile view) see screen shots.
The page is more than wide enough for all columns to show. Any help would be appreciated.
![]()
loadDataTable: function (dataSet) {
var dataObject = JSON.parse(dataSet);
utils.log(dataObject);
rewardsDataTable = $('#masterNodeTable').DataTable({
"columnDefs": [
{ "width": "10px", "targets": 0 },
{ "width": "45px", "targets": 1 },
{ "width": "15px", "targets": 2 },
{ "width": "35px", "targets": 3 },
{ "width": "35px", "targets": 4 },
{ "width": "35px", "targets": 5 }
],
"data": dataObject,
"responsive": true,
"paging": true,
"lengthMenu": [[6, 10, 25, -1], [6, 10, 25, "All"]],
"pageLength": 6,
"columns": [
{ "data": "Rank" },
{ "data": "Payee" },
{ "data": "IpAddress" },
{ "data": "ActiveDays" },
{
"data": "CountryFlagUrl",
type: 'html',
render: function (data, type, row) {
return data ? '<img height="15px" width="15px" src="' + data + '"/>' + ' ' + row['CountryName'] + ', ' + row['RegionName'] : '';
}
},
{
data: 'LastSeenUnix',
type: 'html',
render: function (data, type, row) {
return data ? utils.formatUnixDate(data) : '';
}
}
]
});
}