day05【讲师管理模块前端开发】/07-尚硅谷-谷粒学院-讲师管理前端-讲师分页和添加

首先我们做的第一个功能就是咱们就是在这个讲师的列表页面中添加上一个分页的这么一个时间，就是把分页功能加上，那这怎么加，给大家来说一下啊，首先咱要加的话，在页面的最下边这部分，咱们是不是要加个分页条啊，而分页条我觉得各位应该都见过，它主要这么一结构，比如说首页、尾页、上页、下页等等，所以咱们把分页条给它加上。但这个加分页条现在应该做法比较简单了，咱们这个列表用的是I的UI，所以咱们分页条完全可以在mui中找个分页条把它做到，那比如说咱来找一个啊，在这里边咱往下找，在表格的下边这位置有一个叫分页。咱把它点开大家看啊，这里边有不同的效果，就是它有各种分页调效果，包括里边每部分都做了解释，比如说咱们随便找一个大概看一下，然后看这个，你看这里边啊，他给我们写了这么一段代码，包括里边有一些基本的效果，用的是EL啊，然后这些，所以咱们用它就能改成我们的分页，那咱来做一下哈，这个不需要各位去敲一遍，咱直接改就可以了。

咱们找到我的课件中，就是在这个讲师列表的课件中，然后再往下看。下面有一个叫分页组件，你看这个组件啊，就是EL这个标签。咱看到。跟它是不一样啊，是一个东西，所以我这是用IUI改出来的，咱把我这个直接复制改就可以了，不需要各位敲各位能改就可以，那我现在把它复制过来，咱们就复制到我的页面中。因为分页嘛，它肯定在页面的最下边，所以咱就放到我们表格的下边，就是这个地方。

你看哈，咱上午写了一个EL table，咱在table的外边加上这个分页条，但是你注意啊，这个要加到我们的div里边，你别加到后面去，并不好使啊。咱给它加到这里，这叫分页条，而这分页条我们怎么来看，给大家详细解释一下，咱能改就可以了，首先我们看啊，在这里边呢，加了很多的冒号。这冒号什么意思？咱上午说过了，之前一直提到它其实本质上应该写的叫V-B，是单向绑定，因为取到你data中这些值，那我们看哈，这里边有这么三个啊，这是固定的一个属性，第一个叫卡的配置，这表示取你里边那个当前页。这个配置size取拟每页记数数，Total取拟一共有多少条记录，而这三个值大家看我这里是不是都定义了配置利幂的total，所以咱把三个值写到里边可以了，它能得到当前页每页记录数，还有你的总记录数，除了它之外，你看啊，这是里边的这个样式，样式就是是它的左右间距和文本的显示内容，这是CS的样式，不需要咱们变。

然后下面一个layout layout就表示你显示内容，比如说啊，里边总记录数，前移后叶等等，这也是一个固定的一个布局，比如咱们用效果看到，而咱们这么写之后有什么好处呢？给大家强调啊。咱们用这个element UI之后，它把里边这个分页条的部分帮咱们做了封装，比如说咱们传个总记录数，当前页每页记录数，它会把你拥有多少页这个结构帮咱们自动生出来，不需要咱去写，如果按照之前我们最早的方式，咱肯定做各种判断，比如说你第一页没有上页，最后页没有下页等等，但是这些不需要了，这里边都封装了，但只需要把这值传过去就可以了。

啊，这是它的第部分，咱主要这三部分，然后都选完之后，最后有一个地方要艾特这个符号。这一部分各位是否记得啊，咱在VO中说过，它其实本质上是写一个叫V-on冒号，但是现在可以简写叫S，表示绑定个事件，而这事件其实是安UI中提供出来的，它就表示你做分页的切换，比如说你第一页点下一页是第二页，再点上页，第一页就是上页下页切换。但上页下页是怎么做的，大家看到啊，咱上午写的方法叫get list，咱把方法给它改过来，这就表示咱们做每次的分页切换都去掉咱这个get例子方法，因为这个方法中我们要做到这个，就是最终这个分页的这么一个效果。啊，所以大家把这个给它知道，就是分页，我再说一遍，然后再看效果啊，这里边传三个值，当前页每日记录数和总记录数，这三个值是你在date中定义的，你穿完之后，他把分页条给咱做的封装，按照这种样式，然后完之后每次做分页切换，就是你的上页下页的效果，咱把我们写这个方法就是get例子，咱们写到的给它传过来就可以了。

这是一个分页的这么一个方法。接单把这个写过来啊，而这方法给大家强调啊，之前我提到过，这个方法中呢，其实你可以加个括号，但是括号可以省略啊，因为这个可以不写。但是里边呢，还有一个地方给大家强调啊。比如说我们做分页。你看我这位置啊，我这么查的话呢，这个这点配置它的默认值是不是一啊，如果说你这么做的话，那这个分页应该只能查第页的数据，他查不了多页的数据，那我们怎么做呢？咱把方法给他稍微改一下啊，怎么改我写一下啊。

在方法中呢，我们传个配置给他来一个默认值是一，就是它默认就是一，那这里边我们再写一个叫这点配置，等于这个配置，那这是一个改造，它什么意思，我说一下啊。比如说我们现在查第一页的数据，那这次点配置的值是不是就是一啊，就这里边是一，就查第一页，当你查第二页的数据，那这配置值变成了二，咱一赋值，这个点配置就变成二，这就查第二页，包第三页、第四页都可以，这是为了做到一个分页的切换，咱们可以这么来做，而过程中就是这个位置。不需要咱变，他每次会把你的页数给你自动传过来，就这里边你不需要再写个配置啊，这么写他还不对，因为他给咱封装了，咱只需要写个方法名字就足够了，但是你需要把这方法改一下，因为这里边咱们每次查的页数都不一样，而我写个一就表示你不传，默认就是一，你传的话按照你的页数进行操作。

啊，说的更直接点啊，假我现在配置什么都不传，那这值是一，咱就查第一页，假如说我这配置传个二，那我这个值就等于二，咱就查第二页的数据，就是这么一个情况啊，这样的话，咱们把分页条就加上了，主要加这段代码就可以做到。这个哈，我给大家复制过来。呃，或者我。截一下啊，咱直接截到我们这个。笔记重点啊，我这里写一下。这个表示我们的当前页。然后limit表示每页的记录数，这是第二个啊，每页记录数。然后第三个叫total，就是你一共有多少条记录，或者我们说那个总记录数，还有最后一个叫做get list是我们写那个分页的这么一个方法。

啊，所以咱们在里边主要写这么几个结构，按照它把这个分页条可以加上这个给大家说过来，然后这个加完之后，咱还需要做件事情，就要把咱们分页的方法做个修改，给它添加上一个那个页数的这个参数，啊，就是页码的那个参数。给它要加上，也就是我刚才写的这个位置啊，我把它直接就截过来了啊，主要是加上。这一部分。咱来一个配置的参数，比如你查第一页，第二页，第三页，然后把参数传给咱们的这次配置，最终做到一个查询。啊，咱需要写它，所以咱们这么做分页效果就可以做到啊，它就是这个情况，它里边大部分功能UI给咱封装了，咱直接用就可以了，这样做比咱们原始写法要简化很多。

这个完成完成之后，咱们把效果我们最后来看一下啊，我先F5刷新。然后刷新之后大家看啊，第一次进入咱肯定是查第一页的数据，因为我每页要显示有这么十条记录，就是我这里边定义的啊，当然你可以改值，然后咱们往下看，大家看这位置。这就是他一个简单的分页条效果，那大家看这效果什么样的啊，大家看啊第一个total。Total什么意思呢？是不是它的总记录数，就是目前一共有16条记录，然后这里边啊，就是你有这位置，就是这是第一页，这是第二页，当前是第一页，但是我们在第一页的时候，大家看这个箭头不能点，就是你上页不能点，但是咱可以点下一页，或者点这二，然后默认是一，比如说我现在点个第二页，大家看啊，第二页是不是这个六条记录，然后目前这个就不能点了，因为它第二页没有下一页，咱可以点上一页。

是不是又回来啊，所以这个就是一个最基本的分页的效果报，虽说你每次点滴，你看后面这里边值是一，我再点二是变成二，所以说你每次点滴它会跟着发生变化。啊，所以这是关于我们实现的一个最基本的分页条的效果，咱们就是这么来做。这个啊，我们就把它整合进去了，也是直接用这个IUI，因为它确实会特别方便，直接把这个效果我们就能做到。啊，这个是咱家的第一个啊，讲师的分页功能的这么一个实现。所以各位啊，就是这个代码不需要你去敲，你把它复制，然后改成你自己定义这些值，这些名字就可以了，然后另外就是在方法位置，咱需要加上这么一个页码的切换，如果你不加他，那只能查第一页，加上之后每次都能查不同的页数。

这个啊，我们完成了啊。