java中html table垂直表格页面显示数据不全_实学：Java开发自己的博客系统-第二十九篇（后台添加栏目功能-3）...

按照计划我们来在input栏的下方添置一个表格，显示数据库中已有的分类栏目信息。

模板文件中加入表格的显示部分

打开editCatalog.ftl文件，找到原来的input这个元素的代码，在它的下一行开始，加入表格，如下：

<

运行起来，看一下效果，如图一：

图一：表格初始化的样子

还行。不过显示input栏后，两者明显贴在一起了，如图二：

图二：表格和input贴在一起了

给我们的table最顶端加上mt-2间距吧：

<

好了，显示的准备工作差不多。下一步之前，先说明一下上面的tbody下方的几个<tr>、<td>元素，这些只是先放着：笔者的习惯先看一下大致将来的结构是什么样，因为这个地方是实际的表格内容部分的每一行（tr就是table row的意思）的数据。这个数据我们会在页面打开的时候，通过像服务器发送ajax请求得到数据，动态填入每一行。所以，最后这个<tbody>里面其实初始化应该是空的。

马上来看这一段当页面加载完成后发起的ajax应该是什么样的。

页面加载后发起ajax，得到表格数据

打开catalog.js，在后面添加以下内容：

function 

方法getCatalogData只是通过ajax调用，期望服务器的/api/getcatalog能返回所有的catalog的信息（现在还未实现），因为不需要带上客户端的什么信息，所以data是空的。success回调部分，我们暂时空着，这里要做的事情是把数据组织成html的<tr>，也就是上面说的每一行显示的格式，等会再实现。

$(document).ready()这个东西，是jquery的一个机制，这个机制能保证页面的元素都已经可供访问，在这个回调里面，我们才真正调用刚写的getCatalogData()，因为这里面会操作到页面元素：访问<tbody>，在下面插入<tr>。

还没有从服务器上读取过一堆数据，所以现在真不知道怎么填充success后的代码，那么我们就先看服务器怎么处理需要的逻辑先。

服务器支撑api/getcatalog

1、实现ServiceImpl中的read方法

打开CatalogServiceImpl.java，我们把read方法整体改成如下：

@Override
    

读取所有的记录就是这么简单，一个findAll()方法就搞定。

2、实现api本身

打开CatalogApi.java，给原先的类加入下面的方法：

@PostMapping

也很简单，直接调用Service中的read，得到一个列表，把列表塞入响应数据的body中即可。

没想到如此简单，似乎服务器要做的事情就这么搞定？来吧，试试看浏览器能接收到的数据是什么？

在上面的js文件中，我们给getCatalogData方法中success回调，塞入下面一行内容：

console

运行起来，看看能得到什么（如果你的数据库中还没有任何数据，事先加点进去）。我运行的结果如图三：

图三：打印服务器上拿到的数据

看的出，得到的数据是一个json格式的数组。数组每一项都是一个类似java中的Catalog数据类型的结构。所以我们知道怎么在javascript用这些数据了。

完善getCatalogData方法

再回到catalog.js中，在getCatalogData的success回调下，我们写入以下内容：

success

然后就可以运行看效果了。如图四：

图四：显示出了数据库中的栏目

哈，真好。不过表格第一行因为是原先我们的空数据行，所以要去掉它。这里就不贴代码了，直接删去原来的<tr>元素和它下面的所有<td>元素就可以。

先这样吧，要做的事情还很多，比如加了新的栏目后，表格应该要更新。这些就到后面再做。

休息~