bootStrap-table(四) 后台分页

版权声明:转载请联系博主,一般是同意的 https://blog.csdn.net/weixin_43647224/article/details/84303775

 效果图

 后台实现代码

$(function () {
        var t = $("#table_server").bootstrapTable({
            url: Main.getContextPath() +'/sys/log/findall?access_token='+localStorage.getItem("token"),
            method: 'get',
            dataType: "json",
            striped: true,//设置为 true 会有隔行变色效果
            undefinedText: "空",//当数据为 undefined 时显示的字符
            pagination: true, //分页
            search: true, //显示搜索框
            cache: false,
            pageNumber: 1,//如果设置了分页,首页页码
            pageSize: 10,//如果设置了分页,页面数据条数
            pageList:[5,10,20,30],	//如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
            paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
            data_local: "zh-US",//表格汉化
            showExport: true,//是否显示导出

            sidePagination: "server", //服务端处理分页
            queryParams: function (params) {//自定义参数,这里的参数是传给后台的,我这是是分页用的
                var of=(params.offset/params.limit)+1;
                return {//这里的params是table提供的
                    page: of,//从数据库第几条记录开始
                    size: params.limit//找多少条
                };
            },
            idField: "id",//指定主键列
            columns: [
                {
                    title: 'id',//表的列名
                    field: 'id',//json数据中rows数组中的属性名
                    align: 'center'//水平居中
                },
                {
                    title: '操作人ID',
                    field: 'userid',
                    align: 'center',
                    sortable:true
                },
                {
                    title: '操作描述',
                    field: 'description',
                    align: 'center'
                },
                {
                   
                    title: '请求方法',
                    field: 'actionmethod',
                    align: 'center'
                },
                {
                   
                    title: '请求参数',
                    field: 'params',//可以直接取到属性里面的属性,赞
                    align: 'center'
                },
                {
                    title: '操作时间',
                    field: 'actiondate',
                    align: 'center',
                    sortable:true
                },
                {
                    title: '操作IP',
                    field: 'requestip',
                    align: 'center',
                    sortable:true

                },
                {
                    title:'创建时间',
                    field:'firsttime',
                    align:'center',
                    sortable:true
                }

            ]
        });

猜你喜欢

转载自blog.csdn.net/weixin_43647224/article/details/84303775