满足你使用bootstrap-table的基本需求 列表渲染 a标签的bug 添加按钮

如果你是初次 使用bootstrap-table这个插件可以参考   代码是我从项目中直接搬过来的 放心使用！！！

有疑问直接留下评论 我会经常看博客的！！！    如果看了还是不会用 直接在评论区留言 

建议多看官网：http://bootstrap-table.wenzhixin.net.cn/documentation/

中文文档：http://blog.csdn.net/rickiyeat/article/details/56483577

你可以看看以下我总结的几个基础使用场景  也许会对你有用

1》如何渲染列表   （这个是服务器端实现的分页   多数情况下都是服务器端执行的分页功能 这个你可以和后端沟通即可）

直接在html文件或者 jsp文件中 写入html代码如下

<table id="tableId"></table>

只需要这一个标签即可

对应的js代码如下：     （红色的代码  一个都不能少）

直接复制粘贴到你的项目----》更换你的table标签的id名---》更换你的借口url---》更换你的columns里面的参数

        $('#tabId').bootstrapTable({
            url: "/user/queryAllUser.do",
            method: 'post',
            pagination: true,
            queryParamsType: '',
            contentType: "application/x-www-form-urlencoded",//必须要有！！！！
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageCurrent: params.pageNumber,
                    pageSize: params.pageSize
                };
                return param;
            },//请求服务器时所传的参数
            sidePagination: 'server',//指定服务器端分页
            pageNumber: 1,
            dataField: "data",// json包裹的第一层是什么
            striped: true,                    //是否显示行间隔色
            cache: false,
            showRefresh: true,    //刷新
            buttonsAlign: 'left',
            searchAlign: 'left',
            selectItemName: 'checkbox',
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            maintainSelected: true,  //点击分页记住复选框的选择
            buttonsAlign: 'right',
            selectItemName: 'btSelectItem',
            onLoadSuccess: function () {
                $('.fixed-table-pagination .pagination a').attr('href', 'javascript:;');
            },
            responseHandler: responseHandler,
            //请求数据成功后，渲染表格前的方法
            onCheckAll: function (rows) {
                $('.precise_sevice .delect_selected').show();
            },
            onUncheckAll: function () {
                $('.precise_sevice .delect_selected').hide();
            },
            onCheck: function (row) {
                $('.precise_sevice .delect_selected').show();
            },
            onUncheck: function (row) {
                var tenent_tr = $('#tabId tbody tr');
                var tr_length = tenent_tr.length;
                for (var i = 0; i < tr_length; i++) {
                    if (tenent_tr.eq(i).hasClass('selected')) {
                        $('.precise_sevice .delect_selected').show();
                        return;
                    } else {
                        $('.precise_sevice .delect_selected').hide();
                    }
                }


            },
            columns: [
                {
                    checkbox: true,
                    field: 'checked',
                },
                {
                    field: 'userId',
                    title: 'id',
                }, {
                    field: 'userServiceName',
                    title: '昵称',
                },
                {
                    field: 'userRegistrationDate',
                    title: '注册时间',
                },
                {
                    field: 'userLogintype',
                    title: '登录设备',
                    formatter: ardorios
                },
                {
                    title: '详情',
                    formatter: aquire_details
                },
                {
                    title: '修改资料',
                    formatter: operateFormatter
                }
            ],
        });

    function responseHandler(result) {
        var state = result.state;//在此做了错误代码的判断
        if (state != 200) {
            alert("错误代码" + state);
            return;
        }
        //如果没有错误则返回数据，渲染表格
        return {
            total: result.data.pageObject.rowCount, //总页数,前面的key必须为"total"
            data: result.data.list //行数据，前面的key要与之前设置的dataField的值一致.
        };
    };

// 添加列表里面的添加按钮 -start
    function operateFormatter(value, row, index) {
        return [
            '<button id="table_amend" class="btn btn-success table_btn amend" type="button">编辑</button>',
        ].join('');
    };


    //判断手机类型 -start
    function ardorios(value, row, index) {
        if (value == 1) {
            return ['安卓'].join('');
        }
        if (value == 2) {
            return ['苹果'].join('');
        }
        if (value == 3) {
            return ['电脑'].join('');
        }
    }


    //获取详情信息-start
    function aquire_details() {
        return [
            '<span class="aquire_details">详情</span>'
        ].join('');
    }

   

 

2》 这个插件的分页有一个小的bug  他的a标签 里面的href属性值默认是#  这样会导致你在点击分页的时候 某种情况下（这个某种情况下面解释）会跳转到你最初的那个页面
    这个时候你必须用到onLoadSuccess这个事件 因为你要只是通过简单的页面刷新执行一个语句改变他的href值 会失效 因为那个时候列表还没有渲染  所以：
onLoadSueecss:function(){
   $(查看分页按钮的类名).attr("href","javascript:;");
}

//某种情况指的是 你可以尝试将鼠标移到两个不同页数的中间去查看 这是鼠标不再是手形 而是箭头 此刻你再去点击 会发生页面的跳转

3》 还有就是往bootstrap-table这个区域里面添加按钮 之类的  我使用的方法是通过选中class类名 然后直接append;

 如果是下拉框的话 可以通过后端给你传递参数实现填充下拉框中的内容 减少你append标签的代码量 如果少量的下拉选择可以直接append即可