18、尚硅谷_SSM高级整合_查询_构建分页条.avi原创

好。那么上一节课呢，我们把表格里边的这些数据我们解析并显示出来了，相当于呢，把服务器交给我们的这个杰森字符串啊，我们把它里边的这个list员工数据解析了，那么接下来就是我们这个分页信息，还有我们这个分页条都没做，那我们接下来把这两个解析并显示出来，好，那这一块呢，我们这个方法我们就当做是解析显示咱们这个分页。枫叶条的，那么呢，我们专门再来写一个。它是解析显示我们这个封页信息的。配置咱们这个。我们认为呢，左边这个是分页信息，右边是这个是分页条好，那么这个是解析显示封页信息好。那么呢，这一块我们这个成功以后，那就会有这么多操作，先显示出咱们这个表格数据，再显示出分页信息数据。

再显示出分页条数据。再来第三步，解析显示分页条数据。好，我们把这个分页条数据就它。我们把这三步只要做完了，咱们这个发请求啊，显示数据我们就做完了，那我们这个风险信息数据呢，都是在这个div里边，行们给这个div呢，我们就叫配置我们这个分页信息到咱们这个显示区域L。好，就是它我们给这里边儿来显示数据。这里边显示数据呢，我们来做一个简单的。找到这个div给它里边呢，我们就添加我们要显示的这些文本就行了。

显示的这个文本呢，就是我们这个当前，哎，我把这一块的内容拿过来。就是这么一堆内容。而这么一堆内容中，这些数据我们是要哎取出来了，当前是第几页？那么这个第几页怎么取呢？就是我们返回数据，咱们这个extend里边的配置符，当前的这个配置number，哎，就是它。好，Result。结果里边的。它里边的咱们这个配置音放，哎是它。里边的咱们这个配置。好，就有这个包括呢，总共有多少页，那么我们把这个也得显示出来。总共多少样？好，我们把这个也给它显示出来。

总共多少页呢？哎，我们这个页码的显示还是一样，是我们这个。Extend配置音放。好，但是呢，它不是PA number，它是另外一个属性，我们叫咱们这个总共有多少页，这有一个哎pages，哎这个pages是总页码数。那么呢，总记录数也有。我们来给它也显示出来。好，总记录数。这一串拿到不是这个配置四属性了，总记录数是咱们这个total属性的值。好保存，保存以后呢，我们来重新测试。来刷新啊，这个一出现404呢，我们把服务器都启动一下，重新启动一下。重新启动一下。

好，我来刷新。刷新好，你看这个分页数据啊，分页信息就是对的，那么接下来我们去构建咱们这个导航条。导航条呢，在这一块。我们的这个导航条，哎，它显示在我们这个div中。信息。那比如呢，就叫配置那位分一下导航条的这么一个区域。好，这个区域里边的内容呢，我们来也构建出来。哎，这是要显示在这个区域的内容，而导航条呢，我们找到trip，看把导航条怎么。啊，就是它我们来往下翻，这有个枫叶，好就是咱们这个枫叶条，那枫叶条呢，它是加在这个单位中，它里边呢有一个UIUI里边所有的条目都是用Li表示，好我们就来构建每一个我们之前的导航条，还有首页末页，那么首页末页呢，也是这个Li，所以说呢，我们就把这里边我们要用的元素我们都构建出来，比如首页我们叫first配置的Li。

好，我们构建它，构建它呢，它就是一个这个Li里边有A标签，这些呢，都是辅助属性啊，我们暂时不管用好。来构建一个Li。刀符小括号，好，我们这有一个Li元素。这个Li元素呢，啊，是里边它会加着我们这个A标签，A标签里边的这个文字就是我们要显示的信息，好，那我们就点。碰到一个咱们这个A标签。而这个A标签里边的内容，诶，我们应该是Dollar福杰克瑞，哎，我们用杰克创建出这个A标签。

A标签呢，它里边点a pen啊，我们首先是构造的首页，所以说我写一个首页，而这个A标签的这个超链接，哎，这个超链接呢，因为它还会会open，还会返回A标签，所以说呢，我们来给它超链接复值at tr。At tr at tr赋值呢，它还是会返回咱们这个当前元素，所以说呢，我们给它这个属性赋值啊，让我们不能让他点击跳转，我就写一个井号啊，我们应该呃现在做AJ呢，我们都是给他绑定单击事件啊，发生点击以后呢，我们再发AJ请求查数据，所以说呢，我们现在这个首页的LR我们先构造出来。包括呢，我们末页的LA。Last page的。咱们这。构建方法跟我们这个一模一样。

哎。这两个Li包括呢，我们前一页跟后一页的Li，哎，这个呢，是咱们这个前一页跟后一页这两个按钮的。我们叫pre。我们也构建出来。都是这一块。这么来写，只不过呢，我们前一页这一块呢，它写的这个AA里边它是一个span span这里边有一个这个啊，咱们这个特殊的转移字符，这个转移字符就是这个右键头，那我们把这个SPA给它填进去。咱们这个前一页这是呢。好，那我们给他A标签里边直接来显示这个吧。好，我们就不给里边加SPA，我们给A标签里边直接显示这个，好，还有咱们这个，我们前一页有了，还有我们这个。

后仰。Next。Next拍啊，我们下一页的这个Li，它里边的内容是这个右双括号的这个转义词。哎，我们改错位置了，那是这个又。双克卡。啊，这个是莫样。这个导航条里边的这些普通Li，就是我们每一个页码号的元素，所以说呢，我们要连续显示的页码号，我们也返回过来了，大家可以看到，诶这里边呢，有一个叫navigate page numbers，它里边有12345，就是我们要连续显示的，所以说我便利它就行了。那么还是一样。我使用一个便利方法，到点一。联系时我们要便利的元素呢？是我们取出来响应结果result里边的。

里边extend。里边的咱们这个配置英镑的值，配置英镑。它配置音符里边的咱们这个导航。导航的咱们这个页码号好，然后呢，我们来遍历每一个元素。便利的，每一个的回调函数可以传两个参数，第一个是index啊，是它的索引，第二个呢是item，就是当前元素，你要不传它在里边，用this也能拿得出。好，那我们接下来你看啊，每一个元素相当于。也都是我们这一个Li，所以说呢，我们应该还是构建出来，构建构建出来我们这个数字，咱们这个Li。好，我把这个Li。我也拿过来，跟他们的构建方法都一样，只不过呢，它里边呃碰的咱们这个A标签的这个值啊，不是咱们这个呃东西了，而是我们这个取出来当前元素的。

啊，我们便利的。这个是一个页码号12345啊，那么我们这块呢，就应该取出来我们这个页码号行，那我们便利的这些元素相当于都有了，而我们这些元素呢，都在ul里边，所以说呢，我们先把这个负的。元素ul构建出来。Dollar服务。来创建一个ul。Ul啊，这个ul里边呢，还有。我们来看啊，这ul里边还有一个class，那我们就按class。And class没事，这个and class也会返回我们当前元素。好，我们按要添加的这个类就配成的式。

所以说呢，我们来看啊，在这个ul中，我们先要把前一页跟后一页。这个ul点，我们先要把咱们这个首页。填进去，再把咱们这个，哎，前一页填进去。哎，这个呢是哎。构造添加咱们这个首页和前一页。前一页的提示。好，而我们每次遍历的时候呢，我们给ul中再把咱们这个页码号填进去两。啊，咱们这个页码的L填进去，等我们都遍历完了以后呢，啊，这应该是便利。便利。便给ul。中添加咱们这个页码提示。

等都填完以后呢，给ul里边最后再添加。添加，哎，添加我们这个啊，后一页就是下一页和末页的提示。下一页和末页。莫样。到咱们这个提示好，我们呢继续来填，哎，当我们遍历完以后，给ul中来添加，哎，点a pen。好，咱们这个下一页。是下一页。跟莫燕俩的。好，这个ul相当于就构建完了，而这个ul构建完了以后呢，整个ul要在这个呃，NAV元素中，所以说呢，我们把这个ul。一个咱们这个到咱们这个里面。Dollar，我们来创建一个能为元素。

导航。的这个元素，好把咱们构建好的ul我们填进去。哎，构建好的ul就是它填进去。好，这就是把ul，把咱们这个ul加入到咱们这个单位元素中。那么至此呢，我们整个导航条就构建完了，把这个导航条最后再添加到我们要显示的这个div中，就是它点判断的图。添加到我们要显示的。这个导航条的区域点为准，好就是好，那么可以来看一下咱们这个导航条构建出来是什么样子。刷新。好，这个U404，那我们就重新重启吧，这每一次。这修改以后，这服务器我让它重启一下。好，我们来刷新走。

哎，我们来看导航条呢，我们就显示出来了，那么现在呢，我们把它做完整，点这些链接，哎，导航条是出来了，但是我们点超链接要能翻到下一页，所以说呢，我们应该是在这儿。我们还有一个事儿没做，就是呢，显示分页条，而且点击咱们这个分页要能要。能去咱们这个下一页等等等等咱们之之类的要有动作。我们下一节课呢，就来完善这个枫叶条。