本文博主将从零开始,一步一步的告诉大家如何在前端用bootstrap Table插件展示一个表格
首先,要下载bootstrap Table插件所必须的js,地址:
本文需要注意点地方博主已用红笔圈起来
先展示效果图
接下来就开始使用bootstrap Table插件制作表格
将上述地址下载的插件js放到项目中,分别为js,css,fonts
此处有一个细节:
本文以MVC为例,当然WebForm也是可以的 使用步骤:1、新建一个控制器和视图,该视图引用了_Layout母页版
2、在视图里引用相应的js
在页面上写一个table表格容器,这一句必须要有
3、初始化bootstrap Table
4、使用bootstrap Table
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit,//页面大小
offset:params.offset
};
return temp;
};
return oTableInit;
};
function operateFormatter(value,row,index) {//赋予的参数
return [
'<a class="btn active disabled" href="#">编辑','<a class="btn active" href="#">档案','<a class="btn btn-default" href="#">记录','<a class="btn active" href="#">准入'
].join('');
}
5、后台url返回数据
在本文中,博主以匿名集合来设置数据,大家可以通过查询数据库获取数据
在此需要注意:
6、展示效果
发现出现了这个bug,这是怎么回事
在浏览器上打开源代码
发现多了一些其他js文件,这是layout母页版里引入的js文件
@@Scripts.Render("~/bundles/jquery")@
@RenderSection("scripts",required: false)
把上图中的红框里的js文件注释掉再运行