如何在Blogger上创建可排序表格？

Question

我有博客，并且想要创建可排序的表。但是我找不到办法。我只能做一张普通桌子。 我尝试了很多关于如何在博客上制作教程，但是没有用。也许这些代码是针对WP的，而不是针对Blogger的。 谁能帮我吗？

Answer 1

Jquery datatable是将可排序表格添加到您的网站的不错选择。您需要做的是在博客上安装Datatable，然后继续在表上调用Javascript。

https://datatables.net/

1. 要通过CDN包括Datatable Javascript和CSS， 登录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. 将CSS CDN参考标记插入模板的head标记

   <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 ID或类，例如

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

8. 在HTML视图编辑器的底部，添加一个脚本标记以调用表（或具有CSS类datatable的任何表）上的数据表。

   <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。

快乐编码！