Как исправить пользовательский интерфейс BS DataTable при добавлении / добавлении строк с использованием шаблонов усов - PullRequest
Новая
       8

Как исправить пользовательский интерфейс BS DataTable при добавлении / добавлении строк с использованием шаблонов усов

0 голосов
/ 02 октября 2018

Я использую шаблоны усов для добавления строки в мой bs_datatable после успешной отправки с использованием ajax.Но проблема в том, что пользовательский интерфейс данных разрушается после добавления.Я попытался перерисовать данные с помощью .draw (), но вновь добавленная строка теперь не будет отображаться.Что я делаю неправильно?Или мне для этого нужно использовать усы?

Вот мои коды:

html: 

<div class="row mt10">
    <div class="col-12">
        <table id="data_table" class="table nowrap table-striped table-bordered">
            <thead>
            <tr role="row">
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
            </thead>
            <tbody id="data_table_row_cont">
            {% for item in data %}
            <tr role="row">
                <td>{{item.column_1}}</td>
                <td>{{item.column_2}}</td>
                <td>{{item.column_3}}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

//mustache template
<script type="text/template" id="mustache_row_content">
    <tr role="row">
        <td>{{item.column_1}}</td>
        <td>{{item.column_2}}</td>
        <td>{{item.column_3}}</td>
    </tr>
</script>

script: 

datatable = $('#data_table').DataTable({
    responsive: true,
    info: false,
    paging: false,
    scrollCollapse: true,
    "ordering": true,
    searching: false,
});


$("#form").submit(function(e){
    e.preventDefault();

    jQuery.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response){

            if(response.success){
                //get mustache template (row template)
                var template = $("#mustache_row_content").html();

                //assigning values to mustache template
                var html = Mustache.to_html(template, {'item': response.data});

                //prepending the row template to datatable's tbody
                $('#data_table_row_cont').prepend(html);

                datatable.draw();
            }
        }
    });
});
...