bootstrap table基本语法

bootstrap table基本语法

bootstrap table 中文网 网址 ： https://www.bootstrap-table.com.cn/ 点击进入
HTML部分
<table id="puBmxqjh_table" ></table>
JS部分

   var templateTableParams = {
        classes: "table table-bordered table-hover",
        url: "后台访问路经",
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        cache: false,     //是否使用缓存，默认为true
        striped: true,    //是否显示行间隔色
        singleSelect: true,   //单选
        clickToSelect: true,  //是否启用点击选中行
        height:600,
        queryParams:function () {
            var params = {
                djh: $("#djh").val(),
                jhlb: $("#jhlb").val(),
                lxdh:$("#lxdh").val(),
                orderNo:$("#orderNo").val(),
                itemCode: $("#itemCode").val(),
                itemName: $("#itemName").val(),
                startDate:$('#startDate').val(),
                endDate:$('#endDate').val()
            };
            return params;
        },
        columns: [
            {
                checkbox: true
            },
            {
                title: '序号', halign: "center", align: 'center',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            },

    {
        field: 'djh', title: '单据号',halign:"center"
    },

    {
        field: 'jhlb', title: '计划类别', align:'center',halign:"center"

    },
    {
        field: 'lrrname', title: '采购员',align:'center', halign:"center"
    }
        ],
        cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
        trimOnSearch: true,
        onlyInfoPagination:false,//显示总记录数  必须打开pagination=true
        pagination: false,      //显示分页
        pageNumber: 1,             //初始化加载第一页，默认第一页
        pageSize:10,               //每页记录数
        pageList:[5,10,20],     //可供选择的每页的行数
        idField: 'id',
        uniqueId: 'id',
        smartDisplay:false,
        onPostBody:function (data) {
         //数据加载时执行
        },
        onDblClickRow: function (row) {
        //双击行时执行
        },
        onLoadSuccess: function(data){
        //数据加载完毕后执行
        }
    };
     $('#puBmxqjh_table').bootstrapTable(templateTableParams);                     

页面效果