Populate DataTables Ajax Json object from PHP using multi tables
<p>In my project I'm using DataTables to display my data, which is retrieved from an PHP <code>echo json_encode</code>. The PHP page is a script that returns JSON:</p>

<pre><code>  {
    "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": "&lt;a class='delete'&gt;&lt;button&gt;Delete&lt;/button&gt;&lt;/a&gt;"
      },
      {
        "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": "&lt;a class='delete'&gt;&lt;button&gt;Delete&lt;/button&gt;&lt;/a&gt;"
      }
    ],
    "bad_nd": [
      {
        "Ticket_RT": 716620,
        "Numero_ND": 236598741,
        "Supprimer": "&lt;a class='delete'&gt;&lt;button&gt;Delete&lt;/button&gt;&lt;/a&gt;"
      },
      {
        "Ticket_RT": 716577,
        "Numero_ND": 565231583,
        "Supprimer": "&lt;a class='delete'&gt;&lt;button&gt;Delete&lt;/button&gt;&lt;/a&gt;"
      }
    ]
  }
</code></pre>

<p>In my first attempt I had one JS file for each table in my HTLM and that works great, but I repeat the same code a lot and call the JSON echo each time, so I decided to regroup all my code in one JS file.</p>

<p>I managed to export almost all the tables options but I'm having trouble defining some variables; one is <code>hideFromExport</code>: I need to only copy the values from the first columns when I click on "COPY" button. The second problem is with <code>oTable</code> which I use to delete the row. I would like to set these two variables to be compatible with all my tables. (in my below example I use only two tables but in the actual project I have more).</p>

<p>Live Example: <a href="http://live.datatables.net/peceqofo/1/edit" rel="nofollow">http://live.datatables.net/peceqofo/1/edit</a></p>

<p>Code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;

&lt;link href="https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /&gt;    
&lt;link href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" rel="stylesheet" type="text/css" /&gt;            
    &lt;meta charset=utf-8 /&gt;
    &lt;title&gt;DataTables - JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container" style="width: 90%;"&gt;
      &lt;div class="panel panel-danger" style="margin: 5px;"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h2 class="panel-title"&gt;
              &lt;b&gt;My Test&lt;/b&gt;
            &lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;div class="table-responsive"&gt;
              &lt;table id="tableA" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0" width="100%"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Ticket_RT&lt;/th&gt;
                          &lt;th&gt;Cable_de_renvoi&lt;/th&gt;
                          &lt;th&gt;Longueur_de_ligne_&lt;/th&gt;
                          &lt;th&gt;Res_LigneCoupee&lt;/th&gt;   
                          &lt;th&gt;Ticket_fils RT&lt;/th&gt;
                          &lt;th&gt;Gamot_DateFermeture&lt;/th&gt;
                          &lt;th&gt;Numero_ND&lt;/th&gt;
                          &lt;th&gt;Gamot_DateFermeture&lt;/th&gt;    
                          &lt;th&gt;Supprimer&lt;/th&gt;    
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;    
              &lt;br /&gt;
              &lt;table id="tableB" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0" width="100%"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Ticket_RT&lt;/th&gt;
                          &lt;th&gt;Numero_ND&lt;/th&gt;
                          &lt;th&gt;Supprimer&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;    
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"&gt;&lt;/script&gt;
&lt;script src="https://raw.githubusercontent.com/Stuk/jszip/master/dist/jszip.min.js"&gt;&lt;/script&gt;
&lt;script src="https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/pdfmake.min.js"&gt;&lt;/script&gt;
&lt;script src="https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/vfs_fonts.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/ellipsis.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript" charset="utf-8"&gt;

    $(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]; /*&lt;--- How i can custom this for each table individually ?? */

      var options = {
        responsive: true,
        bAutoWidth: true,
        dom: '&lt;"top"lf&gt;Bt&lt;"bottom"pi&gt;&lt;"clear"&gt;',
        scrollY: 400,
        scrollCollapse: true,
        jQueryUI: true,
        bProcessing: true,
        sScrollX: "70%",
        sScrollXInner: "100%",
        bScrollCollapse: true,
        bDestroy: true,
        searching: false,
        iDisplayLength: 25,
        buttons: [{ /*&lt;--- How i can custom this for each table individually ?? */
                extend: 'copyHtml5',
                exportOptions: {
                  columns: function(idx, data, node) {
                    var isVisible = table.column(idx).visible();
                    var isNotForExport = $.inArray(idx, hideFromExport) !== -1;
                    return isVisible &amp;&amp; !isNotForExport ? true : false;
                  }
                }
              },
              'excelHtml5', 'csvHtml5', 'pdfHtml5'
        ],
        language: {
            url: "https://cdn.datatables.net/plug-ins/1.10.12/i18n/French.json",
            buttons: {
                copy: 'Copier Tickets',
                copyTitle: 'Ajouté au presse-papiers',
                copyKeys: 'Appuyez sur &lt;i&gt;ctrl&lt;/i&gt; ou &lt;i&gt;\u2318&lt;/i&gt; + &lt;i&gt;C&lt;/i&gt; pour copier les données du tableau à votre presse-papiers. &lt;br&gt;&lt;br&gt;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(); /*&lt;--- How i can custom this for each table individually ?? */
          $('#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( /&amp;/g, '&amp;amp;' )
                  .replace( /&lt;/g, '&amp;lt;' )
                  .replace( /&gt;/g, '&amp;gt;' )
                  .replace( /"/g, '&amp;quot;' );
          };

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

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

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

              if ( d.length &lt; 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 '&lt;span class="ellipsis" title="'+esc(d)+'"&gt;'+shortened+'&amp;#8230;&lt;/span&gt;';
          };
      };

    });

    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>Solution :</strong></p>

<p>Well after a lot of research i found an solution for the commun button options, now that works good ! Then I have added a button that will delete your selected row(s).</p>

<p>I hope this code will help more guys in the same situation like me !</p>

<p>Enjoy :)</p>

<p>Code :</p>

<pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;

      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /&gt;    
      &lt;link href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bfm.css"&gt;

      &lt;meta charset=utf-8 /&gt;
      &lt;title&gt;DataTables - JS Bin&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container" style="width: 90%;"&gt;
        &lt;div class="panel panel-danger" style="margin: 5px;"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h2 class="panel-title"&gt;
                &lt;b&gt;My Test&lt;/b&gt;
              &lt;/h2&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;div class="table-responsive"&gt;
                &lt;table id="tableA" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0" width="100%"&gt;&lt;/table&gt;

                &lt;br /&gt;

                &lt;table id="tableB" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0" width="100%"&gt;&lt;/table&gt;    
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"&gt;&lt;/script&gt;
      &lt;script src="https://raw.githubusercontent.com/Stuk/jszip/master/dist/jszip.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/pdfmake.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/vfs_fonts.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/ellipsis.js"&gt;&lt;/script&gt;

      &lt;script type="text/javascript" charset="utf-8"&gt;

      $(document).ready( function () {

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

        console.log(jsonData);

        var buttonCommon = { // set default export column 0 (first column)
                exportOptions: {
                    columns:[0]
                }
            };

        var options = { // set options for tables
              responsive: true,
              bAutoWidth: true,
              dom: '&lt;"top"lf&gt;Bt&lt;"bottom"pi&gt;&lt;"clear"&gt;',
              scrollY: 400,
              scrollCollapse: true,
              jQueryUI: true,
              bProcessing: true,
              sScrollX: "70%",
              sScrollXInner: "100%",
              bScrollCollapse: true,
              bDestroy: true,
              searching: false,
              iDisplayLength: 25,
              buttons: [
                  $.extend( true, {}, buttonCommon, {
                    header: false,
                    extend: 'copyHtml5'
                  }),
                  'excelHtml5', 'csvHtml5', 'pdfHtml5',
                  {
                    text: 'Delete',
                    action: function ( e, dt, node, config ) { // function to delete selected rows on click button
                        dt.data().rows('.selected').remove().draw( false );
                    }
                  }
              ],
              language: {
                  url: "json/French.json",
                  buttons: {
                      copy: 'Copy',
                      copyTitle: 'Ajouté au presse-papiers',
                      copyKeys: 'Appuyez sur &lt;i&gt;ctrl&lt;/i&gt; ou &lt;i&gt;\u2318&lt;/i&gt; + &lt;i&gt;C&lt;/i&gt; pour copier les données du tableau à votre presse-papiers. &lt;br&gt;&lt;br&gt;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": "Difference_de_date" }
             ];
             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 }

                  /*{ "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" }
            ];
            options.aoColumnDefs = [
                 { "title": "Titre 01", "targets": 0 },
                 { "title": "Titre 02", "targets": 1 },

                 { "targets": 1, "render": $.fn.DataTable.render.ellipsis(5) } // call function to render + tooltip
            ];


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

        initialize(jsonData);

        $('#tableA tbody').on( 'click', 'tr', function () { // set multi select rows
                $(this).toggleClass('selected');
        });

        $('#tableB tbody').on( 'click', 'tr', function () { // set multi select rows
                $(this).toggleClass('selected');
        });

        // Function to delimit render + tootil
        $.fn.DataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
            var esc = function ( t ) {
                return t
                    .replace( /&amp;/g, '&amp;amp;' )
                    .replace( /&lt;/g, '&amp;lt;' )
                    .replace( /&gt;/g, '&amp;gt;' )
                    .replace( /"/g, '&amp;quot;' );
            };

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

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

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

                if ( d.length &lt; 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 '&lt;span class="ellipsis" title="'+esc(d)+'"&gt;'+shortened+'&amp;#8230;&lt;/span&gt;';
            };
        };

      });

      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
</code></pre>