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

Тема в разделе "OpenCart", создана пользователем Zulus, 21 ноя 2016.

  1. Zulus

    Zulus Команда форума

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

    Да, еще есть вот такой код, код плагина поиска по таблице (если он нужен)
    Код:
    <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 можно во многом повысить функциональность и удобство сайта.
     
    Последнее редактирование: 21 ноя 2016
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    А сами данные откуда берутся?

    Если есть статичная таблица в тексте (вручную созданная через визуальный редактор в админке), то достаточно должно быть кода, который там в самом начале:
    Код:
    $(document).ready(function(){
        $('#myTable').DataTable();
    });
    
     
  3. Zulus

    Zulus Команда форума

    Регистрация:
    20 дек 2012
    Сообщения:
    746
    Симпатии:
    722
    Взял пример с этой страницы

    взял демо данные, со вкладки HTML, из приведенной выше страницы
    а вот куда и как этот код воткнуть правильно не пойму
    Код:
    $(document).ready(function(){
        $('#myTable').DataTable();
    });
    -----------UP-------------
    с кодом разобрался, обернул в тег <sсriрt> и поместил в статью, перед самой таблицей
     
    Последнее редактирование: 21 ноя 2016
  4. Zulus

    Zulus Команда форума

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

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

    Dotrox Команда форума

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

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

    ISomeInterface

    Регистрация:
    4 окт 2016
    Сообщения:
    106
    Симпатии:
    76
    На этой странице (https://datatables.net/download/) соберите себе нужную сборку, а что бы таблица складывалась нужно включить в сборку "Responsive".
    И в блоке инициализации включить:
    Код:
    $('#example').dataTable( {
            responsive: true
    } );
    
    И будет вам счастье.
     
    Zulus нравится это.
  7. Zulus

    Zulus Команда форума

    Регистрация:
    20 дек 2012
    Сообщения:
    746
    Симпатии:
    722
    Все отлично!
    Опишу какие еще возникли проблемы, может кому пригодится.
    В конструкторе, в начале указал с использованием jQuery (не спрашивайте зачем :Biggrin:), а в самом конце указал что нужен локальный фал. И в итоге получил архив с несколькими папками и с кучей файлов.
    Чтобы со всем этим добром не заморачиваться, переключил последний пункт на 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 строк), остальные параметры, что можно использовать при работе с таблицами можно просмотреть (с примерами) на этой странице
     
  8. suric

    suric

    Регистрация:
    7 май 2020
    Сообщения:
    3
    Симпатии:
    0
    Приветствую, подскажи пожалуйста, как ты сделал это у себя на сайте? Не могу разобраться
     
  9. Zulus

    Zulus Команда форума

    Регистрация:
    20 дек 2012
    Сообщения:
    746
    Симпатии:
    722
    Скачать архив и загрузить файлы скрипта и стилей на сервер.
    Подключить их или на всех страницах сайта (в шаблоне), или на отдельных страницах, где он нужен.
    у меня такой код и соответственно путь к файлам:
    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({
          
    responsivetrue,
            
    iDisplayLength10,
           
    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>
    Данные из базы не выдергивал, так как нет необходимости, таблица используется для других целей (в основном справочных)
    пример здесь "Справочная таблица"
     
  10. suric

    suric

    Регистрация:
    7 май 2020
    Сообщения:
    3
    Симпатии:
    0
    А в таблицу ты добавляешь данные через html редактор или визуальным редактором?
    Мне как раз как у тебя и нужно. Мне для заправки картриджей. Очень удобная штука для фильтрации нужного названия
    Просто я сам не веб программист, но решил разобраться как добавить такую фичу.
    Поэтапно, вкратце, можешь написать, что за чем следует?
    Т.е. я создаю статью, в ней добавляю таблицу. Правильно? Далее как подключить эту фильтрацию?
     
  11. Zulus

    Zulus Команда форума

    Регистрация:
    20 дек 2012
    Сообщения:
    746
    Симпатии:
    722
    Ты в начале попробуй, а потом вопросы задавай, если не получится. Постом выше уже все "разжевал" дальше некуда. Я тоже не программист, но понемногу нахватался именно здесь, на форуме.
    Добавляю тупо копированием этой части
    PHP:
    <tr>
             <
    td>Данные 1 столбца</td>
             <
    td>Данные 2 столбца</td>
             <
    td>Данные 3 столбца</td>
             <
    td>Данные 4 столбца</td>
             <
    td>Данные 5 столбца</td>
         </
    tr>
    и меняю данные, так как данные собираются, анализируются и проверяются с разных сайтов, то делаю все вручную. Визуальный редактор отключаю или делаю в блокноте. :Biggrin:
     
  12. suric

    suric

    Регистрация:
    7 май 2020
    Сообщения:
    3
    Симпатии:
    0
    Спасибо тебе огромное!!! Почти получилось. Вроде отбор заработал. Подскажи, если я захожу снова в статью и добавляю данные в таблицу, то код теряется и его снова нужно добавлять на страницу. У тебя также или можно что-то сделать, чтобы код фильтра не терялся при редактировании статьи?