JSFiddle - React, Tailwind, and code Playground

by Benahmed Taoufiq

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<div id="collapseetudiants">
  <div class="row" style="margin:0;">
    <div class="table-responsive">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <table id="datatable_etudiants" class="table table-striped table-bordered" style="width:100%">
          <thead>
            <tr>
              <th></th>
              <th class="all">Nom</th>
              <th class="desktop">Prenom</th>
              <th class="desktop">Adresse</th>
              <th class="desktop">ville</th>
              <th class="desktop">IdVille</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
        <span class="text-right col-lg-12 col-md-12 col-sm-12 col-xs-12">Retour en haut</span>
      </div>
    </div>
  </div>
</div>

CSS

#datatable_etudiants th,#datatable_etudiants td{text-align:center}

JavaScript

var data = [{
    "nom": "dupond",
    "prenom": "Thierry",
    "adresse": "2 rue edmond beliot",
    "ville": "lyon",
    "idVille": "123"
  },

  {
    "nom": "reger",
    "prenom": "Thomas",
    "adresse": "9 rue amandine Ross",
    "ville": "Belfort",
    "idVille": "124"
  }
];

function init_datatables() {
  datatable_etudiants = $('#datatable_etudiants').DataTable({
    searching: false,
    responsive: true,
    processing: true,
    paging: false,
    data: data,
    columnDefs: [{
        width: "2%",
        data: null,
        targets: 0,
        defaultContent: '',
        orderable: false,
        searchable: false
      },
      {
        width: "15%",
        targets: 1,
        data: "nom"
      },
      {
        width: "15%",
        targets: 2,
        data: "prenom"
      },
      {
        width: "15%",
        targets: 3,
        data: "adresse"
      },
      {
        width: "15%",
        targets: 4,
        data: "ville"
      },
      {
        width: "15%",
        targets: 5,
        data: null,
        render: function(data, type, row, meta) {
          /**/
          console.log('data :', data,
            ", type :", type, ", row :", row, ", meta :", meta);
          return type==="display"? '<a href="monLien/?idVille=' +
            row.idVille +
            '">Localiser ma ville</a>':"";
        }
      }
    ],
    language: {
      /* url: "https://cdn/js/datatables/1.10.16/french.json",
       emptyTable: "Chargement des donnée en cours, veuillez patienter ..."*/
    }
  });
  new $.fn.dataTable.FixedHeader(datatable_etudiants, {});
}
init_datatables();
/*function update_students(){
          
            $.get("myActionController1",{},function(data){
                datatable_etudiants.clear();
                $.each(data.students,function(i,student){
                       $.when($.get("myActionController2/" + student.idStudent,{},function(d){
                          (data.students[i]).news = d;
                      ...