Datatables columns display incorrectly when using datatables ajax function

jtlindsey

Can anyone help with this question from stackoverflow? link

Here it is again for reference

Datatables columns display properly when using ajax url, but not when i use a function. Here is a example that works:

HTML with bootstrap

      <table cellspacing="0" class="table table-condensed table-hover table-striped table-bordered" id="accTransaction" width="100%">
      </table>

Sample data.json

    {"data":[["2016-08-26T23:12:14.930Z",null,"test1","Select","","deposit",null,0,"transaction_account_checking_2016-08-22T00:38:28.839Z_2016-08-26T23:12:14.946Z"]]}

DataTable that displays everything properly

      let table = $('#accTransaction').DataTable({
      dom: 'Bfrtip',
      "language": {
          "emptyTable":     "No Transactions Found"
      },
      "autoWidth": false,
      order: [[ 0, "desc" ]],
      "columns": [
        { "title": 'Date'/*, render: function ( data, type, row ) {return db.dateFormat(data);}*/},  
        { "title": 'Check#' },
        { "title": 'Payee'/*, render: function ( data, type, row ) {return db.textTruncate(data);}*/},
        { "title": 'Category'/*, render: function ( data, type, row ) {return db.textTruncate(data);}*/},
        { "title": 'Comment'/*, render: function ( data, type, row ) {return db.textTruncate(data);}*/},
        { "title": 'Type' },
        { "title": 'Amount' },
        { "title": 'Balance' },
        { "title": 'ID' }
      ],
      ajax: '../data.json', 
      deferRender:    true,
      scrollY:        '50vh',
      scrollCollapse: true,
      scroller:       true,
      buttons: [
        {
          extend: 'pdfHtml5',
          text: 'PDF filtered data',
          exportOptions: {
            columns: ':visible'
          }
        },
        'colvis',
        'copy', 
        'excel', 
        'csv',
        'pdf'
      ],
      columnDefs: [
        { width: '1%', targets: 0 },
        { width: '1%', targets: 1 },
        {
          targets: -1,// removes last column from original view
          visible: false
        }
      ],
      colReorder: true
    });

The following does not display the column headers properly.

      let table = $('#accTransaction').DataTable({
      dom: 'Bfrtip',
      "language": {
          "emptyTable":     "No Transactions Found"
      },
      "autoWidth": false,
      order: [[ 0, "desc" ]],
      "columns": [
        { "title": 'Date'/*, render: function ( data, type, row ) {return db.dateFormat(data);}*/},
        { "title": 'Check#' },
        { "title": 'Payee'/*, render: function ( data, type, row ) {return db.textTruncate(data);}*/},
        { "title": 'Category'/*, render: function ( data, type, row ) {return db.textTruncate(data);}*/},
        { "title": 'Comment'/*, render: function ( data, type, row ) {return db.textTruncate(data);}*/},
        { "title": 'Type' },
        { "title": 'Amount' },
        { "title": 'Balance' },
        { "title": 'ID' }
      ],
      ajax: function (data, callback, settings) {
        callback(
          {"data":[["2016-08-26T23:12:14.930Z",null,"test1","Select","","deposit",null,0,"transaction_account_checking_2016-08-22T00:38:28.839Z_2016-08-26T23:12:14.946Z"]]}
          ) 
      },
      deferRender:    true,
      scrollY:        '50vh',
      scrollCollapse: true,
      scroller:       true,
      buttons: [
        {
          extend: 'pdfHtml5',
          text: 'PDF filtered data',
          exportOptions: {
            columns: ':visible'
          }
        },
        'colvis',
        'copy', 
        'excel', 
        'csv',
        'pdf'
      ],
      columnDefs: [
        { width: '1%', targets: 0 },
        { width: '1%', targets: 1 },
        {
          targets: -1,// removes last column from original view
          visible: false
        }
      ],
      colReorder: true
    });

Pick

It looks like all my options are being put on the page but are no longer being attached to the data.

This is using the latest datatables 1.10.12 from here. I'm guessing i need to do something with settings, or data in ajax: function (data, callback, settings) { but I don't know what I am missing. I expected the headers to fall over the columns just like they did when I was getting the data from a file. There's not much information on using a function with datatables ajax. Can anyone see what I need to change to get the columns to display properly when using the function?

jtlindsey

I made a jsfiddle of both examples to post here and the jsfiddles worked correctly for both. So i revisited my app (an electron desktop app) and found the issue was caused by some conflicting css from the parent div the table was wrapped in.