Datatable header width not adjusted inside modal, but adjusted itself when resizing window

arginaf

Im encountered problem that table header width not adjusted with its column until its adjust itself after I resizing window. When I use table.columns.adjust(); i got "Uncaught TypeError: h[0] is undefined". Anyone know how to fix this? Thanks

var table = $('#modal-table').removeAttr('width').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('MeisouJp.getPersonalManagementData') !!}',
            dom: "tp",
            paging: true,
            deferRender: true,
            fixedColumns: true,
            scrollX: true,
            pageLength: 5,
            search: {
                return: true,
            },
            columnDefs:[
                { 
                    width: 100, targets: 0
                }
            ],
            "rowCallback": function( row, data, index ) {
                if(index % 2 == 0){
                    $(row).removeClass('myodd myeven');
                    $(row).addClass('myodd');
                }else{
                    $(row).removeClass('myodd myeven');
                    $(row).addClass('myeven');
                }
            },
            language: {
                url: 'http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json'
            },
            columns: [
                { 
                    data: 'c_intern_name_jp', 
                    name: 'c_intern_name_jp' 
                },
                { 
                    data: 'c_control_number', 
                    name: 'c_control_number' 
                },
                {
                    data: null,
                    bSortable: false,
                    render: {
                        display: function(data) {
                            return (
                                '<button type="button" class="bg-[#083aa9] text-white ml-1 font-semibold w-12 h-8 rounded-md confirmBtn">選ぶ</button>'
                            );
                        },
                    },
                }
            ],
            initComplete: function() {

                $("#modal-search-btn").on('click', function(){
                    table.search($("#modal-search").val()).draw();
                });

                $('#modal-table tbody').on('click', '.confirmBtn', function() {
                    intern_id = table.row($(this).closest('tr')).data()["c_t100_id"];
                    intern_name = table.row($(this).closest('tr')).data()["c_intern_name_jp"];
                    comp_id = table.row($(this).closest('tr')).data()["c_t300_id"];

                    var url = "{{route('MeisouJp.getCompanyDataForPersonal', ':data')}}";
                    url = url.replace(":data", comp_id);
                    $.ajax({
                        type: "GET",
                        url: url,
                        data: $(this).serializeArray(),
                        success: function (data) {
                            $("#comp_name").val(data["c_company_name_jp"]);
                            
                        }
                    });

                    $("#intern_id").val(intern_id);
                    $("#intern_name").val(intern_name);
                    $("#modal-search").val('');
                    $("#overlay").toggleClass('hidden');
                    $("#overlay").toggleClass('flex');
                });
            },
        });

        table.columns.adjust();

arginaf

Here's the modal code

<div>
            <div class="bg-black bg-opacity-50 absolute inset-0 hidden justify-center items-center" id="overlay">
                <div class="bg-white w-auto lg:w-1/3 h-auto py-2 px-3 rounded shadow-xl text-gray-800">
                    <div>
                        <div class="flex justify-end" id="close-modal">
                            <svg class="h-6 w-6 cursor-pointer p-1 hover:bg-gray-300 rounded-full" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <h4 class="text-2xl font-bold mt-6 flex justify-center">個人リスト</h4>
                    </div>

                    <div class="flex flex-row justify-center pt-3 space-x-3">
                        <input id="modal-search" type="text" class="w-1/2 rounded-lg px-7 hover:bg-[#f8ffec] border-[#5eb300]" placeholder="会社名">
                        <button id="modal-search-btn" class="bg-[#083aa9] hover:bg-[#074fe9] text-white font-semibold w-20 h-8 rounded-md my-auto"><i class="bi bi-search"></i>検索</button>
                    </div>
                                    
                    <div class="mt-10 overflow-hidden rounded border-b border-gray-200">
                        <table id="modal-table" class="min-w-full">
                            <thead class="bg-[#f7d08a] text-black">
                                <tr>
                                    <th class="text-center py-3 px-4 uppercase font-bold text-xl nowrap">氏名</th>    
                                    <th class="text-center py-3 px-4 uppercase font-bold text-xl nowrap">管理番号</th>
                                    <th class="nowrap"></th>
                                </tr>
                            </thead>
                            <tbody class="text-black">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

kthorngren

Looks like you are using table.columns.adjust(); right after the Datatables initialization. Using ajax is asynchronous so the table hasn't been initialized when table.columns.adjust(); is executed. Likely why you are getting the exception.

Use columns.adjust() after the modal has become visible. This example uses Bootstrap tabs but note that columns.adjust() is called in an event handler that runs after the tab is made visible. Do the same except use an appropriate event for the modal.

Kevin