File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.jqueryui.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/autofill/2.7.0/js/dataTables.autoFill.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/autofill/2.7.0/js/autoFill.jqueryui.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.jqueryui.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.colVis.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.html5.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.print.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/colreorder/2.0.4/js/dataTables.colReorder.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/datetime/1.5.4/js/dataTables.dateTime.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/5.0.4/js/dataTables.fixedColumns.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/keytable/2.12.1/js/dataTables.keyTable.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.3/js/dataTables.responsive.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.3/js/responsive.jqueryui.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/rowgroup/1.5.1/js/dataTables.rowGroup.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/rowreorder/1.5.0/js/dataTables.rowReorder.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/scroller/2.4.3/js/dataTables.scroller.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/dataTables.searchBuilder.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/searchBuilder.jqueryui.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/searchpanes/2.3.3/js/dataTables.searchPanes.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/searchpanes/2.3.3/js/searchPanes.jqueryui.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/select/2.1.0/js/dataTables.select.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/staterestore/1.4.1/js/dataTables.stateRestore.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/staterestore/1.4.1/js/stateRestore.jqueryui.min.js" as="script" referrerpolicy="origin" crossorigin="anonymous"></script>
​
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/2.1.8/css/dataTables.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/autofill/2.7.0/css/autoFill.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/colreorder/2.0.4/css/colReorder.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/datetime/1.5.4/css/dataTables.dateTime.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/fixedcolumns/5.0.4/css/fixedColumns.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/keytable/2.12.1/css/keyTable.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/responsive/3.0.3/css/responsive.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/rowgroup/1.5.1/css/rowGroup.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/rowreorder/1.5.0/css/rowReorder.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/scroller/2.4.3/css/scroller.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/searchbuilder/1.8.1/css/searchBuilder.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/searchpanes/2.3.3/css/searchPanes.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/select/2.1.0/css/select.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/staterestore/1.4.1/css/stateRestore.jqueryui.min.css" rel="stylesheet" as="css" referrerpolicy="origin" crossorigin="anonymous">
​
    <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>ALL</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>ALL</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr>
            <td>+</td>
            <td>Tiger Nixon</td>
            <td>Edinburgh</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>+</td>
            <td>Garrett Winters</td>
            <td>Edinburgh</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>+</td>
            <td>Ashton Cox</td>
            <td>San Francisco</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>+</td>
            <td>Cedric Kelly</td>
            <td>Edinburgh</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>+</td>
            <td>Jenna Elliott</td>
            <td>Edinburgh</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>+</td>
            <td>Brielle Williamson</td>
            <td>Edinburgh</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
          </tr>
          <tr>
            <td>+</td>
            <td>Herrod Chandler</td>
            <td>Edinburgh</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$4,080</td>
          </tr>
          <tr>
            <td>+</td>
            <td>Rhona Davidson</td>
            <td>Edinburgh</td>
            <td>Edinburgh</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$6,730</td>
          </tr>
        </tbody>
      </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
 
​
            var table = $('#example').DataTable({
                "processing": true,
                "serverSide": false,
                "stateSave": true,
                "paging": true,
                "searching": true,
                "ordering": true,
                "colReorder": true,
                "fixedHeader": true,
                "deferRender": true,
                "responsive": false,
                "scrollX": true,
                //"scrollY": '75vh',
                //"scroller": true,
                //"scrollCollapse": true,
                "select": {
                    "style": 'os'
                },
                "pageLength": 10,
                "language": {
                    "processing": 'Processing',
                    "lengthMenu":
                        'Show Rows <select>' +
                        '<option value="10">10</option>' +
                        '<option value="25">25</option>' +
                        '<option value="50">50</option>' +
                        '<option value="100">100</option>' +
                        '<option value="250">250</option>' +
                        '<option value="500">500</option>' +
                        '<option value="1000">1000</option>' +
                        '</select>',
                    "search": 'Search Term _INPUT_',
                    "searchPanes": {
                        "count": '{total} found',
                        "countFiltered": '{shown} / {total}'
                    }
                },
                "layout": {
                    "top2Start": {
                        "buttons": ['copy', 'csv', 'excel',
                            {
                                "extend": 'colvis',
                                "collectionLayout": 'fixed columns',
                                "popoverTitle": 'Column visibility control'
                            }
                        ]
                    },
                    "top2End": {
                        "paging": {
                            "numbers": 10
                        }
                    },
                    "topStart": "pageLength",
                    "topEnd": {
                        "search": {
                            "placeholder": "Type search here",
                            "regex": true,
                            "smart": false
                        }
                    },
                    "bottomStart": "info",
                    "bottomEnd": "searchBuilder",
                    "bottom2": {
                        "searchPanes": {
                            "cascadePanes": true,
                            "viewTotal": true,
                            "layout": 'columns-3'
                        }
                    }
                },
                "order": [['Start date:name', "desc"]],
                "columns": [
                    {
                        "name": 'ALL',
                        "className": 'details-control',
                        "data": null,
                        "defaultContent": '+'
                    },
                    { "name": 'Name', "data": 'name' },
                    { "name": 'Position', "data": 'position' },
                    { "name": 'Office', "data": 'office' },
                    { "name": 'Age', "data": 'age' },
                    { "name": 'Start date', "data": 'start_date' },
                    { "name": 'Salary', "data": 'salary' }
                ],
                "columnDefs": [
                    {
                        "searchPanes": {
                            "show": true,
                            "dtOpts": {
                                "paging": true,
                                "order": [[1, 'desc']]
                            },
                            "orthogonal": 'sp'
                        },
                        "targets": 'ALL:name',
                        "render": function (data, type, row) {
                            if (type === 'sp') {
                                return Array.from( new Set( [row.name, row.position, row.office] ) );
                            }
                            return data;
                        }
                    },
                    {
                        "searchPanes": {
                            "show": true,
                            "dtOpts": {
                                "paging": true,
                                "order": [[1, 'desc']]
                            }
                        },
                        "targets": [
                            'Name:name',
                            'Position:name',
                            'Office:name'
                        ]
                    },
                    {
                        "searchPanes": { "show": false },
                        "targets": [
                            'Age:name',
                            'Start date:name',
                            'Salary:name'
                        ]
                    },
                    { "orderable": true, "targets": [-1] },
                    { "visible": false, "targets": ['Name:name'] }
                ]
            });
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers