Bootstrap_Table初识

最新推荐文章于 2021-06-04 04:58:46 发布

原创最新推荐文章于 2021-06-04 04:58:46 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript初始化Bootstrap表格，包括设置分页、行数、颜色交替等属性，以及如何定义表头和数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例：通过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