bootStrap table 使用

来源：互联网发布：视频云平台阿里云编辑：程序博客网时间：2024/06/06 03:44

html:

<table id="listTable"class="table table-striped table-bordered table-hover text-center"><thead><tr class="info"><th class="text-center" data-field="index" >序号</th><th class="text-center" data-field="collegeName">院系</th><th class="text-center" data-field="cataCount">专业</th><th class="text-center" data-field="createDate">创建时间</th><th class="text-center tdLine-nowrap"data-formatter="operateFormatter"data-events="operateEvents"><iclass="fa fa-fw fa-cog txt-color-blue hidden-md hidden-sm hidden-xs"></i>操作</th></tr></thead></table>

js:

$(document).ready(function() {// 初始化列表initTable();//查询事件（初始化列表参数为空，查询时传入查询参数）$("#search").on("click", function(){$('#listTable').bootstrapTable('selectPage', 1);});});// 初始化列表function initTable() {// 初始化列表var table = $('#listTable').bootstrapTable({url : getContextPath() + '/training/deplist',method : 'GET',striped: true,  //表格显示条纹pagination : true,//在表格底部显示分页工具栏sidePagination : 'server',//表格分页的位置(服务端)cache: false, //是否使用缓存，默认为truepageNumber: 1, //初始化加载第一页，默认第一页pageSize : 10, //每页显示记录条数pageList: [5, 10, 15, 20, 25],//记录数可选列表uniqueId : 'id',//每一行的唯一标识，一般为主键列undefinedText : '',queryParams : function(params) {//查询参数,每次调用是会带上这个参数，可自定义 params.collegeName = $("#depart").val();// 院系名称return params;},responseHandler : responseHandler,//在表体上渲染并在DOM中可用。onPostBody : function() {//resetView ： 重置引导表视图，例如重置表高度。$('#listTable').bootstrapTable("resetView");//操作按钮鼠标经过显示   popover:启用弹出框  trigger() 方法触发被选元素的指定事件类型。$("a").popover({trigger : 'hover'});}});//根据窗口调整表格高度 resize ： 当调整浏览器窗口的大小时，发生 resize 事件。// $(window)  Window 对象表示一个浏览器窗口或一个框架。$(window).resize(function() {$('#listTable').bootstrapTable('resetView');});// 操作事件window.operateEvents = {// 编辑'click .edit' : function(e, value, row, index) {getInfo(row.uscId,row.collegeName, "EDIT");},'click .delete' : function(e, value, row, index) {deleteConfig(row.uscId, "DELETE");}};}//设置列表数据function responseHandler(res) {if ("success" == res.RET_CODE && res.rows != null) {$.each(res.rows, function(i, row) {row.index = res.pageIndex + i + 1;});return res;} else {return res;}}// 列表操作列格式化function operateFormatter(value, row, index) {var content = '<a class="edit" '+ ' rel="popover-hover" data-placement="top" data-content="编辑" '+ ' href="javascript:void(0)"> ' + ' 编辑 ' + ' </a> '+ '<a class="delete" '+ ' rel="popover-hover" data-placement="top" data-content="删除" '+ ' href="javascript:void(0)"> ' + ' 删除 ' + ' </a> 'return content;}

后台：

bootstrap-table要求服务器返回的json须包含：totlal，rows

阅读全文

0 0