[Помогите] Интеграция в статьи Opencart таблиц с данными от DataTables

Всем привет.
Появилась потребность в статьях opencart'a (да и не только в статьях, но и в любом произвольном месте) добавить таблицы с данными. Здесь же возникло несколько пожеланий к самим таблицам - из за того, что табличка получается слишком длинной, то возникло соответствующее желание сделать ее более удобной, а это или прокрутка самой таблицы внутри страницы, или отображение таблицы "постранично", так же немаловажна адаптивность таблицы, а то получается, если в таблице много колонок, то при просмотре с мобильника часть таблицы "скрыта", так как не помещается полностью по ширине.
Погуглив по разным вариантам таблиц и опробовав их пришел к заключению, что ни один из них меня не устраивает. Погуглив еще нашел готовое решение полностью отвечающее моим требованием и даже больше, потому что в этой таблице есть не только адаптивность и постраничная навигация внутри таблицы, но так же есть поиск и возможность сортировки!!!
Ну а теперь сам вопрос / просьба - помогите разобраться как ее правильно интегрировать к себе на сайт на основе опенкарта.
Сама табличка здесь, с информацией что да как (но я туплю и никак не разберусь что надо сделать )

ну а то, что хочу привести к такому виду находится здесь (очень длинная таблица и при этом еще не вся, будет дополняться)

Да, еще есть вот такой код, код плагина поиска по таблице (если он нужен)

Код:

<script type="text/javascript">
(function($){
    $.fn.tableSearch = function(options){
        if(!$(this).is('table')){
            return;
        }
        var tableObj = $(this),
            searchText = (options.searchText)?options.searchText:'Найти: ',
            searchPlaceHolder = (options.searchPlaceHolder)?options.searchPlaceHolder:'',
            divObj = $('<div>'+searchText+'</div><br /><br />'),
            inputObj = $('<input type="text" placeholder="'+searchPlaceHolder+'" />'),
            caseSensitive = (options.caseSensitive===true)?true:false,
            searchFieldVal = '',
            pattern = '';
        inputObj.off('keyup').on('keyup', function(){
            searchFieldVal = $(this).val();
            pattern = (caseSensitive)?RegExp(searchFieldVal):RegExp(searchFieldVal, 'i');
            tableObj.find('tbody tr').hide().each(function(){
                var currentRow = $(this);
                currentRow.find('td').each(function(){
                    if(pattern.test($(this).html())){
                        currentRow.show();
                        return false;
                    }
                });
            });
        });
        tableObj.before(divObj.append(inputObj));
        return tableObj;
    }
}(jQuery));
$(document).ready(function(){
   $('table.search-table').tableSearch({
     searchText:'Поиск ',
     searchPlaceHolder:'Найти...'
    });
});

</script>

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

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

 

А сами данные откуда берутся?

Если есть статичная таблица в тексте (вручную созданная через визуальный редактор в админке), то достаточно должно быть кода, который там в самом начале:

Код:

$(document).ready(function(){
    $('#myTable').DataTable();
});

 

Взял пример с этой страницы

взял демо данные, со вкладки HTML, из приведенной выше страницы
а вот куда и как этот код воткнуть правильно не пойму

Код:

$(document).ready(function(){
    $('#myTable').DataTable();
});

-----------UP-------------
с кодом разобрался, обернул в тег <sсriрt> и поместил в статью, перед самой таблицей

 

апну темку
В общем с таблицей разобрался, но не до конца.
Табличка не получается адаптивной как в примере.
сейчас с мобильника выглядит так http://joxi.ru/V2VKzbNcx0O1nA и если добавить пару колонок, то часть данных не помещается и выходит за видимую часть экрана
у них же таблица принимает вот такой вид http://joxi.ru/DrlVJg8Fv46MN2 здесь ее можно в живую пощупать

и сравнить с моей

если посмотреть исходный код в их примере, то там подгружаются другие стили

но если я их то же начинаю подгружать, то вся верстка слетает.
Что упустил?

 

Хоть тут и обёрнут код вызова скрипта в $(document).ready, но лучше привыкнуть к правилу, что любой инлайн js должен идти после html кода, с которым он будет работать, а ещё лучше вообще перед </body>.

Надо смотреть с подключёнными стилями. Сами по себе стили в этом файле не должны были бы зацепить что-то вне таблицы.

 

Все отлично!
Опишу какие еще возникли проблемы, может кому пригодится.
В конструкторе, в начале указал с использованием jQuery (не спрашивайте зачем ), а в самом конце указал что нужен локальный фал. И в итоге получил архив с несколькими папками и с кучей файлов.
Чтобы со всем этим добром не заморачиваться, переключил последний пункт на CDN и по полученным ссылкам (пример http://joxi.ru/Y2L0Nz3S9n0xV2) скачал 2 файла css и js, удаленно подключать их не стал, так как надо было поправить немного стили под себя и сделать перевод некоторых элементов таблицы.
Из-за использования jQuery частично перестали работать некоторые активные элементы - не стало раскрываться боковое меню и в симпле, на стадии оформления заказа перестали работать кнопки увеличения/уменьшения количества товара в корзине, так что пришлось от jQuery отказаться, после этого все заработало как надо.
Пример, как работает у меня, можете глянуть здесь

Код

Код:

$('#example').dataTable( {
        responsive: true
} );

вставляю на самой странице, так как для разных таблиц идут разные параметры.
В моем примере использован код

Код:

<script>$(document).ready(function() {
    $('#example').DataTable({
      responsive: true,
        iDisplayLength: 6
    });
});</script>

адаптивная таблица с показом 6 строк (по умолчанию идет 10 строк), остальные параметры, что можно использовать при работе с таблицами можно просмотреть (с примерами) на этой странице

 

Скачать архив и загрузить файлы скрипта и стилей на сервер.
Подключить их или на всех страницах сайта (в шаблоне), или на отдельных страницах, где он нужен.
у меня такой код и соответственно путь к файлам:

PHP:

<link href="catalog/view/javascript/jquery/datatables/datatables.min.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="catalog/view/javascript/jquery/datatables/datatables.min.js"></script><script>$(document).ready(function() {
    $('#KEY1').DataTable({
      responsive: true,
        iDisplayLength: 10,
       order: [[ 0, "asc" ]]
    });
});</script>

вставляю внутри статей
Обрати на ключ KEY1 и на параметры под ним - можно добавить множество разных таблиц с разными параметрами на одной странице (подробнее о всех параметрах можно почитать на оф сайте https://datatables.net )
datatables.min.js - сам скрипт
datatables.min.css - стили таблицы
И дальше идет сама таблица:

PHP:

<table cellspacing="0" class="display" id="KEY1" width="99%">
    <thead>
        <tr>
            <th><span style="font-weight: 400;">Наименование 1 столбца</span></th>
            <th><span style="font-weight: 400;">Наименование 2 столбца</span></th>
            <th><span style="font-weight: 400;">Наименование 3 столбца</span></th>
            <th><span style="font-weight: 400;">Наименование 4 столбца</span></th>
            <th><span style="font-weight: 400;">Наименование 5 столбца</span></th>
        </tr>
    </thead>
    <tfoot>
    </tfoot>
    <tbody>
        <tr>
            <td>Данные 1 столбца</td>
            <td>Данные 2 столбца</td>
            <td>Данные 3 столбца</td>
            <td>Данные 4 столбца</td>
            <td>Данные 5 столбца</td>
        </tr>
        <tr>
            <td>Данные 1 столбца</td>
            <td>Данные 2 столбца</td>
            <td>Данные 3 столбца</td>
            <td>Данные 4 столбца</td>
            <td>Данные 5 столбца</td>
        </tr>
    </tbody>
</table>

Данные из базы не выдергивал, так как нет необходимости, таблица используется для других целей (в основном справочных)
пример здесь "Справочная таблица"

 

Ты в начале попробуй, а потом вопросы задавай, если не получится. Постом выше уже все "разжевал" дальше некуда. Я тоже не программист, но понемногу нахватался именно здесь, на форуме.
Добавляю тупо копированием этой части

PHP:

<tr>
         <td>Данные 1 столбца</td>
         <td>Данные 2 столбца</td>
         <td>Данные 3 столбца</td>
         <td>Данные 4 столбца</td>
         <td>Данные 5 столбца</td>
     </tr>

и меняю данные, так как данные собираются, анализируются и проверяются с разных сайтов, то делаю все вручную. Визуальный редактор отключаю или делаю в блокноте.