BootstrapTable(附源码) Bootstrap结合BootstrapTable的使用,分为两种模试显示列表。
2015-08-17 16:24
856 查看
引用的css:
<link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />
引用的JS:
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>
常用方法:
刷新表格:$table.bootstrapTable('refresh');
获取选择的行:$table.bootstrapTable('getSelections');
1.服务端请求:即当数据量大,千百万条数据的情况下,只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。
前端代码:
服务器端代码:
注意返回的格式:要返回总记录数total及分页后数据rows。
未解决问题:导出Excel时,超出65536行数据时,会异常。怎样解决这个问题?
2.客户端请求:当数据量较少,只有上千条数据时,一次性将所有数据返回给客户端,无论点下一页,或搜索条件时,不向服务端发请求,实现全文检索。
这个比较简单,将sidePagination属性设为 "client",因为客户端会处理分页和全文检索,无需向服务器端发请求,所以也无需传递参数。
前端JS:
后台直接返回Json数据即可。
后台代码:
源码下载
<link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />
引用的JS:
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>
常用方法:
刷新表格:$table.bootstrapTable('refresh');
获取选择的行:$table.bootstrapTable('getSelections');
1.服务端请求:即当数据量大,千百万条数据的情况下,只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。
前端代码:
服务器端代码:
注意返回的格式:要返回总记录数total及分页后数据rows。
未解决问题:导出Excel时,超出65536行数据时,会异常。怎样解决这个问题?
2.客户端请求:当数据量较少,只有上千条数据时,一次性将所有数据返回给客户端,无论点下一页,或搜索条件时,不向服务端发请求,实现全文检索。
这个比较简单,将sidePagination属性设为 "client",因为客户端会处理分页和全文检索,无需向服务器端发请求,所以也无需传递参数。
前端JS:
后台直接返回Json数据即可。
后台代码:
源码下载
相关文章推荐
- bootstrap布局 网格系统
- bootstrap布局 网格系统
- bootstrap单击导航条下的li后,自动收回
- bootstrap的datepicker控件使用心得
- bootstrap link
- 使用bootstrap返回空白页面问题
- bootstrap 模态框 删除确认
- Bootstrap下拉菜单dropdown-menu
- 在ASP.NET MVC中使用 Bootstrap table插件
- Bootstrap全屏
- Bootstrap的clearfix
- Bootstrap3组件--2
- 《基于BootStrap3的JSP项目实例教程》第4讲
- bootstrap轮播和百叶窗
- bootstrap之模态框
- bootstrap3学习1:响应式布局layout
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- Boostrap入门+样式学习--贰--(慕课网大漠《玩转bootstrap》[基础])
- datatables配合bootstrap样式进行ajax数据交互并生成表格
- 拥Bootstrap入怀——幻灯片大屏轮播篇