BootStracp使用分页

水深无声 2023-05-31 10:17 20阅读 0赞

**前提：需要引入两个个资源文件**

**body标签内留一个表格**

**在js中请求数据**

$(document).ready(function(){
    	var $table = $('#blogtable');
        $table.bootstrapTable({
        url: "./json/bloglist.json",
        method: 'get',
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        pagination: true, //分页
        sidePagination: "server", //服务端处理分页
        pageList: [5, 10, 25],
        pageSize: 5,
        pageNumber:1,
        //toolbar:"#tb",
        singleSelect: false,
        queryParamsType : "limit",
        queryParams: function queryParams(params) {   //设置查询参数
          var param = {
            pageNo: params.offset/params.limit+1,  //offset为数据开始索引,转换为显示当前页
            pageSize: params.limit  //页面大小
          };
          return param;
        },
        cache: false,
        columns: [
                {
                    checkbox: true
                },
                {
                    title: '博客标题',
                    field: 'title',
                    valign: 'middle'
                },
                {
                    title: '博客类型',
                    field: 'type',
                    valign: 'middle'
                },
                {
                    title: '时间',
                    field: 'creattime',
                    valign: 'middle'
                },
                {
                    title: '操作',
                    field: '',
                    formatter:function(value,row,index){
                        var f = '<a href="#" class="btn btn-gmtx-define1" onclick="delBook(\''+ row.id +'\')">查看</a> ';
                        return f;
                       }
                }
            ]
          });
    })

**json文件如下**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70][]

**测试效果如下**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70]: /images/20230531/0d3babf63d654698af6a260d5fc9e892.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70 1]: /images/20230531/66a5a8870f47411f9609f5c758bbc4bb.png