bootstrap Table学习

近期使用bootstrap Table做了一个列表查询，感觉bootstrap的功能还是很强大的。
由于项目时间比较紧并且第一次使用，用bootstrap table请求后台失败后，直接使用ajax请求（反正这个不会错）返回json数据给bootstrap table解析，自然就会生成一个table列表。
需求比较简单，用到的属性标签比较少，只配了分页与行间色。如下图;

代码如下：

function init(data){

    $('#tbid').bootstrapTable({
        striped: true,          //行间色
        pagination: true,
        pageSize: 10,
        pageNumber:1,
        pageList: [10, 20, 50, 100, 200, 500],
        columns: [
                  {
                      title: '序号',
                      field: 'ccode',
                      align: 'center',
                      formatter:function(value,row,index){  
                          return index+1;  
                     } 
                  }, 
                  {
                      title: '产品',
                      field: 'cName',
                      align: 'center',
                  }, 
                  {
                      title: '金额',
                      field: 'cMoney',
                      align: 'center',
                      sortable: true    // 开启排序功能
                  },
                  {
                      title: '开具时间',
                      field: 'kprq',
                      align: 'center',
                      sortable: true    // 开启排序功能
                  },
                  {
                      title: '预览及下载',
                      field: 'path',
                      align: 'center',
                      formatter:function(value,row,index){  
                            var a = "<div class=\"float-left\"><a target=\"_blank\" class=\"media\" id=\"pdfDemo\" href=\"http://ip:port//" + row.pdfname + "\"><img src=\"fapiao/images/preview.gif\" />预览</a></div>";

                            var b = "<div class=\"float-right\" ><a target=\"_blank\" href=\"downloadFile.jsp?path=z:/&pdfName=" + row.pdfname + "\" >点击下载</a></div>";
                            return a+b;
                       } 
                  }
          ],
          data : data,
    }); 
} 

//初始化建空表
init('');

//移除表数据
$('#tbid').bootstrapTable('removeAll');

//添加表数据，list里就是json数据
$('#tbid').bootstrapTable('append', list);

---

若需要如下图表格，这里提供官网地址供各位参考
http://issues.wenzhixin.net.cn/bootstrap-table/index.html