Плагин jQuery DataTables не отображает ВСЕ указанные столбцы

Я использую подключаемый модуль jquery DataTables для отображения данных на странице .cfm (coldfusion). Все работает, ЗА ИСКЛЮЧЕНИЕМ DataTables автоматически обрезает столбцы (в настоящее время отображает только 5 из моих столбцов) и автоматически создает кнопку «плюс» (+) рядом со значением в первом столбце, которая при нажатии превращается в знак «минус», а остальные столбцы становятся отображается под текущей строкой!

Я проверил документацию DataTables, но это действительно сбивает с толку, и после попытки (больше похоже на то, чтобы взорвать его) несколько предложенных там способов, я застрял. Как мне отобразить ВСЕ столбцы в таблице вместо того, чтобы позволить DataTables контролировать количество видимых столбцов и количество скрытых столбцов?

Моя таблица html выглядит следующим образом:

<table id = "idsTbl" class = "table table-striped table-bordered" cellspacing = "0" 
width = "100%">
        <thead>

          <tr>
            <th>PRIMARY/FIRST ID</th>
            <th>SECOND ID</th>
            <th>PUBLISHING CO TYPE</th>
            <th>PUBLISHING COMPANY NAME</th>
            <th>PUBLISHING STATE</th>
            <th>PUBLISHING DATE</th>
            <th>PUB CREATED DATE</th>
            <th>OTHER DATE</th>
            <th>USER CREDENTIALS</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
             <th>PRIMARY/FIRST ID</th>
            <th>SECOND ID</th>
            <th>PUBLISHING CO TYPE</th>
            <th>PUBLISHING COMPANY NAME</th>
            <th>PUBLISHING STATE</th>
            <th>PUBLISHING DATE</th>
            <th>PUB CREATED DATE</th>
            <th>OTHER DATE</th>
            <th>USER CREDENTIALS</th>
          </tr>
        </tfoot>
        <tbody>
        </tbody>
      </table>

JavaScript для плагина DataTables выглядит следующим образом:

    $(document).ready(function () {

 $.ajax({
    type: "GET",
    url: "https://xxx.xxxxxx.xxxx.xx.php?method=ids",
    dataType: "json",
    cache: false,
    success: function (response) {
        if (response.length != 0) {
            //Footer section search capability
            $('#idsTbl tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type = "text" placeholder = "' + title + '" 
  />');
            });
            // /Footer section search capability
 var returnedIds = $("#idsTbl").DataTable({
                data: response,
                columns: [{
                        data: 'ID',

                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            var linkedId = '<a data-toggle = "modal" data- target = "#myModal" data-backdrop = "static" data-keyboard = "false" href = "#myModal" data-action = "upd" data-id = "' + oData.ID + '">' + oData.ID + '</a>';

                            $(nTd).html(linkedId );
                        }
                    },
                    {
                        data: 'ID2'
                    },
                    {
                        data: 'TYPE'
                    },
                    {
                        data: 'NAME'
                    },
                    {
                        data: 'CO_NAME'
                    },
                    {
                        data: 'STATE'
                    },
                    {
                        data: 'PUB_DATE' 
                    },
                    {
                        data: 'MADE_DT',
                        "defaultContent": "N/A"
                    },
                    {
                        data: 'USER_ID',
                        "defaultContent": "N/A"
                    },
                ],
                responsive: true,
                order: [0, 'asc'] 
            });

            // Apply the footer search
            idsTbl.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
            // /Apply the footer search

        } else {
            console.info("There was no response from server!");
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.info("An Ajax server error was returned");
        console.info(XMLHttpRequest);
        console.info(textStatus);
        console.info(errorThrown);
    }
 });
 });

Примечание. В настоящее время таблица обрывается на «СОСТОЯНИЕ ПУБЛИКАЦИИ», с «ДАТА ПУБЛИКАЦИИ» и те, которые находятся после нее, отображаются в расширяемом разделе, который отображается при нажатии на знак плюса (+) рядом с данными в первом столбце. Кроме того, если я изменю параметр responseive: true на responseive: false, будут отображаться все столбцы. НО я не хочу терять отзывчивый характер моей веб-страницы, чтобы отображать все столбцы. Пожалуйста, предложите жизнеспособное решение.

Пожалуйста, посмотрите на этот DataTable реагирует на отображение определенных столбцов, который позволяет вам решать, какие столбцы вы хотите отображать всегда, а также скрывать столбцы и показывать их, когда datatable находится в адаптивном состоянии. Вам просто нужно нанести class controls на th таблицы.

mmushtaq 28.06.2018 09:10
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
1
1 958
1

Ответы 1

Вам необходимо удалить или установить значение false для свойства responseive в ваших конфигурациях.
Адаптивная документация JQuery Datatables

Responsive:false

Следуя этой концепции для BS4:

<div class = "table-responsive"> <table class = "table"> ... </table> </div>

Адаптивные таблицы BS4

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

Roger Dodger 27.06.2018 21:21

Вы используете бутстрап?

Ivan-San 27.06.2018 21:41

Да - с помощью bootstrap 4.

Roger Dodger 27.06.2018 21:42

Попробуйте следовать стилю отзывчивые таблицы для начальной загрузки 4. <div class = "table-responsive"> <table class = "table"> ... </table> </div>

Ivan-San 27.06.2018 21:45

Пытался, но не сделал его отзывчивым (при изменении размера окна до размера телефона страница не реагировала). Это то, что я добавил в свой существующий html: <div class = "container table-responseive"> <table>........</table> </div>

Roger Dodger 27.06.2018 21:51

Если вы добавите класс, отвечающий за таблицу, в тег таблицы? Единственные решения, которые я могу сейчас придумать, - это добавить свойство стиля overflow: scroll, чтобы оно могло прокручиваться в меньших представлениях.

Ivan-San 27.06.2018 21:56

Другие вопросы по теме