Answers

• Dalex73 Posts: 30Questions: 4Answers: 4

  November 2017

  Use the render function for the columns and a null value for the first data value.

  https://datatables.net/reference/option/columns.render
• Joyrex Posts: 92Questions: 14Answers: 3

  November 2017

  @Dalex73 - I tried your suggestion, but putting a NULL in columns causes the JSON data from all the columns to display in the NULL column, with the responsive controls inside the column as well.

  Here's my DataTables markup:

  table = $('#DocLog').on('init.dt', function (e, settings, json) {
                      var api = new $.fn.dataTable.Api(settings);
                      $("a", api.buttons('.btn-primary').nodes().attr({'data-inform':'tooltip'}));
                  }).DataTable( {
          dom: "<'row'<'col-sm-7'B><'col-sm-5'f>>"+"<'row'<'col-sm-12'tr>>"+"<'row'<'col-sm-5'i><'col-sm-7'p>>",
          responsive: {
              details: {
                  type: 'column'
              }
          },
          processing: true,
          serverSide: true,
          ajax: "../modal/docLog_Query.cfm",
          columns: [
              {data: null},
              {data: 3,render: $.fn.dataTable.render.moment('YYYY-MM-DD HH:mm:ss:SSS','DD MMM YYYY hh:mm:ss.SSS a')},
              {data: 8},
              {data: 6},
              {data: 4},
              {data: 5},
              {data: 9}
          ],
          columnDefs: [ {
              className: "control",
              orderable: false,
              searchable: false,
              width: "20px",
              targets: 0
          } ],
          buttons: [ {
              extend: 'pageLength',
              className: 'btn-primary',
              titleAttr: 'Change the number of rows displayed'
          } ],
          lengthMenu: [ [10, 25, 50, -1], ["10 Records", "25 Records", "50 Records", "All Records"] ],
          language: {
              buttons: {
                  pageLength: {'-1': 'All Records', _: '<span class="d-none d-lg-inline">Display</span> %d Records'}
              },
              search: "",
              zeroRecords: "There are no file history records."
          },
          order: []
      } );
  

  In my HTML markup, I have provided an empty <th></th> and in my <tfoot> I specify the colspan to be 7, so display-wise my table is semantically correct.
• Joyrex Posts: 92Questions: 14Answers: 3

  November 2017

  I also tried defining all my columns using columnDefs and got the same result.
• Joyrex Posts: 92Questions: 14Answers: 3

  November 2017

  Success! I figured out adding defaultContent: "" to the target 0 column (the one used for the responsive button) keeps the JSON data from appearing.

  So, for anyone else who has this issue (cleaned up a bit and removed my custom:

                 responsive: {
              details: {
                  type: 'column'
              }
          },
          processing: true,
          serverSide: true,
          ajax: "path/to/your/ajax/script",
          columnDefs: [ {
              className: "control",
              data: null, //this is so your JSON AJAX data doesn't load
              defaultContent: "", //this keeps the JSON AJAX data from appearing
              orderable: false,
              searchable: false,
              width: "20px",
              targets: 0
          },{
              targets: 1,
              data: 3 //these could be a number or the column name from the JSON data
          },{
              targets: 2,
              data: 8
          },{
              targets: 3,
              data: 6
          },{
              targets: 4,
              data: 4
          },{
              targets: 5,
              data: 5
          },{
              targets: 6,
              data: 9
          } ]
  

  Make sure your HTML markup has an empty <th></th> for target 0 (the responsive control column), and if using a footer, make sure the number of columns matches or the colspan equals the number of columns, including the hidden responsive column (in this case target 0).