本文共 913 字，大约阅读时间需要 3 分钟。

什么是bootstrap-table

        本文介绍的bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

即bootstrap-table是一款插件。

引入文件相关文件

建一个table

   
        //data-url代表引用数据所在的地址    //data-pagination代表是否分页    
    
             
              
                   
ID
                   
Item Name
                   
Item Price
              
             
        
   

给每一列加编号

function idFormatter(value) {    return value + 1;}

整体代码：

    
        
       
        
           
   
    
    
             
              
                   
ID
                   
Item Name
                   
Item Price
              
             
        
   

效果：

注意：引入data1.json文件时要特别注意，文件名错误或者路径不对，都会报跨域请求错误

我这边的结构如下：     所以用的路径是 data-url="data/data1.json" 

代码链接：

提取码：ddnc

                       -------------------本文完-------------------

转载地址：http://hwxgn.baihongyu.com/