bootstrap-table

痛定思痛。 2024-04-17 05:30 70阅读 0赞

<head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
      <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
      <script src="js/jquery-3.1.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
     </head>
     <body>
     <table id="table"></table>
     <script>
       $('#table').bootstrapTable({
       // 基本属性
          url:'',    //请求后台的url
          method:'',  //请求方式
          striped:true,
          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: 'haha',
           formatter:function(value,row,index){
           //formatter可以定义为一个function返回一段html代码，而这个function的第一个参数为当前字段值，                         第二个参数为一整行数据。*/
           }
         }, {
           field: 'name',
           title: 'hehe'
         }, {
           field: 'price',
           title: 'heihei'
         }],
         // data是表格的数据
         data: [{
           id: 1,
           name: 'Item 1',
           price: '$1'
         }, {
           id: 2,
           name: 'Item 2',
           price: '$2'
         }]
       })
      </script>
      </body>