动力节点SSM框架项目【CRM客户管理系统】实战实战教程-073原创

来下边我们来做这个这个这个分页，这分页查，这这种分页查询。分页查询插件啊，分页或者叫分页插件都行，这些插件有很多，我们说都是美工帮我们做好了，你到时候直接一调它就行了，是吧，那我们用这个插件，我们不用别的了，我们就用不做所债管它的一个分页插询的这个插件，他这个插件啊，他这个件也有个名字，就像咱们前面给大家讲那个日历插件一样，它那个日历叫data time pick是吗？它这个fair页插件插件叫这个叫page插件这个插件。这是分页查询到这个插件知道吧，他这个插件干什么，这些插件就帮我们做，我刚才分析的这些事儿，只帮我们做分页的这个，分页的这些功能，别的这些他都无能为力，他不能帮我们做这些事啊，这个地方他也能帮我们做，他只会帮我们做分页的这些按钮，上面这些东西列表，他不能帮我们做，他只帮我们维护这些，他怎么维护的。

他就是帮我们显示这些卡片，到底显示几个，哪些是可激活的，哪些不可激活的，然后到底显示几个，并且上面都绑定一个数值，数值，而且都给他们加上单机视角，当你1.1个的时候，它自动的什么，它对执行你的执行你的JS代码，然后并且能够获取到你选的那个什么，那个页号和那个每页显示条数，他能获取到，他帮我们做这个事，知道吗？这些我刚才分析的这些功能你都不用，你都不用管了。它插件帮我们做知道吧，而且从静态的到动态的，他都帮我们做，你切换完了之后，根据你切换的结果，这些都跟着联动知道吧，这些翻页，这个翻页插件知道。所以这事我们说到这儿，下边呢，我们就别的不多说了啊，我们就给大家来看一看它这个BOO，这个page这个插件到底怎么用是吧？来给大家演示一个例子吧，它就是通过一个例子教给你了，这个插件就是比较复杂，所以它官网上面也给我们提供了这么一个例子是吧，官网提供一个例子，然后呢，这个例子就教你如何实现这种功能，因为他这个签扯的参数比较多一些，比咱们这个日历的插件要复杂一些，所以他给我们提供一个例子，但你不用害怕啊，你说老师我能学会吧，能学会他那个例子给你写的非常明确懂。

而且它那个例子做的比我们这个功能更强大，知道吧。好，大家我们一块儿来看看他那个例子，然后把它那个例子拿到咱们项目里边来运行一下，研究一下他这个代码到底怎么实现，我们到时候怎么去用它，大家我们一块儿来看一看，好，下边我们来就是通过他那个例子，我们来学一下它就行了，知道吧，而且但然它不是只让你看文档，他给你做了一个例子啊，就是因为他这个插件太复杂了，所以他给你做的比较详细，所以下边我们来看看它这个文档，那我们这个地方来看看，叫good subscribe叫page网插件，在它官网上有一个例子啊，大家我们一块来看看，然后呢，这个官网来看这个啊，这个应该是这个。

啊，这是下载的是吧，这是下载的，不是他这个技术啊。对没啊没没打全是吧，就这个就这个例子知这是他官网上的，当然这外国人做的肯定上面都是英文你吧知道吧，这大家看这这是他这个这是他这个，这是他这个从他整个步骤所来的框架的这个什么这个一个这个首页知道吧，啊这个这个这个page的这个插件的这个首页知吧，然后呢，大家它上面有一些什么，有些互联网应用的知道吧，教你怎么在这个网站上用的，但是这个地方这个是他一个例子，这个是一个例子，这个叫DEMODEMO就是一个小演示效果知道吧，它这个效果什么样的，大概就这个这么一个东西知道吧，就这么一个效果。你想要详细的看法，你点进这个DEMO就行了，它上面给你做详细的演示了，所以下边我们来点来你看啊。

这是他这个例子，你看你看过。啊，他这个网站稍微慢一点，大家看就这个例子啊，这一个例子，大家看它的效果，就把我们显示成这样子的这么一个效果，将来我们要把这段内容显示到我们这个，显示到我们这个地方，知道吗。这就是翻页的功能就知道，好，大家看我们首先来研究一下，来看看它这个例子，大家看它分为几个部分，你看它这个翻页的功能，它给你显示几个部分在吧，首先它这个功能大，它分为四部分，首先这是一部分，这一部分显示什么，就相当于我们这个美工帮我们做到这一部分。这翻页卡片吧。来看，那看翻页卡片，你看这些的，看这是一页一页的内容啊，它也是一组一组的显示，它显示五个一组五个，那说还有多少，还有别的什么，还有还有很多页知这是下一页，这是伪页，那道他怎么证他外国人写的，所以说他看他没有做汉化什么这些。

这是下一页，这是尾页啊，他用这种符号的表格，那你说那个上一页首页呢。由于当前正在处在第一页上页和首页不不可点了，不可点它这个例子做的，它压根就不给你显示，那你说如果可点可点就显示出来，就这意思。知道吧，所以这是我们说这一部分。啊，当然他后边还有还有很多页，将来一页嘛，想看别的页，你选中这个肉，再一点下一页后五个又出来了，然后再又选中到这又点下一页后个又出来了，知道吗？这是我们说的这。就他这一部分。啊，当然这个效果我们一会儿给大家演示一下，知道吧，好，这是这一部分，这是显示翻页卡片。那你说到底有几页，他这个地方给我们模拟了，他这个小例子给我模拟了一些数据，模拟了多少数据，在1000条数据，他这个例子在后台给我们做了1000条数据。

然后每页显示，默认显示十条，所以总共有多少页大纲？对，100页，它总共有100页，总共有100页，它是一组一组给你显示一组五个，一组五个知道吧，好，这时候我们说这一部分好，下面大家看来第看第二部分大纲，这是一部分，这一部分干什么呢？大哥你看鼠标放下之后，它上面给你显示这个干什么，你看构图配置什么意思，对跳转到第几页懂说跳转地点就是现在在第一页，我想选示到别的页，你可以再输入我想去到第十页，一输入它一回撤跑到第十页去，这些都会根据跟着变化。变了，这些都跑到第十页，这个第十页所在的那一组都出来了，知道吗。所以说大家知道这个地方你可以他给你可以这个切换这啊大家我说这个地方我们说美工帮我做的时候没有跳转到地几页，所以他这个地方他做的这个功能比较比较更完善一点，比咱们美工做的好，那这样的话，我们说用户体验好，怎么用户体验好，就像你要叫美工帮我们做这个。

那他没有跳转到第几页，那这个时候呢，假如说总共有100页，现在在第一页，我想看什么，我想看第50页。你这个地方什么一组显示五个，是不是一直点下一页啊，一直想你切换到你切换第50页的时候，你得点很点很很点很多次了，所以用户体验不好，所以他这个地方直接跳转到第节，你想跳转到第几页，输入几一回车就跳转第几页了。这是我们说的这下边大看这是第二部分，跳转到第第几页，然后呢，大看这一部分，这一部分是什么？你看鼠标方向形Rose pro page置叫什么？每页显示条数，每页显条数默认每页显示十条，你问我想每页显示15条怎么办？输入一个十五一回车，它这些全跟着变，按照每页显示15条的三页信息给你显示，知道吗？

它这个地方做的也比我们美工做这个比较更强大，美工做这个下拉列宝，它只能有几个明白吗？这个地方我们说它可以你想每月想受多少头，它就想受多少头，可以随便输，就这意思吧，好，这是我们说到的，这下边大家看，我们说大家看这是一部分，下边大家看这一部分，这一部分大家看这一部分是显示分页的信息，记录的或者叫记录的信息。他这个记录信息大卡，它就相当于什么，相当于我们这个地方，所以你这些记录所有符合条件数据到底有多少条，美工做这个只显示的条数，你看他这个地方大卡，他帮我显示的更详细，他有个什么。对，这是总共1000条，我们说他这个例子模拟了1000条数据，当然我们以后肯定是从数据库里边查出来这个数据，他这个例子模拟了1000条数据，知道吧，啊这总这是总记录的条数，然后呢，大家看它上面还给我们说了这个地方什么，默认每页显示十条，它给你显示更详细，当前正在第一页，他正正在显示第1000条，1000条记录的第一条到第十条，当前这一页正在显示的这些信息。

Record是记录的意思，调明好下边大家还有大家看这个叫什么，总共1000条数据，这个配置应该是P件配置，总共1000，每页显示失调，总共100页，当前正在显示第一页，100页中到第一页知道吧。所以他上面给我们显示的更详细，他比这个什么美工做那个设计能更好一些，这网站所以他这些插件当然都是他们这些专门做前端开发的这些人做的，所以他们做的更完善一些，而且再看他这四部分都是现在是静发的，而且他们能动起来怎么动起来，你比如说大看这儿，我切换页号的时候，或者切换每页想条数的时候，这些都跟着我切换的结果动起来变化怎么变，你看大家我这个地，你看我点下一页啊，现在住在第一页这些大看每页显示十条1000条记录，现在这些是显示这些解决，你看我一切换这页号，这些都跟着变，包括这些也跟着变，你看他当前第一页，第一页是高亮，别的都不变，那你看我点下一页，你点下一页看到吧，跑到第二页，第二页变成高亮了，别的你看这些，你看大看后边这些1000条记录，当前正在出的第二页，每页显示十条，当当前这一页正在显示的是第11条。

到第20页的记录，总共100页，当然只能显示第二页，好吧。你再点下一页的看看吗？都跟着变，我一点尾页你看。处在了第第100页，这些后边都跟着变，看到当前正在显示1000页中的1000条，记录中的第991条到第1000条总共100页章，才正在显示100页中的第100页，这些单看既然显示到尾页了，下一页和尾页那俩按钮没有了，但是前面这个首页和上页就有了，知道吧。

这时候我们说的，你比如说大概现在我想切换，切换到第20页一回车的哈，切换到20页，这些都跟着变。这些也都跟着变，现在正在每页显示十条，我每页显示15条，你看一回车看看15条跑到第一页去了，跟咱们刚才分析一样。当前显示第一页，总共1000条记录，当前正在显示每一页，显示15条，当前正在第1000条中的第一条到第15条，总共67页，当前正在显示67页中的第一页，然后你看我再点下一页，你看都跟着变，看到吧，都跟着变。尾页上一页上一页上一页首页看到吗？然后切换跳转到第十页，全跟着变看。所以这是我们说的他这些，他这些功能当中。呃，但通过这个例子，当我们能够大概能够认识一下他这种插件帮我们做到这种效果，我们一会儿就准备把它放到咱们这个项目啊，那你说老师怎么放。

用法跟我们以前给大家讲的前端差距用法完全一样。那怎么一样前端插件，前端插件的使用步骤，使用步骤不知道大家还记得不记得，所有前端插件都是这三步走，懂吧。对。所有插件，包括他这一条件，包括大家以后再用到别的插件，到公司里边再遇到前端插件，不管谁做的。都是三步走，那能都是三步走，第一步干什么？对引入开发包对吧，引入开发包对然后呢，第二步呢，对创建容器是创建容器知就是提供一个什么标签啊，提供就是提供一个标签，让它插件运行的结果显示到你标签里边，那这个地方给大家强调一下，这个容器以前我们都是单号文本框这个地方你还能用单号本框做容器吗？对，不能了，为什么不能，因为它这个插件运行的结果是这些内容单号面光能放下吗？对放不下了，所以说大概我们说这个地方得用啥div对div。

这是我们说第三步干什么？对，当容器加载完成之后，容器加载完成之后，完成之后，然后呢，对容器调用，调用工具函数知道吗？这是我们说，那这个工具函数调的时候有参数，这些函数和参数从哪找，文档里边都有对文档数就这三步所有拆数组，那你问他到底是不知道，那你不信你看一看，然后这是他代码你看吧。这是DEMO，是例子，这是代码，代码都给你了，你看吧，这扣的你点进去你看一看。他这代码大看分为三部分，你看对这三部分大家看你一猜你就能猜出来，还在里边干什么，对导包的包在里边呢，对容器用来显示的GS代码里边的对调用东西，这是这个三部分，你看一看，他看第一部，第一部分就这些导包的，这是它这个插件分页插询的个插件，就是分页那个插件，这个GS的有CSS，有GS有语言包，知道吧。

大家我们说了，它基于步骤所织框架的，得先导，不得组织框架。不做出来框架又依赖于谁啊？解块RY，先导结块RY，所以把它们倒过来，这样就行了，这是第一部分，第二部分。Body创建一个容器大干嘛，它叫容器就是div，大家给它加一个ID了啊好，这种第二部分，第三部分你看看，当容器加载完调公具函数，它是在入口函数时，就是当整个页面都加载完调公具函数就行了，但调的时候传参数。

这参数当然它有一个例子，他说这他就用这一个参数为例子，其实它还有别的参数，我们一会来看文档就行了，知道吧，好对，这是我们说它这个例子，好这是这样，那大家看它这个例子有了呢，现在我整个这样把它这个例子呢，写到咱们一个测试页面里，然后在这个测试页面里边来研究它这个参数到底怎么调，到底有哪些参数，那我们一块来看一看，好下面我们来看看，来写一个简单。