Как сделать сортируемую таблицу на Blogger? - PullRequest
Новая
       50

Как сделать сортируемую таблицу на Blogger?

0 голосов
/ 25 октября 2018

У меня есть блог, и я хочу создать сортируемую таблицу.Но я не могу найти способ сделать это.Я только могу сделать нормальный стол.Я пробовал много учебника о том, как сделать это в блоге, но не сработало.Может быть, эти коды для WP, а не Blogger.Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 25 октября 2018

Jquery datatable - хороший выбор для добавления сортируемых таблиц на ваш сайт.Что вам нужно сделать, это установить Datatable в своем блоге и начать вызывать Javascript на своем столе.

https://datatables.net/

  1. Чтобы включить Datatable Javascript & CSS черезCDN, войдите на blogger.com и посетите панель управления вашего блога.
  2. Теперь нажмите на тему на левой боковой панели
  3. В окне шаблона нажмите «Изменить HTML».

  4. Вставьте Datatable Javascript и CSS CDN в тег head или внизу перед закрывающим тегом.

    <script language='javascript' type='text/javascript' src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

  5. Вставьте ссылку на CDN CSSдобавьте тег в заголовок вашего шаблона

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

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

  7. Отредактируйте таблицу и присвойте ей идентификатор HTML или класс, например

    <table class="display datatable" style="width:100%">

  8. В нижней части редактора HTML-представления добавьте тег сценария для вызова таблицы данных (или любой таблицы с классом данных CSS).

    <script type="text/javascript"> $(document).ready(function() { $('.datatable').DataTable(); } ); </script>

  9. Ваш пост в блоге с возможностью регистрации данных готов к публикации. Пожалуйста, смотрите ссылку на образец ниже. Я создал его во время написания этого ответа. https://ehimex.blogspot.com/2018/10/name-position-office-age-start-date.html

Вы можете обратиться к https://datatables.net/examples/basic_init/zero_configuration.html для получения дополнительных опций или деталей о том, как настроить таблицу данных.

Happy Coding!

...