bootstrap分页问题

问题描述:

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

我想实现的效果就是这样的:
图片描述
图片描述

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

目前想到的解决办法:

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

谢谢各位!!!

阅读 7.2k
评论
    7 个回答
    • 2.6k

    看楼主的问题应该不止是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在这中间不起什么关键作用。

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

        • 2.7k

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

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

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

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

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

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

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

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

            function showData(res) {}

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

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

                撰写回答

                登录后参与交流、获取后续更新提醒