调整jQuery数据表的列

Question

I know this was already asked but I still cannot sort it out.我知道这已经被问过了，但我仍然无法解决。 Due to app architecture, I have a datatable inside a modal.由于应用程序架构，我在模态中有一个数据表。 This datatable is initialized once at page load (with no data), put inside the modal in the DOM, which is hidden, with no width and height.这个数据表在页面加载时初始化一次（没有数据），放在 DOM 的模式中，它是隐藏的，没有宽度和高度。 Every time the modal is opened, the underlying data are reloaded with每次打开模式时，底层数据都会重新加载

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

The problem is that, when opening the modal, the columns layout is not right.问题是，打开模式时，列布局不正确。 The columns are thin and they don't take all the space of the modal.列很细，它们不会占用模态的所有空间。

I read that I should call我读到我应该打电话

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

to re-adjust columns width, but nothing happens.重新调整列宽，但没有任何反应。

index.html 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>

mainApp.js主程序.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 })
            });
        }
    });
}

data.txt数据.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"
    }
]}

What else should I try?我还应该尝试什么？ Thank you for any help感谢您的任何帮助

Answer 1

Inside your onOpenEnd option, instead of在您的onOpenEnd选项中，而不是

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

Try尝试

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

This was what allowed my tables to redraw its columns whenever the modal is opened.这就是让我的表格在打开模式时重新绘制其列的原因。

Answer 2

This code below will detect Bootstrap modal and adjust the table.下面的代码将检测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 index.html

mainApp.js主程序.js

data.txt数据.txt

2 个解决方案

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

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

调整jQuery数据表的列

问题描述

index.html index.html

mainApp.js主程序.js

data.txt数据.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