File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    
        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></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>
<link href="https://nightly.datatables.net/scroller/css/scroller.dataTables.css?_=36cf0d5b3872c7a0c4905731f0de95a2.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/scroller/js/dataTables.scroller.js?_=36cf0d5b3872c7a0c4905731f0de95a2"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
        <div class="container" style="width:800px">
            <table id="example" class="bordered" 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;
}
​
/* This is the important CSS */
table.dataTable {
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;  
}
 
table.dataTable th {
    white-space: nowrap;
    overflow: hidden;
}
 
table.dataTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
​
/* CSS below is for appearance only */
​
table.dataTable thead th  {
    text-align: left;
    color: #ffffff;
    padding-top: 0.85rem; /* Centering the text */
    padding-bottom: 0.5rem; /* Centering the text */
    white-space: nowrap !important; 
}
​
​
table.bordered th {
    border-right: 1px solid whitesmoke;
}
​
​
​
table.bordered th:last-child {
    border-right-width: 0;
}
​
table.bordered td {
    border-top-width: 0;
    border-left-width: 0;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
​
table.bordered td:last-child {
    border-right-width: 0;
}
​
.dataTables_scrollHead {
​
    background: steelblue;
    border-left: solid 1px steelblue !important;
    border-right: solid 1px steelblue !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
​
.dataTables_scrollHead table {
    border: none;
    margin-top: 0px !important;    
}
​
.dataTables_scrollHead thead th {
    border-top: none;
    border-bottom: none;
}
​
​
​
.dataTables_scrollBody {
​
    border-left: solid 1px #676a6c;
    border-right: solid 1px #676a6c;
    border-bottom: solid 1px #676a6c;
​
}
​
JavaScriptSaved
 
            $(document).ready( function () {
​
                var tableId = 'example', table;
​
                var dataSet = [
                    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
                    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
                    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
                    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
                    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
                    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
                ];
​
                var columnDefs = [
                    {
                        title: "Name",
                        width: "20%",
                        data: null,
                        targets: 0,
                        render: function(data) { return (data[0]); }
                    },
                    {
                        title: "Position",
                        width: "20%",
                        data: null,
                        targets: 1,
                        render: function(data) { return (data[1]); }
                    },
                    {
                        title: "City",
                        width: "20%",
                        data: null,
                        targets: 2,
                        render: function(data) { return (data[2]); }
                    },
                    {
                        title: "Date",
                        width: "20%",
                        data: null,
                        targets: 3,
                        render: function(data) { return (data[4]); }
                    },
                    {
                        title: "Amount",
                        width: "20%",
                        data: null,
                        targets: 4,
                        render: function(data) { return (data[5]); }
                    },
                ];
​
                loadDataTable();
​
                function loadDataTable() {
​
                    // Adjust any columnDef widths set by the user
                    setUserColumnsDefWidths();
                  
                    table = $('#' + tableId).DataTable({
                        destroy: true,
                        autoWidth: false,
                        columnDefs: columnDefs,
                        deferRender: true,
                        dom: 't',
                        scrollY: 300,
                        scrollX: true,
                        scrollCollapse: true,
                        scroller: true,
                        data: dataSet,
​
                        initComplete: function (settings) {
                            
                            //Add JQueryUI resizable functionality to each th in the ScrollHead table
​
                            $('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
​
                                handles: "e",
​
                                alsoResize: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
​
                                stop: function () {
​
                                    saveColumnSettings();
​
                                    loadDataTable();
                                }
                            });
                        },
                    });
​
                }
    
                
                function setUserColumnsDefWidths() {
​
                    var userColumnDef;
​
                    // Get the settings for this table from localStorage
                    var userColumnDefs = JSON.parse(localStorage.getItem(tableId)) || [];
​
                    if (userColumnDefs.length === 0 ) return;
​
                    columnDefs.forEach( function(columnDef) {
​
                        // Check if there is a width specified for this column
                        userColumnDef = userColumnDefs.find( function(column) {
                            return column.targets === columnDef.targets;
                        });
​
                        // If there is, set the width of this columnDef in px
                        if ( userColumnDef ) {
​
                            columnDef.width = userColumnDef.width + 'px';
​
                        }
​
                    });
​
                }
​
​
                function saveColumnSettings() {
    
                    var userColumnDefs = JSON.parse(localStorage.getItem(tableId)) || [];
    
                    var width, header, existingSetting; 
​
                    table.columns().every( function ( targets ) {
    
                        // Check if there is a setting for this column in localStorage
                        existingSetting = userColumnDefs.findIndex( function(column) { return column.targets === targets;});
                            
                        // Get the width of this column
                        header = this.header();
                        width = $(header).width();
    
                        if ( existingSetting !== -1 ) {
    
                            // Update the width
                            userColumnDefs[existingSetting].width = width;
    
                        } else {
    
                            // Add the width for this column
                            userColumnDefs.push({
                                targets: targets,
                                width:  width,
                            });
    
                        }
    
                    });
​
                    // Save (or update) the settings in localStorage
                    localStorage.setItem(tableId, JSON.stringify(userColumnDefs));
    
                }
​
            });
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers