Datatables: проблема с отображением значка шрифта в заголовке в новой строке - PullRequest
Новая
       17

Datatables: проблема с отображением значка шрифта в заголовке в новой строке

0 голосов
/ 06 апреля 2020

Я создаю администраторский просмотр информации о пользователе на веб-сайте. С этой точки зрения я хочу, чтобы администратор мог редактировать определенные столбцы из определенных таблиц, но не все столбцы. Чтобы указать, какие столбцы доступны для редактирования, я использую значок со шрифтом, чтобы показать, что этот столбец доступен для редактирования. JS будет применено, чтобы затем разрешить администратору делать любое редактирование. Тем не менее, я застрял с форматированием просто не работает, как ожидалось. Он продолжает отображать значок в новой строке, создавая некрасивую таблицу, как показано здесь:

enter image description here

HTML
Я пробовал несколько способов загрузить таблицу, чтобы она отображалась правильно, но ничего из того, что я пробовал, не сработало. HTML загружается через веточку, полученную из вызова AJAX: 

<table class="user-members-data">
    <thead>
        <tr>
            {% for key in user_details|keys %}
                <th>{{ key }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        <tr>
            {% for value in user_details %}
                <td>{{ value }}</td>
            {% endfor %}
        </tr>
    </tbody>
</table>

jQuery
При возврате Datatable инициализируется, но перед инициализацией значки редактирования добавляются в соответствующие заголовки столбцов. Редактируемые столбцы возвращаются в виде отдельного массива json_encoded, который проверяется по (jquery_data.editable_columns): 

$( 'table.user-members-data thead th' ).each( function(){
    var header = $( this ).html()

    if( jQuery.inArray( header, response.jquery_data.editable_columns ) !== -1 ){
        $( this ).html( header + ' <i class="fas fa-pencil-alt" edit="' + header + '"></i>' )
    }
})
$( 'table.user-members-data' ).DataTable( {
    'scrollX'  : true,
    'ordering' : false,
    'paging'   : false,
    'info'     : false,
    'searching': false
} )

Загрузить значок через HTML
В качестве альтернативы я настроил веточку чтобы включить значок редактирования и загрузить таблицу данных без jQuery без добавления значков: 

{% for key in user_details.table|keys %}
    <th>
        {{ key }}
        {% if key in user_details.editable_columns %}
            <i class="fas fa-pencil-alt" edit="{{ key }}"></i>
        {% endif %}
    </th>
{% endfor %}

Это привело к точно такой же проблеме с новыми строками.

столбцов. Adjust ()
В других местах я видел совет использовать это после отрисовки Datatables, чтобы исправить любые проблемы ширины. У меня это тоже не сработало.

Такое ощущение, что Datatable просто не видит значок при настройке ширины столбца?

1 Ответ

1 голос
/ 06 апреля 2020

Спасибо andrewjames за указание пути в комментариях.

Решение было заключено в переносе заголовка в промежуток с добавлением display:block; и white-space:no-wrap; в качестве стиля. 

$( 'table.user-members-data thead th' ).each( function(){
    var header = $( this ).html()

    if( jQuery.inArray( header, response.jquery_data.editable_columns ) !== -1 ){
        $( this ).html( '<span style="display:block; white-space:nowrap;">' + header + ' <i class="fas fa-pencil-alt" edit="' + header + '"></i></span>' )
    }
})
...