Untitled

{
    "sig1_re": [
      {
        "Ticket_RT": 716771,
        "Cable_de_renvoi": 45,
        "Longueur_de_ligne_(Selt)": 50,
        "Res_LigneCoupee": "short",
        "Ticket_fils": 152321,
        "Numero_ND": "",
        "Gamot_DateFermeture": "",
        "Difference_de_date": "",
        "Supprimer": "<a class='delete'><button>Delete</button></a>"
      },
      {
        "Ticket_RT": 716760,
        "Cable_de_renvoi": 45,
        "Longueur_de_ligne_(Selt)": 67,
        "Res_LigneCoupee": "open",
        "Ticket_fils": "",
        "Numero_ND": "",
        "Gamot_DateFermeture": "",
        "Difference_de_date": "",
        "Supprimer": "<a class='delete'><button>Delete</button></a>"
      }
    ],
    "bad_nd": [
      {
        "Ticket_RT": 716620,
        "Numero_ND": 236598741,
        "Supprimer": "<a class='delete'><button>Delete</button></a>"
      },
      {
        "Ticket_RT": 716577,
        "Numero_ND": 565231583,
        "Supprimer": "<a class='delete'><button>Delete</button></a>"
      }
    ]
  }

<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" type="text/css" href="css/dataTables/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/dataTables/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/dataTables/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/dataTables/responsive.dataTables.css"/>
    <link rel="stylesheet" type="text/css" href="css/dataTables/buttons.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrapSelect/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="css/bfm.css">

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container" style="width: 90%;">
      <div class="panel panel-danger" style="margin: 5px;">
          <div class="panel-heading">
            <h2 class="panel-title">
              <b>My Test</b>
            </h2>
          </div>
          <div class="panel-body">
            <div class="table-responsive">
              <table id="tableA" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0" width="100%">
                  <thead>
                      <tr>
                          <th>Ticket_RT</th>
                          <th>Cable_de_renvoi</th>
                          <th>Longueur_de_ligne_</th>
                          <th>Res_LigneCoupee</th>
                          <th>Ticket_fils RT</th>
                          <th>Gamot_DateFermeture</th>
                          <th>Numero_ND</th>
                          <th>Gamot_DateFermeture</th>
                          <th>Supprimer</th>
                      </tr>
                  </thead>
                  <tbody>
                  </tbody>
              </table>
              <br />
              <table id="tableB" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0" width="100%">
                  <thead>
                      <tr>
                          <th>Ticket_RT</th>
                          <th>Numero_ND</th>
                          <th>Supprimer</th>
                      </tr>
                  </thead>
                  <tbody>
                  </tbody>
              </table>
            </div>
          </div>
      </div>
    </div>

    <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/dataTables.bootstrap.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/dataTables.responsive.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/jszip.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/vfs_fonts.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/buttons.html5.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/dataTables/ellipsis.js"></script>

    <script type="text/javascript" charset="utf-8">

    $(document).ready( function () {

      var jsonData = {};
          $.ajax({
            url: "http://www.json-generator.com/api/json/get/bUHEbjuIoi?indent=2",
            async: false,
            dataType: 'json',
            success: function(data) {
              jsonData = data;
            }
          });

      console.log(jsonData);

      var hideFromExport = [1, 2, 3];

      var options = {
        responsive: true,
        bAutoWidth: true,
        dom: '<"top"lf>Bt<"bottom"pi><"clear">',
        scrollY: 400,
        scrollCollapse: true,
        jQueryUI: true,
        bProcessing: true,
        sScrollX: "70%",
        sScrollXInner: "100%",
        bScrollCollapse: true,
        bDestroy: true,
        searching: false,
        iDisplayLength: 25,
        buttons: [{
                extend: 'copyHtml5',
                exportOptions: {
                  columns: function(idx, data, node) {
                    var isVisible = table.column(idx).visible();
                    var isNotForExport = $.inArray(idx, hideFromExport) !== -1;
                    return isVisible && !isNotForExport ? true : false;
                  }
                }
              },
              'excelHtml5', 'csvHtml5', 'pdfHtml5'
        ],
        language: {
            url: "json/French.json",
            buttons: {
                copy: 'Copier Tickets',
                copyTitle: 'Ajouté au presse-papiers',
                copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
                copySuccess: {
                    _: 'Copiés %d rangs',
                    1: 'Copié 1 rang'
                }
            }
        }
      };

      function initialize(jsonData) {
           /* --- TableA INIT --- */
           options.aaData  = jsonData.sig1_re;
           options.aoColumns = [
                { "mData": "Ticket_RT" },
                { "mData": "Cable_de_renvoi" },
                { "mData": "Longueur_de_ligne_(Selt)" },
                { "mData": "Res_LigneCoupee" },
                { "mData": "Ticket_fils" },
                { "mData": "Gamot_DateFermeture" },
                { "mData": "Numero_ND" },
                { "mData": "Gamot_DateFermeture" },
                { "mData": "Supprimer" }
           ];
           options.aoColumnDefs = [
                { "title": "Titre 1", "targets": 0 },
                { "title": "Titre 2", "targets": 1 },
                { "title": "Titre 3", "targets": 2 },
                { "title": "Titre 4", "targets": 3 },
                { "title": "Titre 5", "targets": 4 },
                { "title": "Titre 6", "targets": 5 },
                { "title": "Titre 7", "targets": 6 },
                { "title": "Titre 8", "targets": 7 },
                { "title": "Titre 9", "targets": 8 }

                /*{ "targets": 1, "render": $.fn.DataTable.render.ellipsis(5) }*/
           ];


          $("#tableA").dataTable(options);


          /* --- TableB INIT --- */
          options.aaData = jsonData.bad_nd;
          options.aoColumns = [
                { "mData": "Ticket_RT" },
                { "mData": "Numero_ND" },
                { "mData": "Supprimer" }
          ];
          options.aoColumnDefs = [
               { "title": "Titre 01", "targets": 0 },
               { "title": "Titre 02", "targets": 1 },
               { "title": "Titre 03", "targets": 2 },

               { "targets": 1, "render": $.fn.DataTable.render.ellipsis(5) }
          ];


          $("#tableB").dataTable(options);
      }

      initialize(jsonData);

      var oTable = $('#tableA').DataTable();
          $('#tableA').on('click', 'a.delete', function (e) {
              oTable.row($(this).parents('tr')).remove().draw();
      });

      // Permet de réduire les commentaires et ajouter tooltip
      $.fn.DataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
          var esc = function ( t ) {
              return t
                  .replace( /&/g, '&' )
                  .replace( /</g, '<' )
                  .replace( />/g, '>' )
                  .replace( /"/g, '"' );
          };

          return function ( d, type, row ) {
              // Order, search and type get the original data
              if ( type !== 'display' ) {
                  return d;
              }

              if ( typeof d !== 'number' && typeof d !== 'string' ) {
                  return d;
              }

              d = d.toString(); // cast numbers

              if ( d.length < cutoff ) {
                  return d;
              }

              var shortened = d.substr(0, cutoff-1);

              // Find the last white space character in the string
              if ( wordbreak ) {
                  shortened = shortened.replace(/s([^s]*)$/, '');
              }

              // Protect against uncontrolled HTML input
              if ( escapeHtml ) {
                  shortened = esc( shortened );
              }

              return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
          };
      };

    });

    </script>
  </body>
</html>