bootstrap table插件运用

 首先我们需要去下载相应的 jquery bootstrap  bootstrap-table的包。

注意bootstrap，下载编译过的压缩包中只有三个文件夹 css ，fonts， js

       1. jquery-2.2.1.js  ----  最新的jquery文件

       2. bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 压缩文件

       3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 压缩文件

       4.bootstrap-table-all.js ---最新bootstrap-table下的js文件

       5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件

       6.bootstrap-table.min.css ---最新的bootstrap-table下css压缩文件

这六个必须配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加载了这个文件我们的一些表格显示信息才会被设置成中文。

1、引入js、css

?

1 2 3 4 5 6 7 8

<!--css样式--> < link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet" > < link href = "css/bootstrap/bootstrap-table.css" rel = "stylesheet" > <!--js--> < script src = "js/bootstrap/jquery-1.12.0.min.js" type = "text/javascript" ></ script > < script src = "js/bootstrap/bootstrap.min.js" ></ script > < script src = "js/bootstrap/bootstrap-table.js" ></ script > < script src = "js/bootstrap/bootstrap-table-zh-CN.js" ></ script >

2、table数据填充

bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据

?

1 2 3 4 5 6

< table data-toggle = "table" >   < thead >   ...   </ thead > </ table >   ...

?

1 2 3

$( '#table' ).bootstrapTable({    url: 'data.json'   });

 第二种方式较第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。

//建议数据的格式以[{},{},{}]这种形式为主。否则的话排序方面会有bug

$('#id').bootstrapTable({
  //url: influ_url,
  data:data,
  search: true,//是否搜索  
  pagination: true,//是否分页  
  pageSize: 5,//单页记录数  
  pageList: [5, 10, 20, 50],//分页步进值   
  sidePagination: "client",//服务端分页   
  searchAlign: "left",   
  searchOnEnterKey: false,//回车搜索  
  showRefresh: true,//刷新按钮   
  showColumns: true,//列选择按钮   
  buttonsAlign: "right",//按钮对齐方式    
  locale: "zh-CN",//中文支持   
  detailView: false,   
  showToggle:true,   
  sortName:'bci',  
  sortOrder:"desc",  
  columns: [      
  {          
    title: "",//标题      
    field: "",//键名      
    sortable: true,//是否可排序  
    order: "desc",//默认排序方式    
    align: "center",//水平        
    valign: "middle",//垂直      
    formatter: function (value, row, index) {     
    }    
  },    
  {         
    title: "",//标题     
    field: "",//键名    
    sortable: true,//是否可排序  
    order: "desc",//默认排序方式        
    align: "center",//水平       
    valign: "middle",//垂直         
    formatter: function (value, row, index) {      
    },   
  },          
  ], 

onCheck:function (row) {
            
        },
        onUncheck:function (row) {
           
        },
        onCheckAll:function (row) {
            
        },
        onUncheckAll:function (row) {
            
        },
onClickCell: function (field, value, row, $element) {
            
        } 
  onClickRow: function (rows, tr) {        
    

},  
  });
此插件运用起来相当方便实用，还有很多方法和属性没有举例，大家可以参考
http://bootstrap-table.wenzhixin.net.cn/zh-cn/  

此外大家也可以搜一下data-table这个插件，也不错。