欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap_Table初识

程序员文章站 2022-06-20 20:23:36
...

例:通过JavaScript调用带有id表的bootstrap表。

<table id="table"></table>
$('#table').bootstrapTable({
// 基本属性
   pagination: true,                  //是否显示分页(*)
   pageNumber: 1,                       //初始化加载第一页,默认第一页
   pageSize: 20,						//每页展示的数据个数
   striped: false,						//是否各行变色
   minimumCountColumns: 10,            //最少允许的列数
   pageList: [30],        //可供选择的每页的行数(*)
   clickToSelect: true,               //是否启用点击选中行
   showExport: true,					//是否导出
   height: 660,						 //外层容器高度
   exportDataType: "basic",            //basic', 'all', 'selected'
// 相当于每一项的表头标题,field用于标识此列数的坐标
  columns: [{
    field: 'id',
    title: 'Item ID',
    formatter:function(value,row,index){
    /* formatter可以定义为一个function返回一段html代码,而这个function的第一个参数为当前字段值,								        									第二个参数为一整行数据。*/
    }
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],
  // data是表格的数据
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
  }, {
    id: 2,
    name: 'Item 2',
    price: '$2'
  }]
})

formatter使用参考链接:https://ask.fastadmin.net/article/8071.html