File
Add library
Share
Login or Register
Help
HTMLSaved
 
  <!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>Planning FT</title>
    </head>
    <body>
      <div class="container" style="width: 90%;">
        <div class="panel panel-primary" style="margin: 5px;">
            <div class="panel-heading">
              <h2 class="panel-title">
                <b>SFR Dispo</b>
              </h2>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table id="sfr_dispo" class="table table-striped table-hover dt-responsive display" cellspacing="0" width="100%"></table>
              </div>
            </div>
        </div>
      </div>
      
      <script src="https://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/bVpntZDftu?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'
                      }
                  }
              },
              select: true
​
            };    
                
        function initialize(jsonData) {
             /* --- TableA INIT --- */
             options.aaData  = jsonData.sfr_dispo;
             options.aoColumns = [
                  { "mData": "Ticket_RT" },
                  { "mData": "Commentaire_ISP" },
                  { "mData": "Bouton_Planning", "defaultContent": "<button class='btn_planning'>Voir dispo</button>" }
             ];
             options.aoColumnDefs = [
                  { "title": "Ticket FT", "targets": 0 },
                  { "title": "Commentaire ISP", "targets": 1 },
                  { "title": "Planning", "targets": 2 },
                  { "targets": 1, "orderable": false, "searchable": false },
                  { "targets": 2, "orderable": false, "searchable": false }
​
                  /*{ "targets": 1, "render": $.fn.DataTable.render.ellipsis(100) }*/
             ];
​
            $("#sfr_dispo").dataTable(options);
        }
​
        initialize(jsonData);
​
        $('#sfr_dispo tbody').on( 'click', 'tr', function () { // set multi select rows
                $(this).toggleClass('selected');
        });
​
        $('#sfr_dispo tbody').on( 'click', '.btn_planning', function () {
                // $(this).toggleClass('selected').siblings().removeClass('selected');
                console.log('click clack !');
        });
​
      });
​
      </script>
    </body>
  </html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
  var table = $('#example').DataTable();
} );
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers