DataTable customizing

1

There are many options that can be set for a DataTable, but I cannot find the ways to do this in Appstudio:

settings can only take some parameters, how should I input such an example which I copied

$(document).ready(function() {
     var table = $('.grid').DataTable({
         "columnDefs": [
             { "visible": false, "targets": 0 }
         ],
         "order": [[ 0, 'asc' ]],
         "stateSave": false,
 		"stateDuration": 60*60*24*365,
 		"displayLength": 100,
 		"sScrollX": "100%",
 		"dom": 'lfTrtip',
             "oPaginate": {
                     "sFirst":      "Premier",
                    "sPrevious":   "Précédent",
                     "sNext":       "Suivant",
                     "sLast":       "Dernier"
                                 }
      }
 } );
2

Are you working in BASIC or JavaScript?

If JavaScript, you can paste this code directly into your project.

If BASIC, surround it like this:

JavaScript
   <paste code here>
End JavaScript
3

Thank you but somewhat I cannot figure out where exactly I should put it in.
Would you mind to point out in the DataTable example where I should add such bit of code ?
I struggle with this as I tried in the updateTable function, in the loadTable one, as an other function which I call in the initComplete, but I never get the expected results…

Thanks for your help…

4

I would put it in Global Code.

5

I put this in Global in the DataTable example code declared as Javascript

NSB.MsgBox(“Essaye d’écrire”);
$(“#DataTable1”).DataTable( {
“language”: {
“lengthMenu”: “Affiche MENU éléments par page”,
“zeroRecords”: “Désolé pas de résultat”,
“info”: “Affiche page PAGE parmi PAGES”,
“infoEmpty”: “Pas d’enregistrement trouvé”,
“infoFiltered”: “(filtrés sur on total de MAX total enregistrements)”
}
}
);

and I get the following message

DataTables warning: table id=DataTable1 - Cannot reinitialise DataTable. For more information about this error, please see 3. Warning: Cannot reinitialise DataTable

and the Datatable doesn’t load

39

The page describes that a DataTable cannot be made twice, but none of the examples provided works, whether I try retrieve, destroy etc…I always get the same warning.

How is it possible to add this code at the right place, where the Datatable is first declared. ( This is what I was trying to do when putting the code in update or other functions…)

6

I’m not sure if this will help, but here’s a function I’ve used to completely remove a table (so it can be recreated). It’s in JavaScript.

    destroyTable(table) {
      if (!$.fn.DataTable.isDataTable(`#${table}`)) return;
      $(`#${table}`).DataTable().destroy(); // remove table
      $(`#${table}`).empty(); // this needs to be here - completely cleanup the table
      $(`#${table}`).off('click', 'td'); // need to kill event listener
    },
7

Thanks for the hint, but I’m still struggling with probably a more down the earth issue:
I’ve seen in previous discussions that despite options not being shown if the toolbox, they seemed to be accessible (If I’m right this was dealing with initComplete before release ??):
How is this done and where in the flow of creating the DataTable ?
There doesn’t seem to be an example on this…

8

I’ve managed to make use of this, and I progress in creating the new datatable through a script…:smile:

9

The settings for the table are kept in DataTable1.settings.

So, you could do this:

DataTables1.settings.searching = false
DataTables1.build()

This will turn off the search option and rebuild the table.

10

Thank you, but is there a way to define options that are not in the toolbox: eg “language” ?

in the datatable environment one has

$(“#idtable”).DataTable ( {
language : {
“sSearch”: “Rechercher :”,
“sLengthMenu”: “Afficher MENU éléments”,
“sInfo”: “Affichage de l’élément START à END sur TOTAL éléments”,
“sInfoEmpty”: “Affichage de l’élément 0 à 0 sur 0 élément”, }
});

is there a way to put it into settings ?

11

I would try this (JavaScript):

DataTables1.settings.language = {
  "sSearch": "Rechercher :",
  "sLengthMenu": "Afficher MENU éléments",
  "sInfo": "Affichage de l’élément START à END sur TOTAL éléments",
  "sInfoEmpty": "Affichage de l’élément 0 à 0 sur 0 élément",
};
12

It works, (some characters need adjusting).
I’m almost there.
Thank you very much :smile:

13

Thanks for the good news. I corrected the quote characters.