文档章节

bootstrapTable

王静0716
 王静0716
发布于 2016/10/28 11:41
字数 244
阅读 56
收藏 1
    
  @ResponseBody
	@RequestMapping(value = "/queryStudent.json", method = GET)
	@ApiOperation(value = "查询学生")
	public JsonData<OutStudent> studentQueryByNameOrPhone(@RequestParam(required = false) String keyword,
			@RequestParam(required = false, defaultValue = "10") int limit, @RequestParam(required = false, defaultValue = "1") int offset) {

		List<OutStudent> students = stuCourseService.queryStudent(keyword,limit,offset);
		int total = stuCourseService.countStudent(keyword);
		JsonData<OutStudent> data = new JsonData<>();
		data.setTotal(total);
		data.setRows(students);
		return data;
	}

springmvc中的controller

jsp:

1、引入

<script
    src="<c:url value="/static/js/plugins/bootstrap-table/bootstrap-table.min.js"/>"></script>
<script
    src="<c:url value="/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"/>"></script>

2、页面

    <div class="row">
        <table id="querylist" class="table table-striped"></table>
    </div>

3、js

var $table = $('#querylist');
	$(function() {
		$table
				.bootstrapTable({
					columns : [
					        {
								field : 'name',
								title : '姓名',
								align : 'center'
							},……						
							{
								field : 'lastSignupTime',
								title : '最后一次报读学期',
								align : 'center',
								formatter : function(value, row, index) {
								      if(row.lastSignupTime){
								      var date = new Date(row.lastSignupTime);
                                      Y = date.getFullYear() + '-';
                                      M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                                      D = date.getDate() + ' ';
								      return Y+M+D;}
						        }
							},
							{
								field : '',
								title : '报班',
								align : 'center',
								formatter : function(value, row, index) {
									var s = '<button type="button" class="btn btn-primary" onclick="baoban('+ row.sno + ')">报班</button>';
									return s;
								}
							}],
					queryParams : queryParams,
					method : 'get',
					sortName : '',
					sortOrder : 'desc',
					pagination : true,
					sidePagination : 'server',
					pageNumber : 1,
					pageSize : 10,
					pageList : [ 5, 10, 20 ],
					url : hostUrl + '/stuCourse/queryStudent.json'
				});
				
	});
	function queryParams(params) {
		return {
			keyword : $("#keyword").val(),
			limit : params.limit,
			offset : params.offset
		};
	}
	function queryStudent(){
	    $table.bootstrapTable('refresh', {
			url : hostUrl + '/stuCourse/queryStudent.json'
		});
	}
	function baoban(sno){
	    window.location.href = hostUrl + '/stuCourse/courseQuery/' + sno;
	}
</script>

4、页面效果

© 著作权归作者所有

王静0716

王静0716

粉丝 30
博文 63
码字总数 27883
作品 0
深圳
程序员
私信 提问
在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理

在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和表格展示,而jstree树...

伍华聪
2018/10/22
0
0
bootstrapTable怎么直接显示ajax返回的xml格式数据

ajax已经返回xml格式,怎么在bootstrapTable中直接显示数据,就像返回的数据时json类型的那样 $("#table").bootstrapTable({ data:$(data).find("Body").find("Rows").find("Row") });......

xianghui93
2015/09/15
810
0
SSM框架(一)mybatis,sqlserver分页查询

1、利用BootstrapTable插件进行数据展示,指定sidePagination=‘server’之后,需要从后端进行分页,在请求‘information/getAllNews’的时候,会传递两个参数offset和limit,后台根据这两个...

HaierBrother
2018/07/26
1K
0
在modal中使用bootstrap table 下载按钮和影藏列按钮无效

@wenzhixin 你好,想跟你请教个问题:@wenzhixin 你好,想跟你请教个问题:就是在使用bootstrap table的时候 如果我在页面显示一个bootstrap table的话 然后在弹出modal再显示一个bootstrap...

mysilence
2015/12/16
2.1K
0
bootstrap table 修改列宽问题

如题:安装宽度100,300,500设置列宽,出来的表格列宽是均匀分配的,有知道怎么改么? html代码 js代码 $(function(){ $("#table").bootstrapTable("destroy").bootstrapTable({ url: "ur;",......

Freonever
2016/09/08
14.8K
2

没有更多内容

加载失败,请刷新页面

加载更多

离线环境玩Docker-镜像篇

接上一篇。之前联网环境的Docker已经安装成功了,那么一切都好办,思路就是把Docker镜像保存为文件,然后放到不能联网的电脑上面,导入镜像即可。 第一步:导出Docker镜像,这里以showdoc为例...

RippleChan
2分钟前
0
0
Spring Boot + Jpa + Thymeleaf 综合实践(增删改查示例)

在前面课程中,我们学习了 Spring Boot Web 开发、JPA 数据库操作、Thymeleaf 和页面交互技术,这节课综合这些内容做一个用户管理功能,包括展示用户列表(分页)、添加用户、修改用户和删除...

zw965
3分钟前
0
0
学习WEB前端开发是选择自学还是去培训机构?

WEB前端开发是目前最火的行业之一,竞争很大,工资很高,未来发展也极好。 我做WEB开发有很长一段时间,现在经常看见大家在留言问我想转行学习WEB前端但是不知道是选择自学,还是选择培训。 ...

说雾
19分钟前
6
0
redis匹配key并设置过期时间命令

redis-cli keys 'session*' | xargs -I {} redis-cli expire {} 1296000

为何不可1995
21分钟前
2
0
单点登录针对 vue 单页面模式下的 hash 问题

由于 hash 模式下,#/ 后面的参数无法传递到后台。 hash、hashchange事件 1、hash即URL中"#"字符后面的部分。   ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或nam...

jxlgzwh
22分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部