Проблема ширины столбца с данными после «обновления» данных строки - PullRequest
Новая
       25

Проблема ширины столбца с данными после «обновления» данных строки

0 голосов
/ 21 апреля 2019

В настоящее время я использую datatable для создания таблицы ниже:

enter image description here

Я доволен результатом, так как ширина каждого столбца вычисляетсяавтоматически, в результате 1 строка на строку, выглядит потрясающе.Таблица выше генерируется через API с использованием простого кода ниже: 

var dataTable;

// This is the button with text "Filter" as shown in screenshot
$('#search').click(function(e) {
    e.preventDefault();

    if (dataTable) {
        dataTable.clear();
        dataTable.destroy();
    }

    $.ajax({ 
        type : "GET", 
        url : contextPath + "/api/company/list", 
        contentType : "application/json;charset=utf-8", 
        data : { token : token(), name: $('#name').val() }, 
        success : function(data) {
            if (data) {
                var tag = '';

                for (var i = 0; i < data.length; i++) {
                    var c = data[i];

                    tag += '<tr>' 
                        + '<td>' + (i + 1) + '</td>' 
                        + '<td>' + c.name + '</td>' 
                        + '<td>' + c.registrationNumber + '</td>' 
                        + '<td>' + c.createdTime + '</td>'
                        + '<td>'
                        + ' <a href="' + contextPath + '/company?id=' + c.id + '" target="_blank"><i class="fa fa-fw fa-search text-info"></i></a>'
                        + ' <a href="' + contextPath + '/company/update?id=' + c.id + '"><i class="fa fa-fw fa-edit text-warning"></i></a>' 
                        + '</td>'
                        + '</tr>';
                }

                $('#tableBody').html(tag);
                dataTable = $('#tableBody').parent().DataTable();
            } else {
                alert("Oops, there's an error! Please reload the page");
            }
        }, error : function(xhr) {
            alert("Oops, there's an error! Please reload the page");
            console.log(xhr);
        }
    });
});

Фрагмент таблицы html: 

<div class="card-body">
    <div class="table-responsive">
        <table class="table data-table">
            <thead class=" text-primary">
                <th>#</th>
                <th>Name</th>
                <th>Registration Number</th>
                <th>Date Created</th>
                <th></th>
            </thead>
            <tbody id="tableBody">

            </tbody>
        </table>
    </div>
</div>

Однако проблема возникает, когда я нажимаю кнопку фильтра и сновазапустите ту же функцию onClick, столбец таблицы будет как-то изменен и выглядит следующим образом:

enter image description here

Ширина каждого столбца изменяется, в результате чего получается 3 строки в строкепоследующие нажатия на кнопку «Фильтр» останутся в этом формате.Кто-нибудь знает, как избежать этого пересчета ширины столбца?

1 Ответ

0 голосов
/ 24 апреля 2019

Очевидно, это происходит потому, что таблицы данных присваивают атрибут ширины всем th.

Добавление свойства autoWidth false предотвращает это. 

$('#tableBody').parent().DataTable({"autoWidth": false});

И вычисление ширины затем автоматизируется веб-браузером (например, chrome)

...