Answers

• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 18

  The option is columns.className with an upper case N.

  Kevin
• arnorbld Posts: 123Questions: 23Answers: 1

  July 18

  Hi guys,

  I spotted it! Case sensitive<g> classname is not the same as className! Got it working. But I am curious about why the columns: dtColumns doesn't work.
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 18 edited July 18

  This doesn't work at all.

  Waht exactly doesn't work. Do you get errors in the browser's console? Looks like it should work. I copied your code into this test case and it works:
  https://live.datatables.net/laderexi/1/edit

  Maybe you can update the test case to show the issue.

  Kevin
• arnorbld Posts: 123Questions: 23Answers: 1

  July 18

  Hi Kevin,

  I will need to investigate some more - I just realized I get a SQL error if I use the dtColumn, which I do not when I do not use it.

  Something about the SORT order is not coming over correctly into the PHP AJAX script and it's not picking it up so I end up with ORDER BY ASC instead of ORDER BY inv_number ASC. So something isn't quite kosher. Let me dig into it some more and I'll let you know. Must be something simple!

  Thanks for your quick response on this!!!

  Best regards,
  Arnor
• allan Posts: 63,516Questions: 1Answers: 10,473 Site admin

  July 18

  It should make no difference if you use columns: dtColumns or columns: [...] assuming that dtColumns is the array for the columns.

  If there is a difference, it might be another typo. Failing that, we'd need a link to a test case showing the issue.

  Allan
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 18

  There should be no difference in using a variable or not as long as the config is the same. Either way its just a Javascript object

  Let us know what you find or use the browser's network inspector and post the sent parameters and received JSON response. Maybe post both the working and non-working so we can compare.

  Kevin
• arnorbld Posts: 123Questions: 23Answers: 1

  July 18

  Hi Kevin,

  So I dumped the POST in PHP and compared the one when I used columns: dtColumns and inline column declaration. There is a difference and it doesn't make much sense to me:
  

  Somehow the "data" and "name" information is replaced with a counter for the "data" and a blank string for the "name" No idea why...

  Not a big deal, but I generate the HTML table via PHP methods and since I have all the data before setting up the DataTable I figured I could just create a JS object from PHP. As far as I can tell it's 100% identical so I'm not sure why it is not getting the name and data in there correctly.

  I just took the "generated" dtColumns and compared with the "inline" columns and they are 100% identical. Still produces a blank name and a column ordinal number for the data.

  I'm on DT 1.10 - don't know if that would make any difference.

  Best regards,
  Arnor
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 18 edited July 18

  but I generate the HTML table via PHP methods and since I have all the data before setting up the DataTable I figured I could just create a JS object from PHP.

  It sounds like you have ajax and serverSide enabled. But you are populating the HTML table with the rows before Datatables initializes.

  EDIT: Possibly you are using option deferLoading?

  I could just create a JS object from PHP

  I don't use PHP so I'm not sure how this is done.

  Please post your full Datatables init code and confirm if you are first populating the HTML table with the row data. And if so why you are using server side processing.

  Here is another test case that simulates my understanding of what you have:
  https://live.datatables.net/yaroyala/31/edit

  It starts with HTMl table data then uses server side processing to fetch the row data. It does work as expected. Can you update it to replicate the issue? Or possibly a link to your page?

  Kevin
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 18

  There is a difference and it doesn't make much sense to me:

  Basically the right side is what the columns would look like using arrays. The columns.data will point to the array index, like 0, for the first column. We will need to see an example of the issue to help debug why columns: dtColumns, doesn't work in your solution. Seems like it might not be defined at the time Datatables is initialized.

  Kevin
• arnorbld Posts: 123Questions: 23Answers: 1

  July 18

  Hi Kevin,

  All our DT are server side, all loaded with SQL through PHP. Notjhing is populated in the HTML table. I create the HTML table, then data is loaded from a web service using AJAX and when that is successful the DT object is created. Using

  console.table(dtColumns)
  

  right before the DataTable is created, shows:
  
  So it is definitely loaded before creating the DT object.

  This is the init code:

  function setupListTable()
  {
      console.log('setupListTable');
      jQuery('#vendorlistContainerDiv').removeClass('dt-display-none');
      if(listTable !== undefined){
          listTable.destroy();
      }
      var phpData = null;
      //console.table(dtColumns)
      listTable = jQuery(listTableHtmlID)
          .DataTable({
              responsive: true,
              paging: true,
              pageLength: 10,
              "processing": true,
              "serverSide": true,
              "ajax": {
                  "url": DataAjaxURL,
                  "type": "POST",
                  "data": function (d) {
                      console.log('DT before calling AJAX');
                      return jQuery.extend({}, d, {
                          "action" : listAction,      // ***   Set in DataTables section   ***
                          "showresult" : false
                      });
                  },
                  "error": function (xhr, error, code) {
                      console.log('AJAX error handler');
                      console.log('  Error Response setupListTable: ');
                      console.log(xhr.responseText);
                      var resp = xhr.responseText;
                  },
                  "dataSrc": function (json) {
                      var sql = json.extraData;
                      return json.data; 
                  }
              },
              aLengthMenu: [
                  [10, 25, 30, 50, 100, 200, -1],
                  [10, 25, 30, 50, 100, 200, "All"]
              ],
              order: [[0,'asc']],
              "columnDefs": [ {
                  "targets": -1,
                  "orderable": false,
                  "searchable" : false,
                  "data": null
              }
              ],
              columms: dtColumns,
  /*
              columns: [
                  {data: "inv_number",          className: "row-inv_number",                    name: "inv_number",          orderable : true },
                  {data: "inv_date",            className: "row-inv_date text-end",             name: "inv_date",            orderable : true },
                  {data: "inv_description",     className: "row-inv_description",               name: "inv_description",     orderable : true },
                  {data: "job_address",         className: "row-job_address",                   name: "job_address",         orderable : true },
                  {data: "inv_amount",          className: "row-inv_amount text-end",           name: "inv_amount",          orderable : true },
                  {data: "inv_duedate",         className: "row-inv_duedate text-end",          name: "inv_duedate",         orderable : true },
                  {data: "paid_amt_paid",       className: "row-paid_amt_paid text-end",        name: "paid_amt_paid",       orderable : true },
                  {data: "paid_payment_date",   className: "row-paid_payment_date text-end",    name: "paid_payment_date",   orderable : true },
                  {data: "paid_check_num",      className: "row-paid_check_num",                name: "paid_check_num",      orderable : true },
                  {data: "paid_net_due",        className: "row-paid_net_due text-end",         name: "paid_net_due",        orderable : true },
                  {data: "actions",             className: "row-rowactionbuttons",              name: "actions",             orderable : false}
              ],
  
  
  */
  
              initComplete: function() {
                  console.log('initComplete');
                  if (showFilters === true) {
                      this.api()
                          .columns()
                          .every(function () {
                              var that = this;
                              $('input', this.footer()).on('keyup change clear', function () {
                                  if (that.search() !== this.value) {
                                      that.search(this.value).draw();
                                      listTable.ajax.reload();
                                  }
                              });
                          });
                  }
              },
  
              drawCallback: function(settings){
                  jQuery('#' . containerDivID).removeClass('dt-display-none');
  
              }
          });  //  jQuery(#clientlist-table)...
      //    todoTable = jQuery('#clientlist-table')
  }  // setupDataTable()
  

  I will try to update the demo and see if I can make it fail.
  The problem is definitely that the AJAX call is not sending the data correctly to PHP so it can't parse out the data/names to construct the proper query.

  Best regards,
  Arnor
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 18 edited July 19

  console.table(dtColumns)

  Sometimes console.log can be deceiving if the value changes just after the console.log. The output might show the changed value instead of the value when console.log was executed. The reason is in the console it uses a reference to the object not a copy. Try this instead on line 9:

  console.log( JSON.stringify(dtColumns) )
  

  Or place a breakpoint on line 10 to see the value.

  Otherwise we will need to see the issue to debug.

  Kevin