jQuery DataTables plugin not displaying all the columns specified

Question

I'm using the jQuery plugin DataTables to display data in a .cfm (ColdFusion) page. Everything works except DataTables auto-truncates the columns (currently displays only 5 of my columns) and automatically creates a plus (+) button next to the value in the first column, that upon clicking, turns into a minus sign and the remaining columns are displayed below the current row!

I checked the DataTables documentation but it's really confusing and after trying (more like winging it) a few ways suggested on there, I'm stuck. How do I display all the columns in the table rather than letting DataTables control the number of columns visible and number of columns hidden?

My html table is as follows:

<table id="idsTbl" class="table table-striped table-bordered" cellspacing="0" 
width="100%">
        <thead>
          
          <tr>
            <th>PRIMARY/FIRST ID</th>
            <th>SECOND ID</th>
            <th>PUBLISHING CO TYPE</th>
            <th>PUBLISHING COMPANY NAME</th>
            <th>PUBLISHING STATE</th>
            <th>PUBLISHING DATE</th>
            <th>PUB CREATED DATE</th>
            <th>OTHER DATE</th>
            <th>USER CREDENTIALS</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
             <th>PRIMARY/FIRST ID</th>
            <th>SECOND ID</th>
            <th>PUBLISHING CO TYPE</th>
            <th>PUBLISHING COMPANY NAME</th>
            <th>PUBLISHING STATE</th>
            <th>PUBLISHING DATE</th>
            <th>PUB CREATED DATE</th>
            <th>OTHER DATE</th>
            <th>USER CREDENTIALS</th>
          </tr>
        </tfoot>
        <tbody>
        </tbody>
      </table>

The javascript for the DataTables plugin is as follows:

    $(document).ready(function () {

 $.ajax({
    type: "GET",
    url: "https://xxx.xxxxxx.xxxx.xx.php?method=ids",
    dataType: "json",
    cache: false,
    success: function (response) {
        if (response.length != 0) {
            //Footer section search capability
            $('#idsTbl tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="' + title + '" 
  />');
            });
            // /Footer section search capability
 var returnedIds = $("#idsTbl").DataTable({
                data: response,
                columns: [{
                        data: 'ID',
                       
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            var linkedId = '<a data-toggle="modal" data- target="#myModal" data-backdrop="static" data-keyboard="false" href="#myModal" data-action="upd" data-id="' + oData.ID + '">' + oData.ID + '</a>';

                            $(nTd).html(linkedId );
                        }
                    },
                    {
                        data: 'ID2'
                    },
                    {
                        data: 'TYPE'
                    },
                    {
                        data: 'NAME'
                    },
                    {
                        data: 'CO_NAME'
                    },
                    {
                        data: 'STATE'
                    },
                    {
                        data: 'PUB_DATE' 
                    },
                    {
                        data: 'MADE_DT',
                        "defaultContent": "N/A"
                    },
                    {
                        data: 'USER_ID',
                        "defaultContent": "N/A"
                    },
                ],
                responsive: true,
                order: [0, 'asc'] 
            });

            // Apply the footer search
            idsTbl.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
            // /Apply the footer search

        } else {
            console.log("There was no response from server!");
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("An Ajax server error was returned");
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
    }
 });
 });

Note: Currently the table cuts off at 'PUBLISHING STATE', with 'PUBLISHING DATE' and the ones after it being displayed in an expandable section that is shown upon clicking a plus(+) sign next to the data in the first column. Also, if I change the responsive: true to responsive: false option, all the columns are displayed. BUT I don't want to lose the responsive nature of my webpage in order to display all the columns. Please suggest a viable solution.

Please look at this [DataTable responsive display certain columns](https://stackoverflow.com/a/43274199/3814721) which lets you decide which column(s) you want to display always and hide columns and show them when datatable is in responsive state. You just need to apply `class controls` at `th` of table. — mmushtaq, Jun 28 '18 at 07:10

Ivan-San · Answer 1 · 2018-06-27T19:48:03.153

1

You need to remove or set to false the property of responsive in your configurations.
Jquery Datatables Responsive Documentation

Responsive:false

Following this concept for BS4:

<div class="table-responsive"> <table class="table"> ... </table> </div>

Responsive Tables BS4

edited Jun 27 '18 at 19:48

answered Jun 27 '18 at 18:34

Ivan-San

771
1
5
22

I stated that in my note - that I don't want to do that since that would mean losing responsiveness of my webpage; I'm looking for a way to do it without removing responsiveness. – Roger Dodger Jun 27 '18 at 19:21
Are you using bootstrap? – Ivan-San Jun 27 '18 at 19:41
Yes - using bootstrap 4. – Roger Dodger Jun 27 '18 at 19:42
1

Try following the [responsive-tables](https://getbootstrap.com/docs/4.0/content/tables/#responsive-tables) style for bootstrap 4. `
...

` – Ivan-San Jun 27 '18 at 19:45
Tried that but didn't make it responsive (upon resizing window to phone size, page was not responsive). This is what I added to my existing html:
........
– Roger Dodger Jun 27 '18 at 19:51
1

If you add the table-responsive class to the table tag? The only solutions I can think for now it's to put in the style property the overflow: scroll, to make it can scroll in smaller views – Ivan-San Jun 27 '18 at 19:56

score 1 · Answer 2 · answered Apr 11 '22 at 13:39

When you don't assign a class to a column, DataTables will automatically determine if a column should be shown or not. So if you want to force showing all columns on larger screen, you need to assign classes (desktop, min-desktop or all) to ALL columns.

To show all columns add all class like this:

<thead>
    <tr>
            <th class="all">PRIMARY/FIRST ID</th>
            <th class="all">SECOND ID</th>
            <th class="all">PUBLISHING CO TYPE</th>
            <th class="all">PUBLISHING COMPANY NAME</th>
            <th class="all">PUBLISHING STATE</th>
            <th class="all">PUBLISHING DATE</th>
            <th class="all">PUB CREATED DATE</th>
            <th class="all">OTHER DATE</th>
            <th class="all">USER CREDENTIALS</th>
    </tr>
</thead>

Check official documentation here

score 0 · Answer 3 · answered Jun 28 '22 at 12:53

0

just add this class to all header tags

<th class="all">...</th>

answered Jun 28 '22 at 12:53

Abd-ElRhman El Shorbagii

3
3

jQuery DataTables plugin not displaying all the columns specified

3 Answers3