File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
​
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet" />
​
</head>
<body>
    <div id="accordion">
        <div class="accordion-item" data-group-id="1">
            <div class="accordion-header">
                Group 1 <span class="caret">▶</span>
            </div>
            <div class="collapse">
                <table id="userTable1" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Role</th>
                            <th>Value</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
CSSSaved
 
.accordion-item {
    background-color: #f1f1f1;
    margin-bottom: 5px;
    padding: 10px;
    cursor: pointer;
}
.collapse {
    display: none;
}
.show {
    display: block;
}
.dataTables_wrapper .dataTables_processing {
    height: 60px;
    font-size: 14px;
}
.action-icons {
    display: flex;
    justify-content: space-around;
}
.action-icons a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}
​
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td {
    border: 1px solid black;
}
​
table.dataTable thead th, table.dataTable thead td {
    border: 1px solid black;
}
JavaScriptSaved
 
var initializedTables = {};
​
function adjustAllVisibleTables() {
    $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
    console.log("All visible tables adjusted");
}
​
function adjustTableColumns(groupId) {
    setTimeout(function() {
        var table = initializedTables[groupId];
        if (table) {
            table.columns.adjust();
            console.log("Columns adjusted for table " + groupId + " after rendering");
        }
    }, 9000);
}
​
function initializeDataTable(groupId) {
    var tableEle = $("#userTable" + groupId);
    if (tableEle.length === 0 || initializedTables[groupId]) {
        return;
    }
​
    var dataTable = tableEle.DataTable({
        processing: true,
        serverSide: true,
        paging: false,
        ordering: false,
        searching: false,
        info: false,
        scrollX: true,
        ajax: function(data, callback, settings) {
            // Mock data
            var response = {
                data: [
                    {userId: 1, id: "ID001", name: "John Doe", role: "User", value: 100.50},
                    {userId: 2, id: "ID002", name: "Jane Smith", role: "User", value: 200.75},
                    {userId: 3, id: "ID003", name: "Admin User", role: "Admin", value: 150.25},
                    {userId: 4, id: "ID004", name: "Test User", role: "User", value: 300.00},
                    {userId: 5, id: "ID005", name: "Manager", role: "Admin", value: 250.50}
                ]
            };
            setTimeout(function() {
                callback(response);
            }, 3000);  // 3 seconds delay
        },
        columns: [
            {
                data: null,
                render: function (data, type, row) {
                    return data.role !== "Admin" ? '<input type="checkbox" name="userIds" value="' + data.userId + '">' : '';
                }
            },
            { data: "id", title: "ID" },
            { data: "name", title: "Name" },
            { data: "role", title: "Role" },
            { 
                data: "value", 
                title: "Value",
                render: function(data, type, row) {
                    return '$' + data.toFixed(2);
                }
            },
            {
                data: null,
                title: "",
                render: function (data, type, row) {
                    return '<div class="action-icons"><a href="#">✎</a> <a href="#">✖</a></div>';
                }
            }
        ],
        drawCallback: function(settings) {
            console.log("Table drawn");
            var api = this.api();
            setTimeout(function() {
                api.columns.adjust();
                console.log("Columns adjusted");
            }, 5000);
            setTimeout(function() {
                adjustAllVisibleTables();
            }, 7000);
        }
    });
​
    initializedTables[groupId] = dataTable;
}
​
$(document).ready(function() {
    $("#accordion").on("click", ".accordion-header", function() {
        var item = $(this).parent();
        var groupId = item.data("group-id");
        var collapseElement = item.find(".collapse");
        var caretIcon = item.find(".caret");
​
        collapseElement.toggleClass("show");
​
        if (collapseElement.hasClass("show")) {
            caretIcon.html("▼");
            initializeDataTable(groupId);
             adjustTableColumns(groupId); 
        } else {
            caretIcon.html("▶");
        }
    });
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers