File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
​
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link
        href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-1.13.8/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.11.0/r-2.5.0/rg-1.4.1/rr-1.4.1/sc-2.3.0/sb-1.6.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css"
        rel="stylesheet">
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script
        src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-1.13.8/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.11.0/r-2.5.0/rg-1.4.1/rr-1.4.1/sc-2.3.0/sb-1.6.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      
      <table id="example" class="table" width="100%"> 
        
        
      <table id="example2" class="table" width="100%">
           
      <table id="example3" class="table" width="100%">
  
      </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
 
let arrayOfExampleData = [];
arrayOfExampleData.push({ "name" : "Alex", "hobbies" : ['No data']});
arrayOfExampleData.push({ "name" : "Stefan", "hobbies" : ['No data']});
arrayOfExampleData.push({ "name" : "Alan", "hobbies" : ['No data']});
​
let arrayOfExampleData2 = [];
arrayOfExampleData2.push({ "name" : "Alex", "hobbies" : 'No data'});
arrayOfExampleData2.push({ "name" : "Stefan", "hobbies" : 'No data'});
arrayOfExampleData2.push({ "name" : "Alan", "hobbies" : 'No data'});
​
let arrayOfExampleData3 = [];
arrayOfExampleData3.push({ "name" : "Alex", "hobbies" : ['No data']});
arrayOfExampleData3.push({ "name" : "Stefan", "hobbies" : ['Sailing', 'Phishing']});
arrayOfExampleData3.push({ "name" : "Alan", "hobbies" : ['DataTables','JavaScript','Answering Forum Questions']});
​
 var table = $('#example').DataTable({
                    data: arrayOfExampleData,
                deferRender: true,/*  */
                destroy: true,
                columns: [
                    {
                        "title": "Name",
                        "data": "name",
                        "defaultContent": "<i>Not set</i>"
                    },
                    {
                        "title": "Hobbies",
                        "data": "hobbies",
                        "defaultContent": "<i>Not set</i>",
                        render: {
                            _: '[, ]',
                            sp: '[]'
                        },
                        searchPanes: {
                            orthogonal: 'sp'
                        }
                    }
                ],
                columnDefs: [
                    {
                        searchPanes: {
                            show: true
                        },
                        targets: [1]
                    }
                ],
                responsive: true,
                dom: 'Psiflrtp',
                searchPanes: {
                    cascadePanes: true
                },
                "pageLength": 10,
                "lengthMenu": [[5, 10, 20, 50, -1], [5, 10, 20, 50, "All"]]
   
});
​
var table = $('#example2').DataTable({
                    data: arrayOfExampleData2,
                deferRender: true,/*  */
                destroy: true,
                columns: [
                    {
                        "title": "Name",
                        "data": "name",
                        "defaultContent": "<i>Not set</i>"
                    },
                    {
                        "title": "Hobbies",
                        "data": "hobbies",
                        "defaultContent": "<i>Not set</i>"
                    }
                ],
                columnDefs: [
                    {
                        searchPanes: {
                            show: true
                        },
                        targets: [1]
                    }
                ],
                responsive: true,
                dom: 'Psiflrtp',
                searchPanes: {
                    cascadePanes: true
                },
                "pageLength": 10,
                "lengthMenu": [[5, 10, 20, 50, -1], [5, 10, 20, 50, "All"]]
   
});
​
​
var table = $('#example3').DataTable({
                    data: arrayOfExampleData3,
                deferRender: true,/*  */
                destroy: true,
                columns: [
                    {
                        "title": "Name",
                        "data": "name",
                        "defaultContent": "<i>Not set</i>"
                    },
                    {
                        "title": "Hobbies",
                        "data": "hobbies",
                        "defaultContent": "<i>Not set</i>"
                    }
                ],
                columnDefs: [
                    {
                        searchPanes: {
                            show: true
                        },
                        targets: [1]
                    }
                ],
                responsive: true,
                dom: 'Psiflrtp',
                searchPanes: {
                    cascadePanes: true
                },
                "pageLength": 10,
                "lengthMenu": [[5, 10, 20, 50, -1], [5, 10, 20, 50, "All"]]
   
});
​
​
​
3 warnings
Line 1: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 6: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 11: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers