Bootstarp-table入门

网友投稿 210 2022-11-27

同时得引入下面的js与css

OK现在我们看看这个handler.js

//存放主要交互逻辑的js代码$(function () { //初始化业务逻辑script loadGoods();})function loadGoods(){ $('#goods_table') .bootstrapTable( { url : '/beauty_ssm_cluster/goods/list.do', // 请求后台的URL（*） method : 'get', // 请求方式（*） pagination : true, search : true, // 显示搜索框 showToggle : true, // 是否显示详细视图和列表视图的切换按钮 sidePagination : "server", // 服务端处理分页 showColumns : true, // 是否显示所有的列 showRefresh : true,// 是否显示刷新按钮 columns : [ { field : 'goodsId', title : '商品ID' }, { field : 'title', title : '标题' }, { field : 'price', title : '价格' }, { field : 'state', title : '状态', formatter : function(value, row, index) { var ret = ""; if (value == 0) { ret = "下架"; } if (value == 1) { ret = "正常"; } return ret; } }, { field : 'number', title : '数量' }, { field : 'goodsId', title : '操作', formatter : function(value, row, index) { var ret = '购买 '; return ret; } }, ] });}

这里我要说一下那个搜索框,在搜索框里写入数据后,js会直接把值传给后台,从后台取到结果后就直接刷新table我们再看看后台的处理逻辑

@RequestMapping(value = "/list", method = RequestMethod.GET, produces = { "application/json;charset=UTF-8" }) @ResponseBody public BootStrapTableResult list(Integer offset, Integer limit,String search) { LOG.info("invoke----------/goods/list"); offset = offset == null ? 0 : offset;//默认便宜0 limit = limit == null ? 50 : limit;//默认展示50条 List list=null; System.out.println("search "+search); if (search==null) { list= goodsService.getGoodsList(offset, limit); }else { try { //这里得转码 否则会出问题 其实理论上 应该是前台做转码的 search=new String(search.getBytes("iso8859-1"), "utf-8"); System.out.println(search+" ppp "); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } list= goodsService.queryByField(offset, limit,search); } BootStrapTableResult result= new BootStrapTableResult(list); int count=goodsService.getGoodsCount(search); System.out.println("count: "+count); result.setTotal(count); return result; }

这个BootStrapTableResult里面有两个字段

private List rows;

private int total;

total存放的数据的总量

最后后台向前台返回一个json

加搜索版

在html里加上

当然我们就得看看reloadTable是什么样的$(function () { //初始化业务逻辑script loadGoods();})同时在bootstrapTable里面加上这个参数queryParams: function (param) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: param.limit, //页面大小 offset: param.offset, //页码

例如

源码下载

​​ total: ${totalPage}, page: ${currentPage}, maxVisible: 5, leaps: true, firstLastUse: true, first: '←', last: '→', wrapClass: 'pagination', activeClass: 'active', disabledClass: 'disabled', nextClass: 'next', prevClass: 'prev', lastClass: 'last', firstClass: 'first'}).on("page",function(event,num) { var url="getAllOpponent.action?byPage=ture¤tPage=" + num + "";// var type='${customer.type}';// var customerName='${customer.type}';// var clientName='${clientName}';/// if(type!="")// url+="customer.type="+type;// if(customerName!="")// url+="customer.name="+customerName;// if(clientName!="")// url+="clientName="+clientName;// alert(url); location.href = url;});

参考资料

​​​http://jb51.net/article/60965.htm​​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。