Борьба с положением общей строки в нижней части таблицы DataTables

Question

Я пытался опубликовать на своем форуме последние две недели, но мои сообщения или темы никогда не показываются.

Я создаю таблицу как HTML со стороны сервера, прежде чем преобразовывать ее в DataTable. Общее количество обработанных серверов (так как это не так просто, как просто добавить их все, есть средние и всевозможные). Here's the original table. Как вы можете видеть, строка Total упорядочена в таблице, как и любая другая строка.

Я попытался поместить общую строку в нижний колонтитул, но это приводит к тому, что горизонтальная полоса прокрутки находится между данными и общей строкой. See this example. Это связано с тем, что горизонтальная полоса прокрутки применяется к таблице тел. Нижний колонтитул является частью собственной таблицы из-за того, как работает FixedColumns ... Я попытался вручную восстановить эффект, отключив горизонтальную полосу прокрутки в конструкторе DataTables и обернув его в фиксированную ширину div ... Он работал, но FixedColumns didn ' t, поскольку для этого требуется установить ширину прокрутки ...

Я попытался перестроить таблицу с помощью jQuery во время обратного вызова обратного вызова DataTable, но FixedColumns делает такой беспорядок HTML, который я не мог сделать он (есть около 4 таблиц, все из которых содержат divs, все со скрытыми/разделенными заголовками/bodys/footers только для одной таблицы). Я не буду публиковать код, поскольку он не был функциональным, но он включал в себя пометку строки с классом, поиск указанной строки, клонирование, удаление оригинала, а затем добавление клонированной строки на дно тела. Даже если это сработает, это тоже сломает форматирование, так как нечетные/четные строки сдвинуты, чтобы быть рядом друг с другом =/

Я попытался написать свою собственную функцию сортировки, чтобы всегда ставить Total внизу, но она работала только при сортировке по имени (поскольку это был единственный раз, когда я имел доступ к словам «total», поскольку у него есть только данные для этого столбца).

Я чувствую, что я собираюсь сделать это совершенно неправильно, так как наверняка кому-то нужна общая строка на стороне сервера, прежде чем ... Все примеры, которые я могу найти, не используют FixedColumn.

Answer 1

Я установил это, используя довольно Hacky кусок JQuery. Во-первых, нарисуйте общую строку в нижнем колонтитуле, а затем добавьте ее как fnDrawCallback конструктора FrozenColumns. Где #datatable_wrapper соответствует идентификатору идентификатора вашей таблицы.

var totalLabel= jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").clone(); 
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").hide(); 
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftBodyWrapper table tbody").append(jQuery(totalLabel).html()); 

var totalData = jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").clone(); 
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").hide();  
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollBody table tbody").append(jQuery(totalData).html()); 

A working example can be found here.

Answer 2

Пусть #container сделать прокрутку вместо

Смотреть это http://live.datatables.net/utacup/edit#javascript,html

1 - удалить "sScrollX" : "100%" из dataTable() инициализации

2 - добавить это <style>:

#container { 
    overflow-x: scroll; 
    width: 400px; 
    max-width: 400px; 
} 

скриншот