datatables 树形表格 java数据组装_实学：Java开发自己的博客系统-第三十篇（后台添加栏目功能-4）...
上一节已经显示了表格内容。读者玩有些网站的话，会发现很多表格有排序、分页、搜索功能，我们这一节先来做以下这些，因为如果导入一个库：DataTables，那么这些事情都是简单到你无法想象的事情。
跟我来！
导入DataTables库
DataTables的官网在这里：
Table plug-in for jQuerywww.datatables.net
通过上面的官网入口链接页面，我们如果进入到download页面，可以看到下载的地方可以定制内容，这个我就不详细介绍。我们会选择Bootstrap 4修饰、不带JQuery的包（因为JQuery我们已经在工程里包含）。
在这个基础上，事实上我们拿到一个css文件，和一个js文件。链接如下：
https://cdn.datatables.net/v/bs4/dt-1.10.21/datatables.min.csscdn.datatables.nethttps://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.jscdn.datatables.net
我们来纯手工导入（如果你已经直接下载了上面两个文件，就不用跟我这样，直接按下面的结果放置好文件就可）：
- 工程3rdParty目录下，新建目录datatable
- datatable目录下，新建datatables.min.css
- datatable目录下，新建datatables.min.js
- 拷贝网站上的datatables.min.css内容（我用浏览器访问，会直接打开这个文件内容，而不是下载该文件）到第2步的文件里
- 拷贝网站上的datatables.min.js内容到第3步的文件里
手工导入完成。
如果读者自己会npm、git等其他方式，完全可以用自己喜欢的方式，最后结果一样即可。上面注意我的目录名字不带“s”，但是datatables这个库是带“s”的。
editCatalog.ftl引入Datatables库
打开editCatalog.ftl，css文件我们放在<head></head>中，因此，在这个文件中，找到</head>这一行，然后前面插入一行，填上内容：
<然后翻到这个文件的最下面，我们在sweetalert2那个脚本引入行后加入新的一行，用以下内容填充：
<完成。这样模板文件载入的时候，DataTables库也会完成载入。
使用DataTables
打开catalog.js，我们在$(document).ready这一行前加入下面的方法：
function 这个方法初始化了一个DataTable的实例，用法很简单，我们只要指定一个div元素，然后再这个div上用上.DataTable()方法即可。这个方法的参数是一个json格式的数据，能指定很多特性，比如需不需要把数据分页显示、需不需要显示搜索栏、需不需要排序的控件显示，还可以定制显示的时候语言（DataTable会根据你配置的特性，给你的表格周围加上不少元素，这些元素会有字体显示）。
什么时候调用这个方法呢？
我们必须在数据已经从服务器下载到浏览器后，才调用该方法。所以，在原来的success回调处我们添加：
attachDataTable这样整个success处的代码会变成如下：
success完成了！
给读者看一下结果，运行起来后，如图一：
图一种的每页显示记录，搜索栏，表格下方的当前页等等，都是DataTables添加出来的。上方的都是可以直接交互使用的：每页记录，你可以选择10、25等等，搜索栏你可以输入字串、上下的箭头可以点击排序，这些都会影响到表格的显示。关键是，不用你写任何的代码！
从技术角度来讲，所有的表格运算都在客户端发生，没有服务器的任何事情。
Done！一个会帮助到不少人的使用工具，在我们下一节的新功能添加前介绍给读者。
休息~
datatables 树形表格 java数据组装_实学：Java开发自己的博客系统-第三十篇（后台添加栏目功能-4）...相关推荐
- cdns个人博客asp_实学：Java开发自己的博客系统-第十三篇（静态资源和后台模板）...
现在来把我们前面做的html放置到java工程中. 这样做的目的,一是实现我们前面的目标-使用html做后台模板.二是在实际开发中,整合页面模板到工程中后,我们只要开启工程项目的debug模式,浏览器 ...
- python 后台系统 源码_这是我见过最好的博客系统！附源码（前端、后台、APP、小程序都有）...
大家好,我是鸟哥! 今天给大家分享一款开源的博客系统,说是迄今为止我在Github上找到的最好.最全,最容易上手的博客系统一点都不为过.原谅我没有太多文化,只能用"卧槽"两字来表达 ...
- 女生学java的坏处_女生学java是否真的没有优势
随着女性越来越独立,我们可以看到再以前我们认为不适合女性朋友从事的工作,也出现了越来越多的女生,例如对IT行业也不再跟之前一样畏惧.虽然当下很多人所持的观点依旧是,女生不适合IT行业,但是很多女生已经 ...
- java 秒杀多线程_秒杀多线程系列 - 随笔分类 - Joyfulmath - 博客园
随笔分类 - 秒杀多线程系列 秒杀多线程系列,该系列转载至CSDN MoreWindows: http://blog.csdn.net/morewindows/article/details/7392 ...
- 学Java什么学历_想学java，但是学历不是很高能学吗，
活到老学到老,人最怕的是不学习. 人们往往在准备去学一个东西的时候,会有一些担心,比如难不难,能不能学会,或者就是学历不高能不能学会等等这些问题. 如果学java的话,学历高不高是其次.Java大家都 ...
- 转行学java好吗_转行学Java开发怎么样？
转行学Java开发怎么样?IT行业薪资高.待遇好,在转行的时候,好多人毫无疑问都会倾向选择IT行业.IT行业领域众多,哪个方向最值得进入呢?相信很多人在转行之初都会被建议去学习Java,为什么建议你在 ...
- java ean13 计算_实训java第三课 for 逻辑运算符 条件判断 商品条形码Ean-13验证码生成...
package com.tarena.day03; public class SwitchDemo { /** * Switch */ public static void main(String[] ...
- java数据过载_垃圾收集过载,Java
问题是,由于垃圾收集时间的原因,我在性能方面有一些权衡.这个问题可以概括为: public void loop(BlockingQueue queue) { int j = queue.size(); ...
- java 数据立方_写一个Java应用程序，从键盘输入一个整数，然后输出它的平方值立方值...
这是一个跟输入/输出流有关的面试题.下面我们来分析怎么实现该功能. 解析:在java中没有像C语言那样有一个专供接收从键盘输入值的scanf函数,所以一般的做法是从键盘输入一行字符,保存到字符串s中, ...
最新文章
- Linux qgis 编译,QGIS简介与源代码编译
- Map集合HashMap TreeMap的输出方法
- 深入了解Oracle ASM(一):基础概念
- Python 数据分析三剑客之 Matplotlib（十）：3D 图的绘制
- linux atom编码设置,Ubuntu中Atom编辑器显示中文乱码的处理方法
- 涉及到大小变化，类似QScrollArea判断大小是否显示滚动条
- 一线大厂都在跑的微服务，真有这么香吗？
- GoogleCpp风格指南 8)格式 _part1
- 痕迹清理 - Linux
- CSC公派|小红本及小黄本的办理
- 金山打字通五笔介绍及讲解
- PHP仿给你花分期小额贷款平台源码
- 个人域名快速备案需要哪些资料
- ＜4＞STM32F103基础知识
- 对话管理DST:Deep Neural Network Approach for the Dialog State Tracking Challenge
- IMX6 VPU解码流程
- python数字转字符串_字符串转换与格式化
- WebSocket 获取客户端的IP
- vim配置参考备忘-------嵌入式
- 激光雷达 eai g6_如何配置TAMeb 6.0 EAI以实现复杂的身份验证要求