BootStrap 表格神器

jquery ui 加 bootstrap 最好不过。 bootstrap作为当下最火的前端框架，以其极简主义吸引着各路开发者选用。 而 bootstrapTable 作为一款前端表格插件，延续了bootstrap的风格样式，继承了jquery简单易用的特性。 需引入： [code lang="js"]jquery.min.js bootstrap.min.js bootstrap-table.js bootstrap-table-zh-CN.js [/code]

---

前台demo 这里要特别注意的是， field值得与数据库“列名”对应 sidePagination:"client" 表示客户端处理分页，小网站上千条数据没啥问题，数据量大须服务器端处理分页。 [code lang="js"] $('#table2').bootstrapTable({ url:'../manager.action',//servlet地址 dataType:"json",//数据类型 contentType: "application/x-www-form-urlencoded", method: 'get', pagination: true, //分页 singleSelect:false,//是否单选 striped: true,     //使表格带有条纹 pagination: true,    //在表格底部显示分页工具栏 pageSize:6,//每页显示条数 pageNumber:1, queryParams:'op=showUser',//参数 showColumns: true, showRefresh: true,//显示刷新控件 pageList: [5, 6, 7],//可选分页条数 uniqueId: "ID", minimumCountColumns: 2, clickToSelect: true, smartDisplay:true, sidePagination:"client",//客户端处理分页    服务器端处理用server columns: [{ field:'fid', title:'商品编号' }, { field:'fname', title:'商品名称', editable:true }, { field:'normprice', title:'原价', editable:true },{ field:'realprice', title:'现价', editable:true }, { field:'detail', title:'详情', editable:true }, { field:'fphoto', title:'图片', formatter:function(value,row,index){ var d = '<img src="../images/'+value+'" width="40px" height="30px" /> return d; } }, { field: 'operate', title: '操作', align: 'center', width: 100, formatter:function(value,row,index){ var d = &lt;&gt;'button class="btn btn-info" style="text-shadow: black 5px 3px 3px;" type="button"修改'; return d; } }, ] });[/code]

---

servlet端，dopost分发，op操作： [code lang="java"] Listlist =db.findfood(); Gson jb = new Gson(); PrintWriter out; out=response.getWriter(); out.println(jb.toJson(list)); out.flush(); out.close(); [/code] 最近又有新需求，想把网页的表格以excl导出来，而用bootStrap -table 就特别简单得让人难以置信了。 需新增 [code lang="js"] bootstrap-table-export.min.js js/tableExport.js js/jquery.base64.js[/code] 再在bootstrapTable( {中显示导出控件 [code lang="js"] showExport: true, //是否显示导出 exportDataType: "basic" //包含json，sql，excl等等诸多格式 [/code] 最终结果：

转载于:https://my.oschina.net/u/3090863/blog/796319