调整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