[Bootstrap] bootstap table插件实现表格分页查询

桃扇骨 2022-01-28 05:43 317阅读 0赞

### bootstap table插件 ###

在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-\*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

文档参考：

在GitHub上Bootstrap-table的源码地址是：[https://github.com/wenzhixin/bootstrap-table][https_github.com_wenzhixin_bootstrap-table]

Bootstrap-table的文档地址：[http://bootstrap-table.wenzhixin.net.cn/][http_bootstrap-table.wenzhixin.net.cn]

Bootstrap-table的各种样例：[https://github.com/wenzhixin/bootstrap-table-examples][https_github.com_wenzhixin_bootstrap-table-examples]

### 分页查询demo ###

引入脚本

html中创建table

js配置table并请求数据

$table.bsTable({
    		toolbar: '#toolbar',
    		idField: 'productCode',
    		search:true,
    		url: '${pageContext.request.contextPath}/mode/clean/list',	// 请求后台的URL
    		columns: [
    			{field: 'state', checkbox: true},
    			{field: 'rulesName', title: '规则名称', align: 'center'},
    			{field: 'rulesLevel', title: '规则等级', align: 'center'},
    			{field: 'rulesContent', title: '规则内容', align: 'center'},
    			{field: 'rulesCode', title: '规则标识', align: 'center'},
    			{field: 'rulesValue', title: '规则类别', align: 'center'},
    			{field: 'rulesDescribe', title: '规则描述', align: 'center'},
    			{field: 'rulesStart', title: '规则状态', align: 'center', formatter: function(value, row, index){
    				if(value){
    					return '<span class="label label-sm label-info">有效</span>';
    				}else{
    					return '<span class="label label-sm label-danger">无效</span>';
    				}
    			}},
    			{field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
    		]
    	});

后台使用的是mybatis-generator生成的mapper文件和实体类。只需要调用接口生成函数即可；

@RequestMapping(value = "/list", method = RequestMethod.POST)
    	@ResponseBody
    	public PageModel<TRules> list(int offset, int limit, String search, String sort, String order) {
    		// 使用父类封装方法（推荐）		
    		this.setDataSource("extendDataSource");
    		this.offsetPage(offset, limit);
    		List<TRules> list = mapper.selectByExample(null);
    		this.clearDataSource();
    		return this.resultPage(list);
    	}

mybatis-generator参考：[https://blog.csdn.net/weixin\_40902527/article/details/85624484][https_blog.csdn.net_weixin_40902527_article_details_85624484]

界面效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

[https_github.com_wenzhixin_bootstrap-table]: https://github.com/wenzhixin/bootstrap-table
[http_bootstrap-table.wenzhixin.net.cn]: http://bootstrap-table.wenzhixin.net.cn/
[https_github.com_wenzhixin_bootstrap-table-examples]: https://github.com/wenzhixin/bootstrap-table-examples
[https_blog.csdn.net_weixin_40902527_article_details_85624484]: https://blog.csdn.net/weixin_40902527/article/details/85624484
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: /images/20220128/482317459faa4e07824495a574a75458.png