bootstrap-table 获取所有数据_Bootstrap table教程

Bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现将数据库中提取到数据在前端进行相应操作的功能

快速上手

对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一段时间更新,还有侧边栏的动态生成(bootstrap-treeview)也是在学习当中

快速使用:

• Download bootstrap-table hello demo
• 预览前端demo代码
• Clone the repo: git clone https://github.com/seltonGitHub/helloBootTable.git

没有配置java环境,移步JDK安装与环境变量配置;
没有配置tomcat环境,移步tomcat的下载和安装配置;
没有下载配置idea环境,移步IntelliJ IDEA安装以及配置;

为什么用它

• 学习成本低,配置简单,文档齐全
• 与Bootstrap无缝衔接,整体风格一致,也便于二次开发
• 开发者活跃,Github定期维护

它有什么

file list:

bootstrapDemo/
├── web/
│   ├── js
│   ├── WEB-INF
│   └── bootindex.html
└── src/
│   └── DataSendServlet.java

表单展示页面 (bootindex.html)
javascript文件 (showOrder.js)从服务器取得数据,然后渲染表格

详细

$("#table").bootstrapTable({
  method: "post",
  url: "获取后台数据的url",
  ... ...

});

这里的js语句的所有渲染操作是针对html页面中的id为table的一个table,所以不要忘了在导入了该js的html中构建出id为table的table

bootstrap-table中的重要键值的简单解释:

• url(必须修改)
• method
• pageSize(必须修改)
• jsonstyle(必须修改)
• columns(必须修改)
• contentType(必须填写)
• queryParams
• pageNumber
• 表格绑定事件

showorder.js会向服务器发起ajax访问

bootstrapTable构建元素解析:

url

$("#table").bootstrapTable({
  method: "post",
  url: "获取后台数据的url",
  ... ...

});

ajax访问到的后台路径(必须),该后台需要按照指定的json 格式返回数据

method

get发送的数据在请求报文的请求行,也就是url部分,而且参数如果有中文会出现乱码问题,而post发送的数据在报文实体,都应该是post,表单的提交也一般都是post

queryParams

不需要任何修改,相当于ajax中的data键,上面的method决定这些参数传递给后台的的传递方式.发送给后台的数据,给出实现表单分页的两个参数,offset和limit,在oTableInit.queryParams中给出,后台用request.getParameter()的方式拿到queryParams中传递过来的值,然后制定dao

pageSize

当前table一次最多显示多少行,也就是你的table的一页应该展现多少行,必须

pageNumber

起始页,一般是1不用改,这个和pageSize决定了queryParams中的offset的值,offset=(pageNow - 1) * pageSize,limit=pageSize

contentType

contentType: "application/x-www-form-urlencoded"

columns

$("#table").bootstrapTable({
  method: "post",
  url: "获取后台数据的url",
  data: [
        {field: 'testId', title: 'ID'},
        {field: 'testName', title: '姓名'},
        {field: 'testPassword', title: '密码'}
        ]  
      ... ...
  ]
});

你的table的表结构,以上例子表示表有三列,列的实际显示名字分别是ID,姓名,密码,但是field代表实际数据的名字,表中的数据是由于ajax向服务器发起访问,服务器返回给的数据中的rows的每一个json对象的键都会对应到field的列中-----服务器返还的值

jsonstyle