BootStrap-table表格 -- Demo

BootStrap + JQuery

业务1:

tips : (筛选部分 数据库中没有的参数可以传一个状态到后端 比如: -1, 0, 1... )
(后端持久层使用的SpringDataJpa,筛选框的参数也会作为条件参数,传到fandAll查询所有的方法中)
但是, 如果这个筛选框参数不固定, 后期还会增加, 就不能这样了, 我是直接把字符串传过去, 后台判断的 (模糊查询), 但感觉不太好 .

核心代码:

function tableBoxPeople() {
    $("#tables").bootstrapTable('destroy');  //加载前先销毁
    $('#tables').bootstrapTable({
        url: '/XXXXXX/findAll',
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        queryParamsType: 'limit',   //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
        queryParams: function (params) {  //参数
            let startTime = '';
            let endTime = '';
            let teacherName = '';

            if (appVue.date != null) {
                startTime = appVue.date[0];
                endTime = appVue.date[1];
            }
            let username = appVue.inp_search;
            teacherName = appVue.value;

            return {
                pageNum: params.offset / params.limit,
                pageSize: params.limit,
                startTime: startTime,
                endTime: endTime,
                username: username,
                teacherName: teacherName
            };
        }, // 向后台传递的自定义参数
        toolbar: "#toolbar",
        sidePagination: "true",
        striped: true, // 是否显示行间隔色
        sidePagination: 'server', //后端分页
        uniqueId: "id",
        pageSize: "10",
        pageList: [10, 20], //可选择单页记录数
        pagination: true, // 是否分页
        sortable: false, // 是否启用排序
        columns: [{
            field: 'id',
            title: '序号',
             70,
            formatter: function (value, row, index) { //行序号
                var options = $('#tables').bootstrapTable('getOptions');
                return options.pageSize * (options.pageNumber - 1) + index + 1;
            }
        },
            {
                field: 'username',
                title: '用户名称',
            },
            {
                field: 'eduTeacher',
                title: '帮教老师',
            },
            {
                field: 'status',
                title: '帮教状态',
                formatter: function (value, row, index) {
                    if (row.status === "已帮教"){
                        return '<span class="green"></span>'+row.status;
                    } else {
                        return '<span class="red"></span>'+row.status;
                    }
                }
            },
            {
                field: 'remark',
                title: '备注',
            },
            {
                field: 'createTime',
                title: '创建时间',
                 200,
            },
            {
                field: 'price',
                title: '操作',
                 120,
                align: 'center',
                formatter: actionFormatter,
            }
        ],
        responseHandler: function (res) {
            // debugger
            console.log(res)

            return {
                rows: res.data.data.content,
                total: res.data.data.totalElements,
                totalPages: res.data.data.totalPages
            }
        }
    })

    function actionFormatter(value, row, index) {
        var htm =
            '</button><button class="caozuo" data-toggle="modal" data-target="#edit" onclick=" updateModel.findByStudentId(' + row.id + ')">修改</button><button class="caozuo" onclick="del(' + row.id + ')">删除</button>'
        return htm;
    }
}

function del(id) {
    layer.confirm("确定要删除吗?", {title: '提示'}, function () {
        $.post("/XXXXXX/deleteById", {id: id}, function (res) {
            if (res.success) {
                layer.msg('删除成功', {icon: 1});
                tableBoxPeople();
            } else {
                layer.msg('删除失败', {icon: 1});
            }
        })
    }, function () {
        layer.msg('取消删除', {icon: 6});
    });
}

业务2:

核心代码:

$(function () { //进页面后加载 tableBox()方法
    tableBox()
});

//查询所有分页方法(后端持久层使用的spring-jpa,筛选框的参数也会作为条件参数,传到fandAll查询所有的方法中)
function tableBox() {
    $("#tables").bootstrapTable('destroy');  //加载前先销毁
    //$("#tables").bootstrapTable("hideLoading"); //这行是想解决加载表格时出现加载字样的问题, 但未解决
    $('#tables').bootstrapTable({
        url: "/XXXXXX/findAll", //请求接口url
        method: "post", //请求方式
        contentType: "application/x-www-form-urlencoded",  //内容类型
        sidePagination: "server", //分页端(server:服务器分页; client:客户端分页)
        queryParams: function (params) {  //参数
            return {
                pageNum: (params.offset / params.limit),  //修改默认分页参数: 当前页 pageNum
                pageSize: params.limit,         //修改默认分页参数: 每页条数 pageSize
                name: $("#schoolName").val()  // 这个是页面筛选框需要输入一个名字参数 name
            };
        },
        toolbar: '#toolbar',
        striped: false,
        cache: false,   //缓存
        pagination: true,
        sortable: false,  //是否排序
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 20],
        onClickRow: function (row, $element) {
        },
        responseHandler: function (res) {  //返回数据格式 !!!
            return res.data;
        },
        columns: [{
            field: 'no',
            title: '序号',
            '100',
            formatter: function (value, row, index) {  //序号
                var options = $('#tables').bootstrapTable('getOptions');
                return options.pageSize * (options.pageNumber - 1) + index + 1;
            }
        },
            {
                field: "schoolName",
                title: "学校名称",
            },
            {
                field: "addmissionNum",
                title: "录取人数",
                 100,
            },
            {
                field: 'price',
                title: '操作',
                 400,
                align: 'center',
                formatter: function (value, row) {

                    /**
                     * TODO 前端页面
                     * 已完成: 数据表格
                     * 未完成: 右边的按钮(查看信息需要跳转页面,前端还没给); 需要从后端传一个状态来判断是橘色还是灰色
                     *        
                     * TODO 后端
                     * 未完成: 共同问题(权限使用的shiro,用户id不需要传递,直接使用封装好的获取 当前已登录的用户 方法 Syscont.getUser()获取即可,参考个人中心页面中用到的接口)
                     */

                    // 查看信息
                    let showMsg = '<a href="javacript:void(0);" class="look" data-toggle="modal" data-target="#myModaltwo"><i class="fa fa-eye" aria-hidden="true"></i>查看信息</a>';

                     //橘色和灰色只显示一个颜色
                    // 橘色
                    let orange = '<a href="javacript:void(0);" class="orange" data-toggle="modal" data-target="#myModal">立即报名</a>';
                    // 灰色
                    let grey = ' <a href="javacript:void(0);" class="red" data-toggle="modal" data-target="#myModal" >取消报名</a>';
                    return showMsg + orange;
                }
            },

        ],
    })
}