Datatables always shows 1 Less column than in data source

RegencySoftware

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) : '';
                    }
                }
            ]
        });
    }

kthorngren

In your "Grid.png" the IP Address column is not shown but responsive is not invoked (no plus sign) either. Something besides Datatables must be hiding the column.

If I drop off one column from my data source and table,

Is this the IP Address column you remove or another?

Have you tried inspecting the thead to see if there is a style or class added to the column that hides it?

Can you post a link to your page or a test case show ing the issue so we can help debug.

I see that you have two sets of sorting arrows which indicates that you have conflicting CSS. You are probably loading both jquery.dataTables.min.css and dataTables.bootstrap.min.css. You should only have the dataTables.bootstrap.min.css. The easiest way to get the proper files is to use the Download Builder. Not saying this is causing the problem you are asking about.

Kevin

RegencySoftware

Kevin,

I appreciate your reply.

There are two PNGs. One full page view (that does not show the IP because it is not showing up). The other is a mobile view and shows the + sign and that one will show the IP. If you inspect the page you will see the IpAddress is there in the datatable.

Also if you look at the console the JSON data is being logged in the console too.

Here is a link https://nodes.cryptomarketspy.com/

Thank you

kthorngren

Thanks for the link. I placed a break point before Datatables is initialized and you can see the IP Address column is not displayed in just the plain HTML table:

Was able to track down the problem. Looks like the /data-tables/dataTables-override.css?v=ATY87GRC1KKnziJhR98so5O0Bwo6EVXb3DztfhYDXLI CSS has this which is hiding the column:

table th:nth-child(3), td:nth-child(3) {
    display: none;
}

Kevin

RegencySoftware

Kevin, I apologize for wasting your time on this issue. Thank you for your response.