BootstrapTable的使用方法

网页中表格的使用。

1、引入JS与CSS

<link href="css/bootstrap-table.min.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>

2、页面

<table class="table table-hover" id="theTable"></table>

3、js

var $table = $("#theTable")

$(function(){
    $table.bootstrapTable({
        url: "/listThreeYear", 
        dataType: "json",
        singleSelect: false,
        striped: true, //是否显示行间隔色
        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
        sortable: true, //是否启用排序 
        pagination: true,   //显示分页按钮
        sortName:"starttime",
        sortOrder:"desc", //默认排序
        pageNumber: 1, //初始化加载第一页，默认第一页
        pageSize: 10,   //默认显示的每页个数
        pageList: [10, 25, 50, 100],    //可供选择的每页的行数（*）
        queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort 
                            // 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
        queryParams:function(params){
            var temp = {     
                pageSize: params.pageSize,   //页面大小
                pageNumber: params.pageNumber,  //页码
                sortName: params.sortName,  //排序列
                sortOrder: params.sortOrder,    //排序方式
                queryJson: JSON.stringify(getQuetyData()),  //查询数据
            }
            return temp;
        },
        //search: true, 显示搜索框（客户端搜索）
        sidePagination: "server", //服务端处理分页
        //showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
        //cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        responseHandler:function(e){      //返回的数据进行格式化
            return e;
        },
        columns: [{  
            //field: 'Number',//可不加  
            title: '序号',//标题  可不加  
            align : 'center',
            valign : 'middle',
            width : 60 ,
            formatter: function (value, row, index) {  
                return index+1;  
            }  
        }, {
            title : '专项名称',
            field : 'special_value',
            align : 'center',
            width : 90 ,
            valign : 'middle',
        },{
            title : '备注',
            field : 'remark',
            align : 'center',
            width :  100,
            valign : 'middle',
            formatter : function(value,row,index){  
                if(value==""||typeof(value)=="undefined"){
                    value="-"
                        return value;
                }else{
                    value=value.replace(/。/g, '。<br/>');
                    return value;
                }
            } 
        },{
            title : '操作',
            field : 'id',
            align : 'center',
            width :  120 ,
            valign : 'middle',
            formatter : function(value,row,index){  
                var e = '<a href="javascript:void()" onclick="editProject(\''+ row.id + '\')">编辑</a> ';  
                var d = '<a href="javascript:void()" onclick="deleteProject(\''+ row.id +'\')">删除</a> '; 
                return e+d;
            } 
        }],
        onLoadSuccess: function(){  //加载成功时执行  
            //alert("加载成功"); 
            $("#theTable th").css("text-align","center");  //设置表头内容居中
        },  
        onLoadError: function(){  //加载失败时执行  
            alert("加载数据失败");  
        }  
    });
});

对于后台数据的处理

@RequestMapping(value="aa", method=RequestMethod.GET)
@ResponseBody
public JqGirdResult<Oil> aa(Page<Oil> page,Oil o){
    JqGirdResult<Oil> jqGirdResult = new JqGirdResult<Oil>();
    Page<Oil> result=oilService.listByPage(o,page);
    jqGirdResult.setRows(result.getResults());
    jqGirdResult.setTotal(result.getTotalRecord());
    jqGirdResult.setRecords(result.getPageNum());
    return jqGirdResult;

Page类的成员变量

    private int pageNum = 1;//页码，默认是第一页
    private int pageSize = 15;//每页显示的记录数，默认是5
    private int totalRecord;//总记录数
    private int totalPage;//总页数
    private String sortName;//排序列
    private String sortOrder;//排序方式
    private List<T> results;//对应的当前页记录

JqGirdResult类的成员变量

    private List<T> rows = new ArrayList<T>();//对应的当前页记录
    private Integer total = 0;//总条数
    private Integer page = 1;//当前页数
    private Integer records = 0;//总记录数