bootstrap-table初始化

引入所需css和js

 <link href="${ctx}/css/table/bootstrap-table.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/ftl/common/bootstrap.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table-locale-all.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/table/layer-v3.1.0/layer/layer.js"></script>

这些网上都有自己下载就好

接下来定义<table>所放的位置

 <div>
        <table id="tb_departments"></table>
    </div>

接下来就是初始化table了

function bootstrapInit() {
        var trueHeight =document.documentElement.clientHeight - document.body.offsetHeight;
        $("#tb_departments").bootstrapTable("destroy").bootstrapTable({
            url: 'queryDesignEchartsDetail.z',
            method: 'post',
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            toolbar: '#toolbar',
            striped: true,
            sortable: true,
            resizable:true,
            queryParams: function (param) {
                var allData = {
                    startDate: '<#if startDate ??>${startDate}</#if>',
                    endDate: '<#if endDate ??>${endDate}</#if>',
                }
                return allData;
            },
            height: trueHeight,
            filterControl: true,
            columns: [
                {
                    field: '', title: '序号', align: 'center',width:50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    },
                },
                {
                    field: 'orderno',
                    title: '份合同号',
                    align: 'left',
                    sortable: true,
                    width:'7%',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter: function (value, row, index) {
                        return "<a id='orderno'>" + value + "</a>"
                    },
                    events: 'operateEventsOrderno',
                    filterControl: 'input'
                },
                {
                    field: 'specailproductcode',
                    title: '特品单号',
                    align: 'left',
                    width:'7.2%',
                    sortable: true,
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'suborderno',
                    title: '合同小号',
                    align: 'left',
                    width:'8.5%',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return "<a id='suborderno'>" + value + "</a>"
                    },
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    events: 'operateEventsSuborderno',
                    filterControl: 'input'
                },
                {
                    field: 'productclass',
                    title: '特品类型',
                    align: 'left',
                    sortable: true,
                    width:'7%',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'producttype',
                    title: '产品型号',
                    align: 'left',
                    sortable: true,
                    width:'6%',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'departname',
                    title: '分配部门',
                    align: 'left',
                    width:'6%',
                    resizable:true,
                    sortable: true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'planstarttime',
                    title: '计划开始时间',
                    align: 'left',
                    sortable: true,
                    width:'7.5%',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'planfinishtime',
                    title: '计划结束时间',
                    align: 'left',
                    sortable: true,
                    width:'7.5%',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'tp_date',
                    title: '特品签发时间',
                    align: 'left',
                    sortable: true,
                    width:'14%',
                    resizable:true,
                    filterControl: 'input',
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                },
                {
                    field: 'finishdate',
                    title: '合同交期',
                    align: 'left',
                    sortable: true,
                    width:'7.5%',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'flag',
                    title: '是否超期',
                    align: 'left',
                    sortable: true,
                    width:'4%',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'status',
                    title: '任务状态',
                    align: 'left',
                    width:'4%',
                    sortable: true,
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    formatter:function (value, row, index) {
                        return "<span title='"+ value +"'>"+ value +"</span>";
                    },
                    filterControl: 'input'
                },
                {
                    field: 'jd',
                    title: '项目进度',
                    width:'4%',
                    align: 'left',
                    resizable:true,
                    cellStyle: {
                        css: {
                            "overflow": "hidden",
                            "text-overflow": "ellipsis",
                            "padding-left" : "3px",
                            "white-space": "nowrap"
                        }
                    },
                    sortable: true,
                    formatter: function (value, row, index) {
                        return "<a id='jd' title='"+ value +"'>" + value + "</a>"
                    },
                    events: 'operateEventsJd',
                    filterControl: 'input'
                },
            ],
            onDblClickRow: function (row) {
                var suborderno = row.suborderno;
                var productclass = row.productclass;

                layer.open({
                    type: 2 //Page层类型
                    ,
                    area: ['1000px', '600px']
                    ,
                    title: '特品详情信息列表'
                    ,
                    shade: 0.6 //遮罩透明度
                    ,
                    maxmin: true //允许全屏最小化
                    ,
                    anim: 1 //0-6的动画形式，-1不开启
                    ,
                    content: ['${ctx}/design/designEcharts/nodeFlowPage.z?orderNo=' + suborderno + '&productclass=' + productclass, 'no'] //0-6的动画形式，-1不开启
                });
            },
            onClickRow:function (row,$element) {
                $('.info').removeClass('info');
                $($element).addClass('info');
            },
        });
    }

这里面同时用了layer弹窗组件，和bootstrap搭配很好用，里面具体的属性自己可以去官网查看，也可以百度，不做一一赘述，共勉