$(document).ready(function() {

  // call fetchData function

  fetchData();

​

  // function to fetch data from database

 //(VERSION to avoid php and the mysql query)

  function fetchData() {

    $.ajax({

      url: '/ajax/arrays.txt',

      dataType: "json",

      success: function(response) {

        table.clear().draw();

        table.rows.add( response.data ).draw();

        table.searchPanes.rebuildPane();

      }

    })

  }

​

  // function to fetch data from database

  //(VERSION OF MY PROJECT CALLING PHP -> DB REQUEST)

  /*

  function fetchData() {

    $.ajax({

      url: "server.php?action=fetchData",

      type: "POST",

      dataType: "json",

      success: function(response) {

        var data = response.data;

        table.clear().draw();

        $.each(data, function(index, value) {

          table.row.add([

            value.id,

            value.first_name,

            value.last_name,

            '<img src="uploads/' + value.image + '" style="width:40px; height:40px; border:1px solid gray; border-radius:5px; object-fit:cover">',

            value.email,

            value.country,

            value.gender,

            '<Button type="button" class="btn btn-primary btn-sm editBtn" value="' + value.id + '"><i class="fa-solid fa-pen-to-square"></i></Button>' +

            '<Button type="button" class="btn btn-danger btn-sm deleteBtn" value="' + value.id + '"><i class="fa-solid fa-trash"></i></Button>' +

            '<input type="hidden" class="delete_image" value="' + value.image + '">'

          ]).draw(false);

        })

      }

    })

  }

*/

  //Fonction nécessaire aux datatables pour Masquer les en-têtes des colonnes masquées

  function hideSearchInputs(columns) {

    for (i=0; i<columns.length; i++) {

        if (columns[i]) {

            $('.filters th:eq(' + i + ')' ).show();

        } else {

            $('.filters th:eq(' + i + ')' ).hide();

        }

    }

  }

​

  //initialize datatables

  $('#myTable thead tr').clone(true).addClass('filters').appendTo( '#myTable thead' );

  var table = new DataTable('#myTable', {

    //ajax: '/ajax/arrays.txt',

    orderCellsTop: true,

      fixedHeader: {

          headerOffset: 0

      },

      language: {

          url: "https://cdn.datatables.net/plug-ins/2.0.1/i18n/fr-FR.json",

          buttons: {

              'copy': '<i class="fa-solid fa-copy"></i> Copier',

              'print': '<i class="fa-solid fa-print"></i> Imprimer',

              'excel': '<i class="fa-solid fa-file-excel"></i> Excel',

              'pdf': '<i class="fa-solid fa-file-pdf"></i> PDF',

              'colvis': 'Visibilité des colonnes'

          },

          searchPanes: {

              collapseMessage: 'Masquer',

              showMessage: 'Montrer',

              clearMessage: 'Effacer les filtres',

              title: {

                  "_": "%d filtres sélectionnés",

                  "0": "Aucun filtre en cours",

                  "1": "1 filtre sélectionné",

              }

          },

      },

      paging: true,

      lengthChange: false,

      searching: true,

      ordering: true,

      autoWidth: false,

      responsive: true, // to hide detail rows whith class="none"

      //stateSave: false,

      //stateDuration: 0,

      //select: {

      //    style: 'single' //api, single, multi, os, multi+shift

      //},

      layout: {

          top1Start: {

              buttons: [

                  { text: '<i class="fa-solid fa-user-plus fa-xs"></i> Add new user',attr: {

                    'id': 'dtBtnoffcanvasAddUser',

                    'data-bs-toggle' : 'offcanvas',

                    'data-bs-target' : '#offcanvasAddUser',

                     },

​

                  },

                  { text: '<i class="fa-solid fa-caret-down"></i> Show details', attr: { id: 'dtBtnShowChildren' },

                    action: function ( e, dt, node, config ) {

                      dt.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');

                    }

                  },

                  { text: '<i class="fa-solid fa-caret-right"></i> Hide details', attr: { id: 'dtBtnHideChildren' },

                    action: function ( e, dt, node, config ) {

                      dt.rows('.parent').nodes().to$().find('td:first-child').trigger('click');

                    }

                  },

                  "copy",

                  //"print",

                  //"excel",

                  //"pdf",

                  //",colvis" 

                  { text: '<i class="fa-solid fa-file-export"></i> Exporter',

                      split: [ 'excel'/*, 'pdf' */],

                      fade: 100,

                      background:false

                  },

                  {

                      text: 'Filtres',

                      className: 'spToggle showPanes',

                      action: function (e, dt, node, config) {

                         dt.searchPanes.container().find('.dtsp-searchPanes').slideToggle(200, function () {

                            $('.spToggle').toggleClass('showPanes', $(this).is(':visible'));

                         });

                      },

                  },

                  { text: '<i class="fa-solid fa-trash"></i> Clear search', attr: { id: 'dtBtnClearGlobalSearch' }}

              ],

          },

          top1End: {

              search: {

                  placeholder: 'Recherche globale'

              }

          },

          topEnd: null,

          top: {

              searchPanes: {

                  filterChanged: function (count) {

                      $('.spToggle').text(this.i18n('searchPanes.collapse', {0: 'Filtres (0)', _: 'Filtres (%d)'}, count));

                  },

                  collapse: false, // collapse/expand all buttons of SearchPanes 

                  clear: true, // clear all button of SearchPanes

                  //initCollapsed: true

                  //layout: 'columns-6' // by default is auto, else use columns-x

                  //cascadePanes: true,

              }

          },

          bottomEnd: {

              paging: {

                  numbers: 10

              }

          },

      },

      columnDefs: [

          {

              searchPanes: {

                  show: true,

                  dtOpts: {

                      select:{

                        style: 'multi+shift'

                      },

                      //paging: false,

                      //pagingType: 'numbers',

                      searching: true,

                  }

              },

              targets: [0, 1, 2],

          }

      ],

      initComplete: function () {

          var api = this.api();

​

          // COLUMN FILTERS INTO HEADERS

          // For each column, add a input search filter

          api.columns([2, 3, 4]).eq(0).each(function(colIdx) {

              // Set the header cell to contain the input element

              var cell = $('.filters th').eq($(api.column(colIdx).header()).index());

              var title = $(cell).text();

              $(cell).html( '<input type="text" placeholder="Rechercher" />' );

              // On every keypress in this input

              $('input', $('.filters th').eq($(api.column(colIdx).header()).index()) )

                  .off('keyup change')

                  .on('keyup change', function (e) {

                      e.stopPropagation();

                      // Get the search value

                      $(this).attr('title', $(this).val());

                      var regexr = '({search})'; //$(this).parents('th').find('select').val();

                      var cursorPosition = this.selectionStart;

                      // Search the column for that value

                      api

                          .column(colIdx)

                          .search((this.value !== "") ? regexr.replace('{search}', '((('+this.value+')))') : "", this.value !== "", this.value === "")

                          .draw();

                      $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);

                  });

          });

          // For each column, add a select filter

          api.columns([0, 1]).eq(0).each(function(colIdx) {

              // Set the header cell to contain the select element

              var cell = $('.filters th').eq($(api.column(colIdx).header()).index());

              var title = $(cell).text();

              $(cell).html( '<select><option value=""</option></select>' );

​

              // On every select action

              //var column = this;

              var column = api.column(colIdx);

              var select = $('<select><option value=""</option></select>')

                //.appendTo($(column.header()).empty())

                .appendTo($(cell).empty())

                .on('change', function() {

                  var val = $.fn.dataTable.util.escapeRegex(

                    $(this).val()

                  );

                  column

                    .search(val ? '^' + val + '$' : '', true, false)

                    .draw();

                });

              column.data().unique().sort().each(function(d, j) {

                select.append('<option value="' + d + '">' + d + '</option>');

              });

          });

​

          // Hide the cloned header of hidded columns

          hideSearchInputs( api.columns().responsiveHidden().toArray() );

​

          // Style SearchPanes class

          $('div.dt-scroll-body table.dataTable', this.api().searchPanes.container()).addClass('responsive stripe nowrap hover row-border compact');

​

          // Handle click on "Show details" button

          $('#dtBtnShowChildren').on('click', function(){

              // Expand row details

              table.rows(':not(.dt-hasChild)').nodes().to$().find('td:first-child').trigger('click');

          });

          // Handle click on "Hide details" button

          $('#dtBtnHideChildren').on('click', function(){

              // Collapse row details

              table.rows('.dt-hasChild').nodes().to$().find('td:first-child').trigger('click');

          });

​

          // Clear All searches by a click on button

          $('#dtBtnClearGlobalSearch').on('click', function() {

              // Clear table search

              table.search('').columns().search('').draw();

              // Clear columns input filters (into each header)

              table.columns().eq(0).each(function(colIdx) {

                  var cell = $('.filters th').eq($(api.column(colIdx).header()).index());

                  $(cell).find('input').val('');

              });

              // Clear columns select filters (into each header)

              table.columns().eq(0).each(function(colIdx) {

                  var cell = $('.filters th').eq($(api.column(colIdx).header()).index());

                  $('select', cell).val('');

                  });

              // Clear SearchPanes selection

              table.searchPanes.clearSelections();

              //Hide SearchPanes

              //table.searchPanes.container().find('.dtsp-searchPanes').css('display','none');

          });

​

          // Hide the "Clear All" button of SearchPanes, Hide to conserve individual clear button of each pane

          $('.dtsp-clearAll').hide();

          //Hide SearchPanes on initialization (collapsed before to be expand by button)

          table.searchPanes.container().find('.dtsp-searchPanes').css('display','none');

          //Hide SearchPanes title ("X filters active")

          table.searchPanes.container().find('.dtsp-title').css('display','none');

      }

​

  });

​

​

​

});