bootstrap table的使用

在html添加标签

<table id="job_list_table"></table>

设置js

$(function(){
    datatable.init_Table("job_list_table", "/test", "get");
});
var datatable = {
    init_Table: function (tablePosition,url,method) {
        $("#"+tablePosition).bootstrapTable({ // 对应table标签的id
            url: url,                         // 获取表格数据的url
            method: method,                   //请求方式（*）
            dataType: "json",                 //返回数据的格式
            cache: false,                     // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,                    //表格显示条纹，默认为false
            locale:'zh-CN',                   //中文支持
            undefinedText: "-",               //当数据为 undefined 时显示的字符。
            pagination: true,                 // 在表格底部显示分页组件，默认false
            pageList: [10, 20],               // 设置页面可以显示的数据条数
            pageSize: 10,                     // 页面数据条数
            pageNumber: 1,                    // 首页页码
            sidePagination: 'server',         // 设置为服务器端分页
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8", //post方法必须要这个，不然后台拿不到参数
            queryParams: function (params) {  // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                return {
                    pageSize: params.limit,   // 每页要显示的数据条数
                    offset: params.offset,    // 每页显示数据的开始行号
                    sort: params.sort,        // 要排序的字段
                    sortOrder: params.order,  // 排序规则
                    request_type: "job_list",
                    status: $("#status").val()//自定义查询条件
                }
            },
            sortName: 'createTime', // 要排序的字段
            sortOrder: 'desc', // 排序规则
            detailView : true,  // 展示详细信息
            detailFormatter : function (index, row) {
                var image = "";
                if (!(row.desc === "" || row.desc == null)) {
                    image = '<div align="left">' + row.desc + '</div>';
                }
                return image;
            },
            //按需求设置不同的样式：5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
            rowStyle: function (row, index) { 
                var strclass = "";
                if (!(row.desc === "" || row.desc == null)) {
                    strclass = 'success';
                }
                return { classes: strclass }// 给符合条件的行标记颜色 
                // 给文字标记颜色
                // var style = {};             
                // style={css:{'color':'#ed5565'}};                
                // return style;
            },
            onClickRow: function (row, index) { //放鼠标点击该行的时候触发的时间
                if (!(row.desc === "" || row.desc == null)) {
                    $("#modal-body").html(row.desc);
                    $("#modal-default").modal("show");
                }
            },
            columns: [
                {
                    field: 'id',
                    title: '序号', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                }, {
                    field: 'createTime',// 返回json数据中的name
                    title: '创建时间',// 表格表头显示文字
                    align: 'center',// 左右居中
                    valign: 'middle'// 上下居中
                }, {
                    field: 'creator',
                    title: '创建人',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'flag',
                    title: '状态',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'id',
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        var chakan = '<button class="btn btn-primary btn-xs" onclick="getJobDetail(\'' + row.id + '|' + row.jobid + '\')">查看</button>';
                        var shanchu  = '<button class="btn btn-primary btn-xs" onclick="delJob(\'' + row.id + '\')">删除</button>';
                        return chakan + "&nbsp;&nbsp;" + shanchu
                    }
                }
            ],
            formatLoadingMessage: function () {
               return "请稍等，正在加载中...";
            },
            formatNoMatches: function () {
                return '无符合条件的记录';
            }
        });
    }
}

 

 

如果要按照条件查询的话，只需要调用如下代码即可刷新表格的数据

$("#job_list_table").bootstrapTable('refresh');

注意：/test接口返回的数据必须包含{"total":200, "rows":[{"id":0,"name":"zhangshan"},{"id":0,"name":"lisi"}]}

 如果需要添加跳转到指定页，则添加如下javascript代码

(function ($) {
    'use strict';
    var sprintf = $.fn.bootstrapTable.utils.sprintf;

    $.extend($.fn.bootstrapTable.defaults, {
        showJumpto: false,
        exportOptions: {}
    });

    $.extend($.fn.bootstrapTable.locales, {
        formatJumpto: function () {
            return 'GO';
        }
    });
    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initPagination = BootstrapTable.prototype.initPagination;

    BootstrapTable.prototype.initPagination = function () {
        _initPagination.apply(this, Array.prototype.slice.apply(arguments));

        if (this.options.showJumpto) {
            var that = this;
            var $pageGroup = this.$pagination.find('div.pagination-detail');
            var $jumpto = $('<div class="pull-right pagination-jump" style="margin-top: 10px;margin-bottom: 10px;width:150px;"><div class="input-group"><div class="input-group-btn"><button type="button" class="btn btn-default">跳转到</button></div><input type="text" class="form-control"></div></div>');
            $pageGroup.after($jumpto);

            $jumpto.find('button').click(function () {
                that.selectPage(parseInt($jumpto.find('input').val()));
            });
        }
    };
})(jQuery);

　　表格属性参数需要添加showJumpto: true,