DataTable and ajax json

by Benahmed Taoufiq

HTML

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<table id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
</table>

JavaScript

var json = {
  data: [
    /*{
        DT_RowId: 1,
        col1: "c1",
        col2: "c2",
        col3: "c3"
      }, {
        DT_RowId: 2,
        col1: "c1",
        col2: "c2",
        col3: "c3"
      }, {
        DT_RowId: 3,
        col1: "c1",
        col2: "c2",
        col3: "c3"
      }*/
  ]
};
var langueFr = {
  "sEmptyTable": "(Ton Message perso...)",
  "sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
  "sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
  "sInfoFiltered": "(filtré à partir de _MAX_ éléments au total)",
  "sInfoPostFix": "",
  "sInfoThousands": ",",
  "sLengthMenu": "Afficher _MENU_ éléments",
  "sLoadingRecords": "Chargement...",
  "sProcessing": "Traitement...",
  "sSearch": "Rechercher :",
  "sZeroRecords": "Aucun élément correspondant trouvé",
  "oPaginate": {
    "sFirst": "Premier",
    "sLast": "Dernier",
    "sNext": "Suivant",
    "sPrevious": "Précédent"
  },
  "oAria": {
    "sSortAscending": ": activer pour trier la colonne par ordre croissant",
    "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
  },
  "select": {
    "rows": {
      "_": "%d lignes sélectionnées",
      "0": "Aucune ligne sélectionnée",
      "1": "1 ligne sélectionnée"
    }
  }
};
$("#table").DataTable({
  searching: false,
  responsive: true,
  processing: true,
  paging: false,
  ajax: {
    url: "/echo/json/",
    method: 'post',
    data: {
      json: JSON.stringify(json)
    }

  },
  columns: [{
      "data": "DT_RowId"
    },
    {
      "data": "col1"
    },
    {
      "data": "col2"
    },
    {
      "data": "col3"
    }
  ],
  columnDefs: [{
      "width": "10%",
      "targets": 0
    },
    {
      "width": "30%",
      "targets": 1
    },
    {
      "width": "30%",
      "targets": 2
    },
    {
      "width": "30%",
      "targets": 3
    }
  ],
  language: langueFr
  /*{
      url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/French.json"
   ...