Get started with datatables.net-scroller-jqui CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with datatables.net-scroller-jqui CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/scroller.jqueryui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/buttons.html5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/scroller.jqueryui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <div style="margin: 20px;">
        <button id="dataTablesButton">Load Data</button>
        <table id="dataTable" width="100%" class="display" style="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>
        </table>
    </div>

    <script>
        $(document).ready(function() {
            $('#dataTablesButton').click(function() {
                $('#dataTable').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": "https://jsonplaceholder.typicode.com/users",
                    "columns": [
                        { "data": "name" },
                        { "data": "position" },
                        { "data": "office" },
                        { "data": "age" },
                        { "data": "start_date" },
                        { "data": "salary" }
                    ],
                    "order": [[ 0, "asc" ]],
                    "lengthMenu": [10, 25, 50, 100],
                    "pageLength": 10,
                    "pagingType": "scroller",
                    "scrollCollapse": true,
                    "scrollHead": true,
                    "preDrawCallback": function () {
                        $("#dataTable_wrapper .dataTables_scrollHead").css("width", "calc(100% - 17px)");
                    },
                    "drawCallback": function () {
                        $("#dataTable_wrapper .dataTables_scrollHead").css("width", "calc(100% - 17px)");
                    }
                });
            });
        });
    </script>
</body>
</html>
Get started with datatables.net-scroller-jqui CDN

Stable version

How to start using datatables.net-scroller-jqui CDN

All versions
