$("#table").bootstrapTable({ toolbar: '#toolbar', //自定义工具按钮 url: url, //请求后台的URL（*） method: 'get', //请求方式（*） cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） pageSize: 10, //每页的记录行数（*） pageList: [10, 20, 50, 100, 'All'], //可供选择的每页的行数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 search: true, //是否显示表格搜索 showSearchButton: true, //搜索确定按钮 {# showSearchClearButton: true, //清空输入框#} {# singleSelect: true,#} clickToSelect: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度 classes: "table table-bordered table-striped", showToggle: true, //是否显示详细视图和列表视图的切换按钮 columns: columns, //列参数 //detailView: true, //是否显示父子表 //得到查询的参数，会在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651 queryParams: function (params) { // params对象包含：limit, offset, search, sort, order //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 var temp; temp = { page: (params.offset / params.limit) + 1, //页码, //页码 size: params.limit //页面大小 //查询框中的参数传递给后台 //search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数 return temp; //操作栏的格式化 function actionFormatter(value, row, index) { var result = ""; result += ''; result += ''; result += ''; result += ''; result += ''; result += ''; return result;

操作栏上的标签点击后分别调用

 onclick="EditViewById(' + index +')" title="编辑"
 onclick="DeleteByIds(' + row.id + ')" title="删除"                                 
其中index参数是行在当前页面的索引，从0开始

row是当前行的数据，row.id是获取当前行的id，调删除接口的时候，只需知道删除的id项就可以
定义编辑EditViewById
<script>
    //定义表格操作编辑按钮 title="编辑"
    function EditViewById(index){
        alert(index);
{#        // 调出modal 框#}
        var row = $("#table").bootstrapTable('getData')[index];
        $("#modal_id").val(row.id);
        $("#modal_name").val(row.name);
        $("#modal_age").val(row.age);
        $("#modal_tel").val(row.tel);
        $("#myModal").modal();
</script>
实现效果，当点编辑按钮后，会根据当前行获取到索引index。

根据索引从bootstrapTable('getData')中得到对应行的数据。

定义保存按钮，发 POST 请求，接口地址: /teacher/info
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
    $("#sava-edit-btn").click(function(){
        $.ajax({
            cache: false,
            type: "POST", //方法类型
            dataType: "json",  //预期服务器返回的数据类型
            url: "/teacher/info", //url
            data: $("#model-form").serialize(),
            success: function (data) {
                console.log(data);//打印服务端返回的数据(调试用)
                if (data.msg == "success") {
                    {#关闭模态框并清除框内数据，否则下次打开还是上次的数据#}
                    $('#myModal').modal('hide');
                    {# 判断确实正确入库之后提示#}
                    console.log('提交数据成功');
                    {#刷新表格数据#}
                    $("#table").bootstrapTable('refresh');
            error: function () {
                alert('提交失败');
</script>
定义删除DeleteByIds
当点确定删除按钮的时候，需从模态框里面得到需要删掉的id值，可以在模态框写一个隐藏的input标签，把id值写进去，后面掉确定删除按钮的时候，就可以直接发请求传到服务端
{#    //删除按钮模态框#}
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="delModalLabel">操作提示:</h4>
                <div class="modal-body">
                    <input type="hidden" id="del_ids" name="ids" value="">
                    <h5 id="delBody">确定要删除选中的数据？</h5>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="deleteIds">确定删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
点删除按钮，需要拿到对应行的id值,调出模态框
<script>
    //定义表格操作编辑删除 title="删除"
    function DeleteByIds(id){
        var ids = [];
        ids.push(id);
        //alert(JSON.stringify(ids));
        //把ids的值给到隐藏输入框
        $('#del_ids').val(JSON.stringify(ids));
        //调出删除模态框
        $("#delModal").modal();
</script>
删除接口可以和批量删除接口公用同一个，ids传的值写一个arry数组格式[1]

定义保存按钮，发 DELETE 请求，接口地址: /teacher/info（跟批量删除按钮，公用一个删除接口）
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
// 点确定按钮发delete请求
$("#deleteIds").click(function() {
    var del_ids = $('#del_ids').val();
    $.ajax({
        cache: false,
        url: "/teacher/info", //url
        type: "DELETE",  //方法类型
        contentType:"application/json",//设置请求参数类型为json字符串
        dataType: "json",  //预期服务器返回的数据类型
        data: JSON.stringify({ids: del_ids}),
        success: function (result) {
            //隐藏模态框
            $("#delModal").modal('hide');
            if (result.msg == "success"){
                // 此处可以显示一个toastr消息
                alert('删除成功！')
            else {
                alert("删除失败")
        error: function () {
                $("#delModal").modal('hide');
                // 此处可以显示一个toastr消息
                alert("删除失败,服务器异常")
</script>
另外一种实现方式比这个更简单，参考下一篇添加events事件https://www.cnblogs.com/yoyoketang/p/15270208.html