調整jQuery數據表的列

Question

我知道這已經被問過了，但我仍然無法解決。 由於應用程序架構，我在模態中有一個數據表。 這個數據表在頁面加載時初始化一次（沒有數據），放在 DOM 的模式中，它是隱藏的，沒有寬度和高度。 每次打開模式時，底層數據都會重新加載

$('#datatable').DataTable().ajax.reload()

問題是，打開模式時，列布局不正確。 列很細，它們不會占用模態的所有空間。

我讀到我應該打電話

$('#datatable').DataTable().columns.adjust();
$('#datatable').DataTable().responsive.recalc();

重新調整列寬，但沒有任何反應。

index.html

    <link href="/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <link href="/datatables.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 
</head>

<body>

    <button id="button">Open</button>

    <div id="modal-bom" class="modal">
        <div class="modal-content">
            <table class="striped" id="table">
                <thead>
                    <tr>
                        <th>Position</th>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Quantiy</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <script src="/jquery-3.4.1.min.js"></script>
    <script src="/materialize.min.js"></script>
    <script src="/datatables.min.js"></script>
    <script src="/mainApp.js"></script>

</body>
</html>

主程序.js

var initialized = false;

$(document).ready(() => {
    
    $('#button').click(() => {
        $('#modal-bom').modal({
            onOpenEnd: () => {
                $('#table').DataTable().ajax.reload(() => {
                    $('#table').DataTable().columns.adjust();
                    $('#table').DataTable().responsive.recalc();
                });
            },
        });
        $('#modal-bom').modal('open');
    });

    $('#table').DataTable({
        ajax: (dataToSend, callback) => {
            loadData().then((dataReceived) => {
                callback(dataReceived);
            });
        },
        columns: [
            { data: 'position' },
            { data: 'code' },
            { data: 'description' },
            { data: 'qty' }
        ],
        initComplete: () => initialized = true 
    });
});

function loadData() {
    return new Promise((resolve) => {
        if (!initialized) {
            resolve({ data: {} });
        }
        else {
            $.ajax({
                url: 'http://127.0.0.1:5500/data.txt',
                method: "GET",
                dataType: 'json',
                success: json => resolve({ data: json.data })
            });
        }
    });
}

數據.txt

{"data": [
    {
        "level": 0,
        "position": "1",
        "code": "ART001",
        "description": "Article one description",
        "qty": "1"
    },
    {
        "level": 1,
        "position": "1.1",
        "code": "ART002",
        "description": "Article two description",
        "qty": "10"
    },
    {
        "level": 1,
        "position": "1.2",
        "code": "ART003",
        "description": "Article three description",
        "qty": "1"
    },
    {
        "level": 2,
        "position": "1.2.1",
        "code": "ART004",
        "description": "Article four description",
        "qty": "2"
    },
    {
        "level": 2,
        "position": "1.2.2",
        "code": "ART005",
        "description": "Article five description",
        "qty": "15"
    },
    {
        "level": 3,
        "position": "1.2.2.1",
        "code": "ART006",
        "description": "Article six description",
        "qty": "5"
    },
    {
        "level": 2,
        "position": "1.2.3",
        "code": "ART007",
        "description": "Article seven description",
        "qty": "4"
    },
    {
        "level": 1,
        "position": "1.3",
        "code": "ART008",
        "description": "Article eight description",
        "qty": "1"
    }
]}

我還應該嘗試什么？ 感謝您的任何幫助

Answer 1

在您的onOpenEnd選項中，而不是

$('#table').DataTable().columns.adjust();

嘗試

$('#table1').DataTable().columns.adjust().draw();

這就是讓我的表格在打開模式時重新繪制其列的原因。

Answer 2

下面的代碼將檢測Bootstrap 模態並調整表格。

$('#modal-id').on('shown.bs.modal', function () {
   var table = $('#table-id').DataTable();
   table.columns.adjust();

   //// if the above code is not working set width:100% to a table

   $('.dataTables_scrollHeadInner, .dataTable').css({'width':'100%'})
});

調整jQuery數據表的列

問題描述

index.html

主程序.js

數據.txt

2 個解決方案

解決方案1
0 2020-05-03 17:58:01

解決方案2
0 2022-09-29 04:22:27

調整jQuery數據表的列

問題描述

index.html

主程序.js

數據.txt

2 個解決方案

解決方案1 0 2020-05-03 17:58:01

解決方案2 0 2022-09-29 04:22:27

解決方案1
0 2020-05-03 17:58:01

解決方案2
0 2022-09-29 04:22:27