如何在响应式数据表中创建自定义列

问题描述 投票：0回答：1

我为我糟糕的英语提前道歉 我有一个代码 像这样。 我想自定义位置响应式，仅在 main 中显示 header1，除此之外，其他列以更响应式的细节显示

javascript html jquery datatable datatables
1个回答
0
投票

这是我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Tables Page with DataTables</title>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <!-- Include DataTables CSS and JS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.js"></script>
    <style>
        /* Add your custom styles here */
    </style>
</head>

<body>

    <h1>tes</h1>

    <table id='table1' class='display' style="width: 100%">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>Header 7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1-1 daslkdk naksndk naskdnk nsad ndlnasld nalkdn lnknd nlsan lndas nln lnn lkasnl dnaldn alndlak ndasndkaslkd</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
            <tr>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-1</td>
                <td>Data 1-2</td>
                <td>Data 1-3</td>
                <td>Data 1-3</td>
            </tr>
           
        </tbody>
    </table>

    <script>
        // Initialize DataTables for the table
        $(document).ready(function() {
            $('#table1').DataTable({
                responsive: true,
                autowidth:false,
                columnDefs: [
                    {
                        responsivePriority: 1,
                        targets: 0 // Set the responsive priority for the first column
                    }
                ]
            });
        });
    </script>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.