bootstrap分页问题

Question

问题描述：

数据库中数据量较大，想分页展示，但是看了bootstrap的好多教程都只给了html的，如何动态的使分页的数字变化等等都没有说。

我想实现的效果就是这样的：

可以点击之后进行变化的效果。但是现在不知道怎么写代码。查了好久也没有，bootstrap官网也没有相关的教程。

目前想到的解决办法：

搜了好多之后看到一个思路貌似可行的方法，是用js生成html然后加载的，点击的时候重新加载想要加载的本页数据，下面的分页也重新写一遍HTML。
想问问有没有更好的方法，或者更为简洁的，如果没有的话只能用这种方法了。

谢谢各位！！！

Answer 1

看楼主的问题应该不止是Bootstrap本身相关问题那么简单，所以比较全面的回答一下吧。

首先分页的目的大部分时候和楼主所说的一样，内容过多放在一页上展示会有问题。而为了达到点击分页组件，显示对应页数内容的效果，其实也分两种思路。
一是像很多Tab组件那样，点击切换不同内容的display，达到点击切换的效果。但是实际生产环境中不会这样做，因为这种方式意味着初次加载时所有的数据都被加载了，那么在数据量大的时候显然是很不可行的。
另一种则是大多数分页的所采用的方式，点击分页组件，从服务器端获取对应内容，然后进行展示。而现在这种处理方式，一般也有两种思路，一是前端只获取数据，再在前端渲染；另一种是后端把数据按照模板渲染好，再把最终成型的内容以动态或者静态页面的方式返回给前端。

不过，不论是前端渲染还是后端渲染，第一步都是和服务器端通信，发送对应的请求。

前端渲染，也就是楼主你自己目前想到的方法，我们以ajax为例，大概是这样：

var url = 'http://api.mywebsite.com/articles?page=3&skip=5'
get(url, function (err, body) {
  if (err) //handle error
  successFunction (body) // do something with response data
})

通过请求服务器端对应的接口，我们可以获取数据库中对应的数据，这个返回的body数据可能是这样：

[
  {
    "title": "title1",
    "desc": "desc1",
    "content": "content1"
  },

  ...

  {
    "title": "title5",
    "desc": "desc5",
    "content": "content5"    
  }
]

例子中我们传递了两个参数，查询的是第3页的数据，每页5条，那么返回给你的5条数据就是第11条~第15条记录。
获取到这个数据之后，你就用你的方式把他更新对应位置的内容，原生的innerHTML等方法可以，jQuery之类的方法库可以，现在很多框架的模板功能也可以。

前端渲染的好处有很多，例如：

1. 不用刷新页面，内容就更新了，用户体验好

2. 服务器端压力比渲染+传输完整页面要小，等于把一些工作交由用户的浏览器完成

3. 前后端逻辑分离，后端人员不用再关心前端逻辑，效率更高

当然前端渲染也有需要注意的，例如：

1. SEO问题。因为在这种方式下，除了第一页的数据之外（事实上可能第一页的数据也是动态加载的），其余所有数据内容都没有静态页面去展示，搜索引擎当然也就没法收录。当然这有对应的解决方法，这里不展开说了。

2. url问题。如果不做任何处理的话，请求内容、改变内容都是不会改变当前页面的url的，那么问题就是用户没法使用浏览器的导航功能前进或者后退，刷新的话还会直接回到第一页。这就是很多前端路由框架在解决的问题，jquery系的pjax或者senna.js这种独立的路由框架亦或是vue-router这种大型框架的路有插件都在完成这些工作。

后端渲染是更常见的处理方法。比如一个普通的CMS门户网站，要写一个搜索结果页的页面，那么工作流程可能是这样的：

1. 前端把静态页面写完，给到后端，页面中例如文章标题、内容、日期的地方先写死。

2. 后端根据前端给出的页面，把写死的部分对应的替换成后端暴露出的一些模板标签。（这一步也可能是前端做，总之需要一个人来做）

3. 把写好的模板放在服务器储存view层文件夹里，当用户访问对应的url时，后端路由就会渲染对应的模板，在解析到模板标签时，就查询数据库把对应的数据填到对应的地方。最后把解析好的完整HTML文件传输给用户。

这样的话，你的分页组件的按钮其实就可以是绑定了对应url的a标签，比如前往第3页的按钮，代码就是这样：

<a href="http://www.myWebsite.com/search/?keyword=someword&page=3&skip=5"></a>

服务器会根据你传输的参数，对应渲染好模板啦。

所以具体哪种方式，是根据你的业务来的，bootstrap在这中间不起什么关键作用。

Answer 2

所以说答主是想做出什么样的网页。
一般来说每个按钮就是一个链接，点击第二页就跳到另一个页面去了，动态变化也是看不见的了，只用把第二个页面的.ative类名设置好就行了，bootstrap给这种没用的功能干嘛。。
当然不用每个页面都写一个html，后端渲染或者ajax获得数据重新渲染就行了，不过我觉得不用说这么复杂的东西，答主连网页的理解都错了吧。

Answer 3

https://github.com/ChobitsSP/vue-pagination

Answer 4

bootstrap只有样式，所以你要做的是根据后端返回的数据(做分页一般会返回给你当前页数，总数，每页显示多少)，按照bootstrap的结构来创建一个ul，添加恰当的class即可。

Answer 5

如果可以用angular直接用 ui bootstrap的分的 directive 可以直接用。而且很强大。

Answer 6

bootstrap仅仅只是提供了样式，但是我们知道分页是用来展示数据的，因此一定会设计到数据的交互。
而在数据比较多的时候，自然就会有分页展示的需求。

实现分页大概有两种方式。

1. 一次ajax请求到所有的数据。假如请求到的是一个叫做res的数组/json，那么我们就需要一个函数来控制数据的展示，通过点击下面的按钮来改变页数pageIndex，来改变数据。

// res 请求到的数组，pageIndex当前页码
function showData(res, pageIndex) {}

页码的改变由点击事件来控制，你可以取按钮元素的内容，也可以将页面保存在按钮元素data-index这样一个属性里。页面改变之后，运行showData刷新数据展示

另外一种就是点一个按钮，只请求一页的数据。通过向接口传递当前页码来获取对应的数据，这个时候控制页面展示的方法就会稍作改变

function showData(res) {}

总的来说，虽然分页不是一个太难掌握的技术点，但是涉及到的知识点又比较多，一时半会儿估计也说不完，如果缺漏太多的话也很难理解。所以我就这样尽力回答吧。希望对你有帮助。

Answer 7

bootstrap只给了分页的样式，没有给分页的js，所以需要自己写或者找个插件，自己写也很简单的