Стиль моей таблицы меняется, когда я добавляю несколько динамических строк - DataTables - PullRequest
0 голосов
/ 27 марта 2020

Я работаю с этим примером из DataTables и когда я копирую их пример в свой проект (со всеми внешними файлами css, js и т. Д. c), это работает отлично.

Но когда я пытаюсь изменить его, по моей собственной информации, это терпит неудачу.

Единственное различие между ними и мной, это то, что они имеют всю информацию таблицы объявленный в файле html, мы можем сказать, что это информация о состоянии c. И в моем случае информация может измениться, и я должен использовать javascript, чтобы объявить ее.

Ниже вы можете увидеть изображение того, как выглядит их таблица, но мой номер нет.

enter image description here

Ниже я показываю свой код,

Html:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static '/css/jquery.dataTables.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/data.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/tables.css' %}">
<!-- JS -->
<script src="{% static '/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static '/js/data.js' %}"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <table id="example" class="display nowrap">
                <thead>
                    <tr>
                        <th>First name</th>
                        <th>Last name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Jonas</td>
                        <td>Alexander</td>
                        <td>Developer</td>
                        <td>San Francisco</td>
                        <td>30</td>
                        <td>2010/07/14</td>
                        <td>$86,500</td>
                        <td>8196</td>
                        <td>j.alexander@datatables.net</td>
                        <td>Jonas</td>
                        <td>Alexander</td>
                        <td>Developer</td>
                        <td>San Francisco</td>
                    </tr>
                    <tr>
                        <td>Shad</td>
                        <td>Decker</td>
                        <td>Regional Director</td>
                        <td>Edinburgh</td>
                        <td>51</td>
                        <td>2008/11/13</td>
                        <td>$183,000</td>
                        <td>6373</td>
                        <td>s.decker@datatables.net</td>
                        <td>Jonas</td>
                        <td>Alexander</td>
                        <td>Developer</td>
                        <td>San Francisco</td>
                    </tr>
                    <tr>
                        <td>Michael</td>
                        <td>Bruce</td>
                        <td>Javascript Developer</td>
                        <td>Singapore</td>
                        <td>29</td>
                        <td>2011/06/27</td>
                        <td>$183,000</td>
                        <td>5384</td>
                        <td>m.bruce@datatables.net</td>
                        <td>Jonas</td>
                        <td>Alexander</td>
                        <td>Developer</td>
                        <td>San Francisco</td>
                    </tr>
                    <tr>
                        <td>Donna</td>
                        <td>Snider</td>
                        <td>Customer Support</td>
                        <td>New York</td>
                        <td>27</td>
                        <td>2011/01/25</td>
                        <td>$112,000</td>
                        <td>4226</td>
                        <td>d.snider@datatables.net</td>
                        <td>Jonas</td>
                        <td>Alexander</td>
                        <td>Developer</td>
                        <td>San Francisco</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<p>********************************</p>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <table id="example" class="display nowrap">
                <thead>
                    <tr id="cols_table"></tr>
                </thead>
                <tbody id="body_table">
                </tbody>
            </table>
        </div>
    </div>
</div>

Css:

div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
}

JQuery:

function showData(){
    var csrftoken = $("[name=csrfmiddlewaretoken]").val();
    var select = 1;
    $.ajax({
        url: '/../../../data_app/show_data/',
        type: 'POST',
        headers:{"X-CSRFToken": csrftoken},
        data: {
            'Select': select,
        },
        dataType: "json",
        cache: true,
        success: function(response) {
            cols = response.Cols;
            data = response.Data;
            printColsTable(cols);
            printDataTable(data);
        }
    });
}
function printColsTable(cols){
    console.log('Imprimo columnas');
    for (let i = 0; i < cols.length; i++) {
        $("#cols_table").append('<th scope="col">'+cols[i]+'</th>');
    }
}
function printDataTable(data){
    console.log('Imprimo datos');
    for (let i = 0; i < data.length; i++) {
        var id_tr = "dataRow" + String(i);
        $("#body_table").append('<tr id="'+id_tr+'"></tr>');
        for (let j = 0; j < data[i].length; j++) {
            //console.log(data[i][j]);
            $("#"+id_tr).append('<td>'+data[i][j]+'</td>');
        }
    }
}

function tablas(){
    $('#example').DataTable( {
        scrollY: '30vh',
        scrollX: true,
        paging: true,
        info: true
    } );
}

// MAIN
$(document).ready(function(){
    showData();

    tablas()
});

Как видите, единственными изменениями являются:

  • Я удалил все их данные c info.

  • Я добавил идентификаторы cols_table и body_table, просто для работы с моим js .

Дайте мне ощущение, что проблема в том, что мне нужно перезагрузить его зависимости снова. Для этого я попытался загрузить их разные файлы в конце, а не в начале, но видимых изменений нет.

Может кто-нибудь мне помочь? Большое спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...