javascript - 如何实现一个简单的分页？

Question

表格中的数据是从后端传过来的 但是在数据量过大的时候分页该如何实现（只需要上一页下一页和页码就行）

Answer 1

这种情况，一般都是 后台先返回一定条数的数据，然后你点击下一页或者上一页的时候，再重新调用接口，然后你需要传的数据是 第几页和需要的数据量，接口比如是：

value="/list/teacher/validate/{pageSize}/{pageNo}"

分页的话，插件很多，可以网上找

http://www.oschina.net/projec...

还有一种是后端全部返给你，你前端先存在一个数组里，然后自己来分，不过不推荐，因为如果数据量太多的话，会影响体验，实现方法是

先把数据存放在一个对象数组里，比如：

var obj = [{
    "name": "shenmiweiyi",
    "QQ": 306451129,
    "email": "shenmiweiyi@163.com"

},
.......
 {
    "name": "kehao",
    "QQ": 254892313,
    "email": "kehao@163.com"

]

然后你再获取这个数组的长度，obj.length, 假设你是10条为一页，那就

var len =obj.length;
var page = Math.ceil(len/10) //获取页数

然后在你网上找的分页插件上 把页码数替换成 page，

当点击第一页时

//写一个方法，传入的参数是第几页和总的数据
function (pageNo, obj) {
    var pageData;
    
    //末尾页
    var n = pageNo * 10;
    
    //起始页
    var i = n - 10;
    for (i = 0; i < n - 1; i++) {
        pageData.push = obj[i]
    }    
    return pageData;
}

然后返回的pageData 就是当前页所要的数据了，大致就是这个思路，懂了吧？

Answer 2

这个是后端实现的， 前端不管这个。

Answer 3

这个简单的百度一下就好了呀，三言两语又说不清楚，前端分页实现方式也很多啊，但是如果数据量真的大的话，应该后端分页分好

Answer 4

通常数据量较大时后端也需要做分页。

而前端的分页写法其实就和一个导航条没什么区别，根据页码从后台获取数据，然后更新DOM而已。

当然，一次性获取数据也是一样的做法。

Answer 5

我用的bootstrapTable，有两种方式，一种是一次性从服务端把数据全拿到，然后前端做分页，例如查询用户列表的场景（数据量还好，最多几百条）；另一种是服务端分页，例如查询日志记录的场景（数据条较大，几千条+）

客户端分页

$('userList').bootstrapTable({
    pagination: true,               // 显示分页
    pageList: "[5, 10, 25, 50, All]",
    pageNumber: 1,                    // 初始化显示的页码
    pageSize: 10,                      // 每一页加载数据条数
    paginationPreText: '上一页',
    paginationNextText: '下一页',
    classes: 'table table-hover table-no-bordered',     // 删除表格的边框样式
    columns: columns,
    showExport: true,                     //是否显示导出
    exportDataType: 'basic',
    search: true,
    showFooter: true,
    
    exportDataType: 'all',
    // exportTypes: ['excel','pdf'],
    data: data
})

服务端分页

request几个关键参数：offset, limit, url
response返回的关键参数：total(数据总数，前端根据这个显示有多少页)

$('#reportList').bootstrapTable({
    pagination: true,               // 显示分页
    pageList: "[5, 10, 25, 50, All]",
    pageNumber: 1,                    // 初始化显示的页码
    pageSize: 10,                      // 每一页加载数据条数
    paginationPreText: '上一页',
    paginationNextText: '下一页',
    classes: 'table table-hover table-no-bordered',     // 删除表格的边框样式
    columns: [{
        field: 'Token',
        title: 'token',
        formatter: function(value, row, index){
            return "<a href='/report/"+value+"' target='_blank'>"+value+"</a>"
        }
    }, {
        field: 'Name',
        title: '姓名',
    }, {
        field: 'Phone',
        title: '手机号码',
    }, {
        field: 'IdCard',
        title: '身份证号码',
    }, {
        field: 'CreateTime',
        title: '开具报告日期',
        formatter: function(value, row, index){
            return moment(value).format('YYYY/MM/DD HH:mm:ss')
        }
    }],
    sidePagination: 'server',          // 服务端分页
    queryParams: function (params) {
        var param = {
            limit: params.limit,
            offset: params.offset,
            start: new Date($('#dateStart').val()).getTime(),
            end: new Date($('#dateEnd').val() + " 23:59:59").getTime() 
        }
        if(query != ""){
            param.query = query
        }
        return param
    },
    url: '/auth2.0/au_order/'
});

附上地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/