javascript - bootstrap分页问题
问题描述
问题描述：
数据库中数据量较大，想分页展示，但是看了bootstrap的好多教程都只给了html的，如何动态的使分页的数字变化等等都没有说。
我想实现的效果就是这样的：
可以点击之后进行变化的效果。但是现在不知道怎么写代码。查了好久也没有，bootstrap官网也没有相关的教程。
目前想到的解决办法：
搜了好多之后看到一个思路貌似可行的方法，是用js生成html然后加载的，点击的时候重新加载想要加载的本页数据，下面的分页也重新写一遍HTML。
想问问有没有更好的方法，或者更为简洁的，如果没有的话只能用这种方法了。
谢谢各位！！！
看楼主的问题应该不止是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之类的方法库可以，现在很多框架的模板功能也可以。
前端渲染的好处有很多，例如：
不用刷新页面，内容就更新了，用户体验好
服务器端压力比渲染+传输完整页面要小，等于把一些工作交由用户的浏览器完成
前后端逻辑分离，后端人员不用再关心前端逻辑，效率更高
当然前端渲染也有需要注意的，例如：
SEO问题。因为在这种方式下，除了第一页的数据之外（事实上可能第一页的数据也是动态加载的），其余所有数据内容都没有静态页面去展示，搜索引擎当然也就没法收录。当然这有对应的解决方法，这里不展开说了。
url问题。如果不做任何处理的话，请求内容、改变内容都是不会改变当前页面的url的，那么问题就是用户没法使用浏览器的导航功能前进或者后退，刷新的话还会直接回到第一页。这就是很多前端路由框架在解决的问题，jquery系的pjax或者senna.js这种独立的路由框架亦或是vue-router这种大型框架的路有插件都在完成这些工作。
后端渲染是更常见的处理方法。比如一个普通的CMS门户网站，要写一个搜索结果页的页面，那么工作流程可能是这样的：
前端把静态页面写完，给到后端，页面中例如文章标题、内容、日期的地方先写死。
后端根据前端给出的页面，把写死的部分对应的替换成后端暴露出的一些模板标签。（这一步也可能是前端做，总之需要一个人来做）
把写好的模板放在服务器储存view层文件夹里，当用户访问对应的url时，后端路由就会渲染对应的模板，在解析到模板标签时，就查询数据库把对应的数据填到对应的地方。最后把解析好的完整HTML文件传输给用户。
这样的话，你的分页组件的按钮其实就可以是绑定了对应url的a标签，比如前往第3页的按钮，代码就是这样：
<a href="http://www.myWebsite.com/search/?keyword=someword&page=3&skip=5"></a>服务器会根据你传输的参数，对应渲染好模板啦。
所以具体哪种方式，是根据你的业务来的，bootstrap在这中间不起什么关键作用。
这篇关于javascript - bootstrap分页问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
