DataTablesをポピュレートするマルチテーブルを使用してPHPのAjax Jsonオブジェクト

私のプロジェクトでは、DataTablesを使用してデータを表示しています。これはPHP echo json_encodeから取得します。私は私のHTLMで各テーブルに1つのJSファイルを持っていたし、それは素晴らしい作品が、私は同じコードをたくさん繰り返し、JSONエコーを呼ぶ私の最初の試みで、DataTablesをポピュレートするマルチテーブルを使用してPHPのAjax Jsonオブジェクト

{ 
    "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>" 
     } 
    ] 
    }

：PHPページには、JSONを返すスクリプトです毎回1つのJSファイルですべてのコードを再編成することにしました。

ほとんどすべてのテーブルオプションをエクスポートできましたが、いくつかの変数を定義する際に問題があります。 1つはhideFromExportです： "COPY"ボタンをクリックすると、最初の列の値だけをコピーする必要があります。 2番目の問題は、行を削除するために使用するoTableです。これらの2つの変数をすべてのテーブルと互換性があるように設定したいと思います。（私の下の例では、私は2つのテーブルしか使用しませんが、実際のプロジェクトではもっと多くのテーブルがあります）。

ライブ例：http://live.datatables.net/peceqofo/1/edit

コード：

<!DOCTYPE html> 
<html> 
    <head> 

<link href="https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" /> 
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />  
<link href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.css" rel="stylesheet" type="text/css" /> 
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" /> 
<link href="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" rel="stylesheet" type="text/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 src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script> 
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"></script> 
<script src="https://raw.githubusercontent.com/Stuk/jszip/master/dist/jszip.min.js"></script> 
<script src="https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/pdfmake.min.js"></script> 
<script src="https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/vfs_fonts.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script> 
<script src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/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]; /*<--- How i can custom this for each table individually ?? */ 

     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: [{ /*<--- 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 && !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 <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(); /*<--- 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(/&/g, '&amp;') 
        .replace(/</g, '&lt;') 
        .replace(/>/g, '&gt;') 
        .replace(/"/g, '&quot;'); 
      }; 

      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>

はソリューション：

まあ多くの研究の後、私は今、それは良い作品、COMMUNボタンのオプションのための解決策を見つけました！次に、選択した行を削除するボタンを追加しました。

このコードが私のような状況でもっと多くの人を助けてくれることを願っています！私は属性で別々のテーブルを維持することをお勧め

<!DOCTYPE html> 
    <html> 
    <head> 

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" /> 
     <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />  
     <link href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.css" rel="stylesheet" type="text/css" /> 
     <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" /> 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/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%"></table> 

       <br /> 

       <table id="tableB" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0" width="100%"></table>  
       </div> 
      </div> 
     </div> 
     </div> 

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

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

     $(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: '<"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(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 <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": "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(/&/g, '&amp;') 
        .replace(/</g, '&lt;') 
        .replace(/>/g, '&gt;') 
        .replace(/"/g, '&quot;'); 
      }; 

      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>

出典

2016-08-25 Peacefull

"私はこれらの2つの変数をすべてのテーブルと互換性を持たせるように設定したい" - あなたが望むものを詳しく説明することはできますか？これは書かれているように実際には意味をなさない。 'hideFromExport'は単なる配列です。すでにすべてのテーブルと互換性があるはずであり、oTableはテーブルのAPIインスタンスの1つを参照するオブジェクトです。別のテーブルのAPIインスタンスを参照する場合は、別のオブジェクトが必要です。 –

なぜこの質問が下降したのですか？ – davidkonrad

テーブルでは共通のオプションを使用しますが、個別のテーブルを管理するオプションが必要です。設定のように 'hideFromExport'、最初のテーブルのみの例は3番目のカラム、2番目のテーブルは2番目のテーブルだけです。次に、各行に削除ボタンを追加しますが、ジョブを管理する方法はわかりません。十分でない場合は、それを教えてください。そして、私はなぜこの質問が落ちたのか分からない...助けてくれてありがとう。 – Peacefull

：

は:)

コードをお楽しみください。また、データテーブルに余分な列やボタンを追加したい場合は、あなたは次のアプローチを使ってそれを達成することができます。

アクションの列を追加します。
オンfnRowCallbackメソッドは、アクション列に特定のクラスを追加します。行動上のクリックの

例：

jQuery('#datatable tbody').on('click', 'td.action', function() { 

    //call custom method to format the data inside td.action column. 
    data = { 
       'id': $(this).attr('cour_id') 
      }; 

    tr.after(format(data)).show(); 
});

これは、特定の行IDと属性で、各行のためのアクションボタンを作成し、互いに競合することはありません。

希望すると助かります！

出典

2016-08-26 11:45:09

申し訳ありませんが、私は本当にあなたのアプローチを理解していません（私の英語はあまり良くありません）。私の最後のコードからの例を教えてください。 – Peacefull

DataTablesをポピュレートするマルチテーブルを使用してPHPのAjax Jsonオブジェクト

答えて

関連する問題