File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Export with customisable file name" />
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="/media/js/dynamic.php?comments-page=extensions%2Fbuttons%2Fexamples%2Fhtml5%2FoutputFormat-orthogonal.html" async></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.js"></script>
    <link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Gender</th>
            <th>First</th>
            <th>Last</th>
            <th>Location</th>
            <th>Status</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>ID</th>
            <th>Gender</th>
            <th>First</th>
            <th>Last</th>
            <th>Location</th>
            <th>Status</th>
          </tr>
        </tfoot>
​
      </table>
    </div>
  </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 dataSet1 = [
    {
      id: 1,
      gender: "M",
      first: "John",
      last: "Smith",
      city: "Seattle",
      state: "WA",
      status: "Active"
    },
    {
      id: 2,
      gender: "F",
      first: "Kelly",
      last: "Ruth",
      city: "Dallas",
      state: "TX",
      status: "Active"
    },
    {
      id: 3,
      gender: "M",
      first: "Jeff",
      last: "Stevenson",
      city: "Washington",
      state: "D.C.",
      status: "Active"
    },
    {
      id: 4,
      gender: "F",
      first: "Jennifer",
      last: "Gill",
      city: "Boston",
      state: "MA",
      status: "Active"
    }
  ];
​
  var table = $("#example").DataTable({
    data: dataSet1,
    dom: "Bfrtip",
    buttons: [
      {
        extend: 'collection',
                text: 'Selezionati',
                buttons: [
                    {
                      //INSIDE COLLECTION
                        extend: "excelHtml5",
                        filename: function fred() { return "Example" + Date.now(); },
                        className: 'colinXLS',
                        exportOptions: { orthogonal: "exportxls" }
                    },
                    {
                        extend: "csvHtml5",
                        className: 'colinCSV',
                        exportOptions: { orthogonal: "exportcsv" }
                    }
                    
                ]
      },
      {
        //OUTSIDE COLLECTION
        extend: "excelHtml5",
        filename: function fred() { return "Example" + Date.now(); },
        className: 'colinXLS',
        exportOptions: { orthogonal: "exportxls" }
      }
    ],
    initComplete: function() {
      //this.api().buttons('.colinXLS').remove(); // removes it entirely
      this.api().buttons('.colinXLS').disable(); // makes it inactive
      
    },
    columns: [
      { data: "id" },
      { data: "gender" },
      { data: "first" },
      { data: "last" },
      {
        data: "city",
        render: function(data, type, row) {
          if (type === "display" || type === "filter") {
            return data + " (" + row.state + ")";
          }
​
          if (type === "exportxls") {
            return "XLS City: " + data + ", State: " + row.state;
          }
​
          if (type === "exportcsv") {
            return "CSV City: " + data + ", State: " + row.state;
          }
​
          return data;
        }
      },
      { data: "status" }
    ]
  });
  
});
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers