bootstrap table前端分页

bootstrap table前端分页属性设置

前端分页就是一次把所有数据从服务器返回给网页，通过JS进行分页，用户点击下页不会发送新的请求到服务器。bootstrap table前端分页需要用到以下属性。

属性名称	值	说明
pagination	true	是否开启分页，开启后表格底部会自动生成分页码
pageNumber	1	初始化时，显示第几页
pageSize	20	每页显示20条数据
pageList	[20, 50, 100, 200, All]	用户可以选择每页显示多少条数据
paginationHAlign	left	页码显示在左边
paginationDetailHAlign	right	分页详情显示在右边

bootstrap table前端分页例子

 //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '名称'
        }, {
            field: 'StockNum',
            title: '库存'
        }];
 
        //bootstrap table初始化数据
        $('#table').bootstrapTable({
            columns: columns,
            data: getData(),
            classes: "table table-bordered table-striped table-sm table-dark", //设置表格样式
           height:400,
          //******前端分页设置****
           pagination:true,
           pageNumber:2,
           pageSize:10,
           pageList:"[10, 20, 50, 200]",
           paginationHAlign:"left",
           paginationDetailHAlign:"right"
           //******前端分页设置****
        });


        function getData()
        {
            var data = [];
            for (var i = 0; i < 200; i++)
            {
                var item = {
                    Id: i,
                    ProductName: '苹果',
                    StockNum: '200'
                };
                data.push(item);
            };
            return data;
        }

在线试一试