Why does Select not activate on click when 'ajax' option is a function?

daveslab

EDIT: Alright, so I commented out the ajax parameter below and now it works. Any ideas why?

Hi folks,

I have a Datatables with Editor instance where Select is not triggering on click. I have verified this in the DOM as well by seeing that the classes are simply not applied to the rows. I am also sure, however, that I am not missing any dependencies because I created a second Datatables instance on the page (copied and pasted from one of the Select examples) and it works just fine. Any ideas what might not be working? Here is the code:

<table id="correspondances" class="display nowrap compact">
</table>

And:

var tableData = ...
var responseOptions = ...
var formeDonOptions = ...
var typeDonOptions = ...

var editor = new $.fn.dataTable.Editor( {
  table: "#correspondances",
  ajax: function ( method, url, data, success, error ) {
  // TODO implement
    console.log('method: ' + method + '\nurl: ' + url + '\ndata: ' + data + '\nsuccess: ' + success + '\nerror: ' + error);
  },
  fields: [
      { label: "Date Corresp:",  
        name: "date_correspondance",
        type: 'date'},
      { label: "Montant Don:",   
        name: "montant_don" },
      { label: "Forme Don:",   
        name: "forme_don",
        type: 'select',
        options: formeDonOptions
      },
      { label: "Type Don:",
        name: "type_don",
        type: 'select',
        options: typeDonOptions
      },
      { label: "Réponse:",
        name: "reponse",
        type: "select",
        options: responseOptions
      },
      { label: "Date Réponse:",   name: "date_response" },
      { label: "Reçu:",   name: "recu" },
      { label: "Archive:",   name: "archive" },
      { label: "Notes:",   name: "notes" },
      { label: "Date:",   name: "date" },
  ]

} );

var table = $('#correspondances').DataTable( {
  dom: "Bfrtip",
  paging: true,
  pageLength: 4, 
  lengthChange: false, 
  order: [[1, 'desc'],], 
  ordering: true, 
  searching: false,
  deferRender: true,
  autoWidth: false, 
  "ajax": function (data, callback, settings) { 
    console.log('data: ' + data + '\nsettings: ' + settings);
  },
  columns: [
    { title: "Base:", data: "base", name: "base", "width": "2.2rem", "className": "dt-center" },
    { title: "Date Corresp:", data: "date_correspondance", name: "date_correspondance", "width": "7.2rem", "className": "dt-center" },
    { title: "Montant Don:", data: "montant_don", name: "montant_don", "width": "5.6rem", "type": "num-fmt", "className": "dt-center" },
    { title: "Forme Don:", data: "forme_don", name: "forme_don", "width": "5.7rem", "className": "dt-center" },
    { title: "Type Don:", data: "type_don", name: "type_don", "width": "5.9rem", "className": "dt-center" },
    { title: "Réponse:", data: "reponse", name: "reponse", "width": "13.7rem", "className": "dt-center" },
    { title: "Date Réponse:", data: "date_response", name: "date_response", "width": "6.3rem", "className": "dt-center" },
    { title: "Reçu:", data: "recu", name: "recu", "className": "dt-center" },
    { title: "Archive:", data: "archive", name: "archive", "width": "5rem", "className": "dt-center" },
    { title: "Notes:", data: "notes", name: "notes", "width": '2.5rem', "className": "dt-center" },
    { title: "Date:", data: "date", name: "date", "className": "dt-center fsize-0p8" },
  ],
  select: true,
  buttons: [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
  ],
  data: tableData,
  initComplete: function(){
    console.log('finished!');
  }
} );

allan

Which Ajax parameter - in the DataTable or Editor? Either way, neither actually implement the ajax fetch of data (unless that has been edited out for brevity here?).

Are you able to link to a page that shows the issue so I can debug it please?

Allan

daveslab

Sorry, I realized my problem. I defined the ajax parameter unnecessarily for the table and I wasn't calling the success callback in the ajax parameter of the editor.