bootstrap，bootstrap-table，bootstrapValidator，animate，layer配合起来搞事情

资源准备（just download）

bootstrap：

http://www.bootcss.com/

bootstrap-table：

http://bootstrap-table.wenzhixin.net.cn/

bootstrapValidator：

http://plugins.jquery.com/bootstrapValidator/

animate:

https://www.bootcdn.cn/animate.css/

layer:

https://layer.layui.com/

页面引用：

<!-- CSS -->
<link href="/resource/css/bootstrap.min.css" rel="stylesheet" />
<link href="/resource/css/bootstrap-table.min.css" rel="stylesheet" />
<link href="/resource/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="/resource/css/animate.min.css" rel="stylesheet" />

<!-- JS -->
<script src="/resource/js/jquery-3.3.1.min.js"></script>
<script src="/resource/js/bootstrap.min.js"></script>
<script src="/resource/js/bootstrap-table.min.js"></script>
<script src="/resource/js/bootstrap-table-ja-JP.min.js"></script>
<script src="/resource/js/bootstrapValidator.min.js"></script>
<script src="/resource/js/layer/layer.js"></script>

bootstrap-table (jsp)：

<table id="tab" class="table table-hover"></table>
<div id="toolsbar" class="btn-group pull-right" style="margin-right: 20px;">
    <button id="btn_edit" type="button" class="btn btn-default" style="border-radius: 0">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>EDIT
    </button>
    ......
    ......
</div>

bootstrap-table (js)：

var TableInit = function() {
    var oTableInit = new Object();
    // 初始化Table
    oTableInit.Init = function() {
        // 根据窗口调整表格高度
        $(window).resize(function() {
            $('#tab').bootstrapTable('resetView', {
                height : tableHeight()
            })
        })

        $('#tab').bootstrapTable({
            url : 'xxx.do', // 请求后台的URL（*） SpringMVC框架服务器请求
            method : 'post', // 请求方式（*）
            toolbar : '#toolsbar', // 按钮栏
            striped : true, // 间隔色
            cache : false, // 缓存，默认为true
            pagination : true, // 分页（*）
            sortable : true, // 排序
            sortName : "no",
            sortOrder : "desc", // 排序方式
            queryParams : oTableInit.queryParams,// 传递参数
            queryParamsType : 'limit',
            sidePagination : "server", // 分页方式：client客户端分页，server服务端分页
            pageNumber : 1, // 初始化加载第一页，默认第一页
            pageSize : 10, // 每页的记录行数
            pageList : [ 10, 15, 20, 50 ], // 每页的行数
            search : false, // 是否显示表格搜索
            strictSearch : true,
            showColumns : true, // 是否显示所有的列
            showRefresh : true, // 是否显示刷新按钮
            minimumCountColumns : 2, // 最少允许的列数
            clickToSelect : true, // 是否启用点击选中行
            height : tableHeight(),// 高度调整
            uniqueId : "pjNo", // 每一行的唯一标识，一般为主键列
            showToggle : true, // 显示详细视图和列表视图的切换按钮
            toolbarAlign : 'right',
            buttonsAlign : 'right',// 按钮对齐方式
            cardView : false, // 是否显示详细视图
            detailView : false, // 是否显示父子表
            contentType : "application/x-www-form-urlencoded", // 解决POST提交问题
            columns : [ {
                title : '選択',
                field : 'select',
                checkbox : true,
                width : 25,
                align : 'center',
                valign : 'middle'
            }, {
                title : 'PJ番号',
                field : 'pjNo'
            }, {
                field : 'button',
                title : '編集',
                align : 'center',
                events : operateEvents,           // 最后这一列是【编辑】按钮，编辑按钮的事件
                formatter : addoperatebutton      // 【编辑】按钮html代码
            },]
        });
    };

    // 得到查询的参数
    oTableInit.queryParams = function(params) {
        var temp = {
            pageSize : params.limit, // 页面大小
            pageNumber : params.offset, // 页码
            searchText : '',
            sortName : '',
            sortOrder : '',
            // 搜索框参数
            search_bumon : $('#search_bumon').val(),
            search_pl : $('#search_pl').val(),
            search_bikou : $('#search_bikou').val(),
            search_gongoMae : $('#search_gongo').val()
        };
        return temp;
    };

    function addoperatebutton(value, row, index) {
        return [ '<button id="rowedit" type="button">編集</button>' ].join('');
    }

    window.operateEvents = {
        'click #rowedit' : function(e, value, row, index) {
            editdata(row);  // 这里使用【layer.open】实现代码弹子画面
        }
    };
    return oTableInit;
};

/**
 * 通过弹出子画面编辑数据，并刷新数据table
 * 
 * @param row
 * @returns
 */
function editdata(row) {
    // 使用 layer.open 弹出子画面
    layer.open({
        type : 2,
        title : '（変更）',
        maxmin : true,
        shadeClose : true, // 点击遮罩关闭层
        area : [ '30%', '45%' ],
        btn : [ '更新', '削除' ],
        btnAlign : 'c',
        content : [ 'xxxx.do', 'yes' ], // xxxx.do 这里如果要想给后台传入参数 xxxx.do?parm1=....的形式的话，后台是接受不到的。如果非要这么玩的话，参考一下 https://blog.csdn.net/u011752272/article/details/77097663/
        success : function(index, layero) {
            var pIframe = $('iframe')[0].contentWindow.document;// 找到弹出框父页面
            var subForm = $(pIframe).find('#editForm');// 通过复页面，定位子画面

            var tempfield = $('#ksNo', subForm); // 定位子画面项目
            tempfield.val(row.ksNo);// 给子画面设值
        },
        end : function() {
            getTableData(); // 刷新 bootstrapTable
        }
    });
};

function getTableData() {
    $('#tab').bootstrapTable('refresh', {
        url : 'XXX.do'
    });
}；

// 使用bootstrapValidator 验证画面项目
$('#editForm').bootstrapValidator({
    feedbackIcons : {
        valid : 'glyphicon glyphicon-ok',
        invalid : 'glyphicon glyphicon-remove',
        validating : 'glyphicon glyphicon-refresh'
    },
    fields : {
        a1 : {
            validators : {
                notEmpty : {
                    message : 'xxxxx'
                },
                stringLength : {
                    min : 4,
                    max : 7,
                    message : 'xxxxxxxxxxx'
                }
            }
        },
        a2 : {
            validators : {
                regexp : {
                    regexp : /^([1-9]\d{0,8}|0)([.]?|(\.\d{1,2})?)$/,
                    message : 'xxxxxxxxx'
                }
            }
        },
        Tel : {
            validators : {
                notEmpty : {
                    message : '手机号不能为空'
                },
                stringLength : {
                    min : 11,
                    max : 11,
                    message : '手机号必须为11位'
                },
                regexp : {
                    regexp : /^1(3|4|5|7|8)\d{9}$/,
                    message : '请填写正确的手机号'
                }
            }
        }
    }
});

// animate实现按钮点击后的滑动效果
$('#add').click(function() {
    $('.tableBody').addClass('animated slideOutLeft');
    setTimeout(function() {
        $('.tableBody').removeClass('animated slideOutLeft').css('display', 'none');
    }, 500) // 设置画面动作超时
    $('.addBody').css('display', 'block');
    $('.addBody').addClass('animated slideInRight');
    。。。。。。
})；