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://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?_=ba19b957f4cc4b35b31db5536fb7eb7b.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/scroller/js/dataTables.scroller.js?_=ba19b957f4cc4b35b31db5536fb7eb7b"></script>
​
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</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;
}
​
.display{
  /*height: 1000px;*/
}
JavaScriptSaved
 
$(document).ready(function() {
​
    var numberOfRecords = 5000;
    var userClicked = false;
​
    var table = $('#example').DataTable({
        ajax: function(data, callback, settings) {
            console.log('data request');
            var out = [];
​
            for (var i = data.start, ien = data.start + data.length; i < ien; i++) {
                out.push({
                    'name': i + '-1',
                    'position': i + '-2',
                    'office': i + '-3',
                    'extn': i + '-4',
                    'start_date': i + '-5',
                    'salary': i + '-6'
                });
            }
​
            setTimeout(function() {
                callback({
                    draw: data.draw,
                    data: out,
                    recordsTotal: numberOfRecords,
                    recordsFiltered: numberOfRecords
                });
            }, 1000);
        },
        "columns": [{
                "data": "name",
            },
            {
                "data": "position"
            },
            {
                "data": "office"
            },
            {
                "data": "extn"
            },
            {
                "data": "start_date"
            },
            {
                "data": "salary"
            }
        ],
    "searching": false,
    "info": false,
    "autoWidth": false,
          "colResize": {
        "exclude": [
            0
        ],
        "tableWidthFixed": false
    },
    "language": {
        "emptyTable": "No data available for this table",
        "zeroRecords": "",
        "loadingRecords": "",
        "aria": {
            "sortAscending": " - Click for more actions",
            "sortDescending": " - Click for more actions"
        }
    },
    "order": [
        [
            1,
            "asc"
        ]
    ],
    "orderClasses": false,
    "orderMulti": false,
    "serverSide": true,
    "stateSave": true,
    "deferRender": true,
    "scroller": {
        "loadingIndicator": true
    },
    "scrollY": "39px",
    "scrollX": "100%",
    "rowId": "id",
    "fixedColumns": false,
    "sDom": "Zt",
    "bInfo": false,
    "bAutoWidth": false,    "bServerSide": true,
    "bStateSave": true,
    "bDeferRender": true,
    "sScrollY": "39px",
    "sScrollX": "100%",
    "bSortMulti": false,
    "bSortClasses": false,
    "aaSorting": [
        [
            1,
            "asc"
        ]
    ],
    "bFilter": false,
      "initComplete": function(settings, json) {
  /*      
$('.dt-scroll-body').css({"maxHeight":"1000px"});
$('.dt-scroll-body').css({"height":"1000px"});
*/
      }
    });
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers