bootStrap-table(四) 后台分页

最新推荐文章于 2023-02-22 14:00:45 发布

原创最新推荐文章于 2023-02-22 14:00:45 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

本文将展示如何在BootStrap-Table中实现后台分页功能，通过实例代码详解整个过程，帮助读者理解并掌握这一技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

后台实现代码

$(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
                }

            ]
        });