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 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
– mmushtaq, Commented Jun 28, 2018 at 7:10

Ivan-San · Accepted Answer · 2018-06-27 19:48:03Z

2

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, 2018 at 19:48

answered Jun 27, 2018 at 18:34

Ivan-San

8531 gold badge7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Roger Dodger Over a year ago

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.

Ivan-San Over a year ago

Are you using bootstrap?

Roger Dodger Over a year ago

Yes - using bootstrap 4.

Ivan-San Over a year ago

Try following the responsive-tables style for bootstrap 4. <div class="table-responsive"> <table class="table"> ... </table> </div>

Ivan-San Over a year ago

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

|

toha · Accepted Answer · 2022-04-11 13:39:30Z

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

Abd-ElRhman El Shorbagii · Accepted Answer · 2022-06-28 12:53:27Z

0

just add this class to all header tags

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

answered Jun 28, 2022 at 12:53

Abd-ElRhman El Shorbagii

33 bronze badges

Collectives™ on Stack Overflow

jQuery DataTables plugin not displaying all the columns specified

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related