bootstraptable查看详情_bootstrap table轻松实现数据表格

在使用bootstrap table时可能在很多时候回用的表格来显示数据，如果自己写那肯定没问题，但是数据展示出来就麻烦多了，然而bootstrap table 封装了一套完善的数据表格组件，把从后台请求的数据很容易就展示出来了，bootstrap table有两种实现方式，一种是通过table写定在html里面，另一种是通过js实现，js实现比较灵活，所以这里采用js方式，下面来看实现。

效果页

客户端

必须先引入相应的css、js等文件

Bootstrap-Table

添加记录

×

添加记录

取消

提交

$(function() {

//根据窗口调整表格高度

$(window).resize(function() {

$('#mytab').bootstrapTable('resetView', {

height: tableHeight()

})

})

$('#mytab').bootstrapTable({

url: "",//数据源

dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total

height: tableHeight(),//高度调整

search: true,//是否搜索

pagination: true,//是否分页

pageSize: 20,//单页记录数

pageList: [5, 10, 20, 50],//分页步进值

sidePagination: "server",//服务端分页

contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理

dataType: "json",//期待返回数据类型

method: "post",//请求方式

search