bootstrap-table的post数据问题

要怎么把post的数据从{"page":1,"rows":10}变为page=1&rows=10呢??因为bootstrap-tale中的queryParams:queryParams的参数是一个
function queryParams(){
var data={
page:1,
rows:10
}
}

3个回答

个插件直接post JSON.stringify后的json字符串?一般是会转为键值对对象的,如jquery的data可以配置为键值对字符串或者json对象,json对象会自动转为键值对字符串

gllstc
油腻的中二青年 恩,用JSON.stringify可以了。返回数据是正常的,但是显示不出在表格里面,我想问一下bootstrap table里的是不是要写个什么API里面的组件,才会把数据显示出来啊?
4 年多之前 回复

楼主 楼主 给table表格配置一个data-content-type="application/x-www-form-urlencoded" 就好了

楼主请问下怎么解决的啊?我也遇到了同样的问题……谢谢啦……

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
bootstrap-Table后台已返回json数据,前台不显示

//先销毁表格 $table.bootstrapTable('destroy'); //再初始化表格 $table.bootstrapTable({ //请求地址,此处数据为本地加载 url: path+"/Build/searchBuilding", //请求方式 method: "POST", //请求内容类型 contentType: "application/x-www-form-urlencoded", //数据类型 dataType: "json", //table高度:如果没有设置,表格自动根据记录条数觉得表格高度 //height: '582', //是否显示行间隔色 striped: true, //是否启用排序 sortable: true, //排序方式 sortOrder: "bid asc", //是否使用缓存 cache: false, //每行的唯一标识 uniqueId: "bid", //指定工具栏 toolbar: "#toolbar", //显示刷新按钮 showRefresh: true, //切换显示样式 showToggle: true, //默认显示详细视图 cardView: false, //是否显示搜索 search: false, //是否显示分页 pagination: true, //是否启用点击选中行 clickToSelect: false, //最少要显示的列数 minimumCountColumns: 2, //显示隐藏列 showColumns: true, //cell没有值时显示 undefinedText: '-', //分页方式:client客户端分页,server服务端分页 sidePagination: "server", //每页的记录行数 pageSize: 20, //初始化加载第1页,默认第1页 pageNumber: 1, //可供选择的每页的行数 pageList: "[10, 20, 50, 80, 100]", paginationFirstText: "首页", paginationPreText: "上一页", paginationNextText: "下一页", paginationLastText: "末页", //按钮样式 buttonsClass: 'btn', //分页器class iconSize: 'Page', //查询条件 queryParams: queryParams, //表头 columns: [{ field: 'bid',//id checkbox: true,//checkbox align: 'center',//对其方式 valign: 'middle'//对其方式 }, { title: '幢编号', field: 'building_id', align: 'center', valign: 'middle', }, { title: '幢名称', field: 'building_name', align: 'center', valign: 'middle' },{ title: '操作', field: 'operate', align: 'center', events: window.operateEvents, formatter: genderOpt//如需操作行数据,直接添加formatter对应函数名参数分别为value, row, index }], onLoadSuccess: function (res) {//可不写 //加载成功时 console.log(res); }, onLoadError: function (statusCode) { return "加载失败了"; }, formatLoadingMessage: function () { //正在加载 return "拼命加载中..."; }, formatNoMatches: function () { //没有匹配的结果 return '无符合条件的记录'; } }); json数据是{"rows":[{"bid":1,"building_id":"1","building_name":"1"},{"bid":2,"building_id":"2","building_name":"2"},{"bid":3,"building_id":"3","building_name":"3"}],"total":3}

bootstrap-table不顯示$.ajax返回的數據

查詢事件 function btnQuery() { $("#btnQuery").click(function () { var vUrl = "@Url.Content("~/SysManage/User/getUserInfo")"; var vUserNo = $("#txtUserNo").val(); var vUserName = $("#txtUserName").val(); var vdata; $.ajax({ url: vUrl, type: "post", dataType: 'json', async: false, data: { strUserNo: vUserNo, strUserName: vUserName }, success: function (result, status, xhr) { $table.bootstrapTable('load', result); }, beforeSend: function (xhr) { }, complete: function (xhr, status) { }, error: function (xhr, status, error) { } }); }); } console.log(result)的結果: [ { "ID": 1, "USERNO": "245", "USERNAME": "123", "USERPWD": null, "USERTEL": null, "USERMAIL": null, "CREATE_USER": null, "CREATE_DATE": null, "UPDATE_USER": null, "UPDATE_DATE": null } ] 如果設定一個變量var data1,console.log(result)出來的結果賦給這個變量,如下: var data1=[ { "ID": 1, "USERNO": "245", "USERNAME": "123", "USERPWD": null, "USERTEL": null, "USERMAIL": null, "CREATE_USER": null, "CREATE_DATE": null, "UPDATE_USER": null, "UPDATE_DATE": null } ] bootstrap-table又是可以顯示的。

Bootstrap-table 查询结果为无数据时显示图片的方法

``` formatNoMatches:function(){ return "..."; } ``` 这种方法好像只能修改显示的文字,如果想把提示问题改成提示图片应该如何操作?

bootstraptable-edit使用问题

![图片说明](https://img-ask.csdn.net/upload/201908/06/1565077495_685813.png) 外部的表格无法获取数据,检查contentType属性配置问题。 ``` $(function() { //初始化Table var oTable = new TableInit(); oTable.Init(); }); var TableInit = function() { var oTableInit = new Object(); //初始化Table oTableInit.Init = function() { $('#table').bootstrapTable({ url : 'list',//请求后台的URL(*) method : 'post',//请求方式(*) toolbar : '#toolbar',//工具按钮用哪个容器 striped : true,//是否显示行间隔色 cache : false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination : true,//是否显示分页(*) sortable : false,//是否启用排序 sortOrder : "asc",//排序方式 queryParams : oTableInit.queryParams,//传递参数(*) sidePagination : "server",//分页方式:client客户端分页,server服务端分页(*) pageNumber : 1,//初始化加载第一页,默认第一页 pageSize : 10,//每页的记录行数(*) pageList : [ 10, 25, 50, 100 ],//可供选择的每页的行数(*) search : true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 contentType : "application/x-www-form-urlencoded", strictSearch : true, showColumns : true,//是否显示所有的列 showRefresh : true,//是否显示刷新按钮 minimumCountColumns : 2,//最少允许的列数 clickToSelect : true,//是否启用点击选中行 height : 700,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId : "id",//每一行的唯一标识,一般为主键列 showToggle : true,//是否显示详细视图和列表视图的切换按钮 cardView : false,//是否显示详细视图 detailView : false,//是否显示父子表 columns : [ { field : 'id', title : '编号' }, { field : 'name', title : '名字' }, { field : 'price', title : '价格' }, { field : 'operate', title : '操作', formatter : operateFormatter //自定义方法,添加操作按钮 }, ], rowStyle : function(row, index) { var classesArr = [ 'white', 'lightblue' ]; var strclass = ""; if (index % 2 === 0) {//偶数行 strclass = classesArr[0]; } else {//奇数行 strclass = classesArr[1]; } return { classes : strclass }; },//隔行变色 }); }; //得到查询的参数 oTableInit.queryParams = function(params) { var temp = {//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit : params.limit,//页面大小 //pageNumber: params.pageNumber,//页码 offset : params.offset }; return temp; }; return oTableInit; }; function operateFormatter(value, row, index) {//赋予的参数 return [ '<a href="#" style="color:blue;" οnclick="edit(' + row.id + ')">编辑</a>|', '<a href="#" style="color:red;" οnclick="del(' + row.id + ')">删除</a>', ].join(''); } ``` table-edit.js ``` (function($){ 'use strict'; $.extend($.fn.bootstrapTable.defaults, { editable: false }); var BootstrapTable = $.fn.bootstrapTable.Constructor, _init = BootstrapTable.prototype.init, _initBody = BootstrapTable.prototype.initBody, _onSort = BootstrapTable.prototype.onSort, _append = BootstrapTable.prototype.append, _initHeader = BootstrapTable.prototype.initHeader ; //添加编辑表格默认属性,如何edit设置为false时,表示该列不可编辑 $.extend(true,BootstrapTable.COLUMN_DEFAULTS,{ edit:{ type:'text'//目前只支持 文本:text 下拉:select 日期:date } }); BootstrapTable.prototype.init = function () { _init.apply(this, Array.prototype.slice.apply(arguments)); var that = this; that.prevEditRow = null;//上一次编辑的行 that.columns = {};//列配置信息 that.insertRowVal = {};//新插入行的默认值 that.enableAppend = true;//允许添加新行 if (that.options.editable) { var columnObj = this['getColumns'](); $.each(columnObj,function(i,obj){ $.each(obj,function(z,col){ if(!isNaN(col.fieldIndex) && col.fieldIndex >= 0){ if(col.checkbox)col.edit = false; that.columns['column'+col.fieldIndex] = col; that.insertRowVal[col.field] = ''; } }); }); //this.initEdit(); } }; /*BootstrapTable.prototype.initHeader = function(){ _initHeader.apply(this, Array.prototype.slice.apply(arguments)); this.$container.find('.fixed-table-header').addClass('success'); };*/ BootstrapTable.prototype.initBody = function () { var that = this; _initBody.apply(this, Array.prototype.slice.apply(arguments)); if (!that.options.editable) return; this.initEdit(); //如果列是下拉框,则转换值为对应的文本 $.each(that.columns,function(indx,col){ if(col.edit && col.edit.type == 'select'){ col.edit = $.extend({},$.fn.bootstrapSelect.defaults,col.edit); if(col.edit.data.length > 0){ that.$body.find('>tr').each(function(){ if(that.getData().length < 1)return true; var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据 var $td = $(this).find('td').eq(col.fieldIndex); $.each(col.edit.data,function(i,data){ if(data[col.edit.valueField] == rowData[col.field]){ $td.html(data[col.edit.textField]); } }); }); } else if(col.edit.url){ $.ajax({ url:col.edit.url, type:'post', data:col.edit.paramsType == 'json' ? JSON.stringify(col.edit.params) : col.edit.params, dataType:'json', success: function(jsonLst) { col.edit.onLoadSuccess.call(this,jsonLst); that.$body.find('>tr').each(function(){ if(that.getData().length < 1)return true; var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据 var $td = $(this).find('td').eq(col.fieldIndex); $.each(jsonLst,function(i,data){ if(data[col.edit.valueField] == rowData[col.field]){ $td.html(data[col.edit.textField]); } }); }); col.edit.data = jsonLst; col.edit.url = null; }, error: function(xhr, textStatus, errorThrown){ col.edit.onLoadError.call(this); col.edit.data = []; col.edit.url = null; throw col.field+' 列下拉框数据加载失败'; } }); } } }); }; //根据行号删除指定行 BootstrapTable.prototype.removeRow = function (rowNum) { var that = this; var len = that.options.data.length; if (isNaN(rowNum)){ return; } if(that.$body.find('.editable-select').data('index') != rowNum){ recover(that); } //删除数据 that.options.data.splice(rowNum,1); if (len === that.options.data.length){ return; } var oldClass = {};//保存被标记修改的样式 that.$body.find('>tr').each(function(indx){ if($(this).hasClass('editable-modify')){ if(indx > rowNum){ oldClass[indx-1] = 'editable-modify'; } else{ oldClass[indx] = 'editable-modify'; } } }); //this.prevEditRow = null; //this.$body.find('>tr').removeClass('editable-select'); that.initBody(); //将标记改变过行的样式从新设置回去 for(var key in oldClass){ that.$body.find('>tr').eq(key).addClass(oldClass[key]); } //this.initEdit(); //没有数据时给提示加上样式 if(that.getData().length < 1){ that.$body.find('>tr').addClass('no-records-found'); } }; BootstrapTable.prototype.append = function (){ var that = this; //if(!that.enableAppend)return; var oldClass = {};//保存被标记修改的样式 that.$body.find('>tr').each(function(indx){ if($(this).hasClass('editable-modify') || $(this).hasClass('editable-insert')){ oldClass[indx] = 'editable-modify'; } }); arguments[0] = $.extend({},that.insertRowVal,arguments[0]); _append.apply(this,Array.prototype.slice.apply(arguments)); if (that.options.editable){ //that.initEdit(); setTimeout(function (){ //将标记改变过行的样式从新设置回去 for(var key in oldClass){ that.$body.find('>tr').eq(key).addClass(oldClass[key]); } that.$body.find('>tr:last').addClass('editable-modify'); that.$body.find('>tr:last').addClass('editable-insert');//双重保险,防止在快速点击添加时,为给新增行设置editable-modify属性 that.$body.find('>tr:last').click(); },60); } }; BootstrapTable.prototype.onSort = function () { _onSort.apply(this, Array.prototype.slice.apply(arguments)); var that = this; if (that.options.editable) { this.initEdit(); } }; BootstrapTable.prototype.getData = function () { return (this.searchText || this.searchCallback) ? this.data : this.options.data; }; BootstrapTable.prototype.getColumns = function () { return this.options.columns; }; /** * 获取有被修改过行的值 */ BootstrapTable.prototype.getModiDatas = function (){ var that = this; var datas = []; that.$body.find('.editable-modify').each(function(){ if(that.data[$(this).data('index')]){ datas.push(that.data[$(this).data('index')]); } }); return datas; }; /** * 获取指定列的和,参数为列下标 */ BootstrapTable.prototype.getColTotal = function (num){ var retVal = 0; this.$body.find('>tr').each(function(){ var colNum = 0; if($(this).hasClass('editable-select')){ colNum = $(this).find('td').eq(num).find('input').val(); } else{ colNum = $(this).find('td').eq(num).html(); } if(!isNaN(colNum)){//是数字才做想加 retVal += Number(colNum); } }); return retVal; }; /** * 创建可编辑表格 */ BootstrapTable.prototype.initEdit = function(){ var that = this, data = this.getData(); //this.$body.find('> tr').unbind('click').on('click' //this.$body.delegate('>tr','click' this.$body.find('> tr').unbind('click').on('click',function(){ var $tr = $(this); if($tr.hasClass('editable-select') || data.length < 1 || $tr.hasClass('no-records-found')){ return; } $tr.removeClass('no-records-found'); recover(that); that.prevEditRow = $tr; $tr.addClass('editable-select');//给当前编辑行添加样式,目前样式为空只做标识使用 that.$body.find('> tr').not(this).removeClass('editable-select'); $tr.find('td').closest('td').siblings().html(function(i,html){ initTrClick(that,this); }); }); //鼠标点击事件 $(document).bind('mousedown',function(event){ var $target = $(event.target); if(!($target.parents().andSelf().is(that.$body)) && !($target.parents().andSelf().is($('.datetimepicker')))){ setTimeout(function () { recover(that); //that.prevEditRow = null; //that.$body.find('> tr').removeClass('editable-select'); },10); }; }); }; $.fn.bootstrapTable.methods.push('getColumns', 'getModiDatas','removeRow','getColTotal'); /** * 给tr添加点击事件 */ function initTrClick(that,_this){ that.enableAppend = true; var $td = $(_this); var $tr = $td.parent(); var rowData = that.data[$tr.data('index')];//当前点击td所在行的数据 var tdIndex = $tr.children().index($td);//当前点击的td下标 var tdOpt = that.columns['column'+tdIndex]; if(!tdOpt.edit || typeof tdOpt.edit != 'object'){ return ; } $td.data('field',tdOpt.field); if(!$td.data('oldVal')){ $td.data('oldVal',$.trim(rowData[tdOpt.field])); } var height = $td.innerHeight() - 3; var width = $td.innerWidth() - 2; $td.data('style',$td.attr('style'));//保存原来的样式 $td.attr('style','margin:0px;padding:1px!important;'); var placeholder = ''; if(tdOpt.edit.required == true){ placeholder = '必填项'; } var value = rowData[tdOpt.field] == null || rowData[tdOpt.field] == ''?'':rowData[tdOpt.field]; $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;">' +'<input type="text" placeholder="'+placeholder+'" value="'+value+'" style="margin-left: 0px; margin-right: 0px; padding-top: 1px; padding-bottom: 1px; width:100%;height:100%">' +'</div>'); $td.width(width); var $input = $td.find('input'); if(!tdOpt.edit.type || tdOpt.edit.type == 'text'){ if(tdOpt.edit['click'] && typeof tdOpt.edit['click'] === 'function'){ $input.unbind('click').bind('click',function(event){ tdOpt.edit['click'].call(this,event); }); } if(tdOpt.edit['focus'] && typeof tdOpt.edit['focus'] === 'function'){ $input.unbind('focus').bind('focus',function(event){ tdOpt.edit['focus'].call(this,event); }); } $input.unbind('blur').on('blur',function(event){ if(tdOpt.edit['blur'] && typeof tdOpt.edit['blur'] === 'function'){ tdOpt.edit['blur'].call(this,event); } }); } else if(tdOpt.edit.type == 'select'){ $input.bootstrapSelect(tdOpt.edit); } else if(tdOpt.edit.type == 'date'){ $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;" class="input-group date form_datetime" data-link-field="dtp_editable_input">' +'<input class="form-control" type="text" value="'+value+'">' +'<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>' +'</div>' +'<input type="hidden" id="dtp_editable_input" value="'+value+'"/>' ); that.$body.find('.form_datetime').datetimepicker({ weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, language:'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', pickerPosition: 'bottom-left', showMeridian: 1 }); } } /** * 恢复tr,使之处于不可编辑状态 */ function recover(that){ var isModi = false;//判断行值是否变动过 if(that.prevEditRow != null){ that.prevEditRow.find('td').closest('td').siblings().html(function(i,html){ $(this).attr('style',$(this).data('style')); var textVal = $(this).find('input[type="text"]').val(); var hiddenVal = $(this).find('input[type="hidden"]').val(); if(typeof $(this).find('input[type="text"]').bootstrapSelect('getText') != 'object'){ $(this).find('input[type="text"]').bootstrapSelect('destroy'); } if(textVal != undefined){ if($(this).data('oldVal') != (hiddenVal?hiddenVal:$.trim(textVal)) && $(this).data('field')) { that.data[that.prevEditRow.data('index')][$(this).data('field')] = hiddenVal?hiddenVal:$.trim(textVal); isModi = true; } if(that.columns['column'+i].edit.required == true){ if(textVal == null || textVal == ''){ that.enableAppend = false; return '<span style="color:red;">必填项不能为空</span>'; } } return $.trim(textVal); } }); //新值跟旧值不匹配证明被改过 if(isModi || that.prevEditRow.hasClass('editable-insert')){ that.prevEditRow.addClass('editable-modify'); } else{ that.prevEditRow.removeClass('editable-modify'); } that.prevEditRow = null; that.$body.find('> tr').removeClass('editable-select'); } } })(jQuery); ``` 哪位大神能帮忙解决下

bootstrap table 怎么实现前两列固定冻结?

<table id="table" data-toggle="table" data-url="<%=webRoot%>/statistics/applyTop10User/list.do" data-width="90%" data-side-pagination="server" data-single-select="true" data-click-to-select="true" data-pagination="false" data-page-list="[10, 20, 50, 100]" data-toolbar="#toolbar" data-show-footer="false" data-method="post" data-content-type="application/x-www-form-urlencoded" data-query-params="queryParams" data-locale="zh-CN" data-search="false"> <thead> <tr> <th data-field="ST_NUMBER" data-width="20%" data-sortable="true" data-halign="center" data-align="center" data-valign="middle">排名</th> <th data-field="ST_ORGAN_NAME" data-width="25%" data-sortable="true" data-halign="center" data-align="center" data-valign="middle">部门名称</th> <th data-field="ST_USER_NAME" data-width="20%" data-sortable="true" data-halign="center" data-align="center" data-valign="middle">姓名</th> <th data-field="ST_JOB_NUMBER" data-width="20%" data-sortable="true" data-halign="center" data-align="center" data-valign="middle">工号</th> <th data-field="ST_COUNT" data-width="15%" data-sortable="true" data-halign="center" data-align="center" data-valign="middle">办理量</th> </tr> </thead> </table> 这是表格数据,能不能通过JS实现?

使用Bootstrap-Editable时,日期时间更新出错

<div class="post-text" itemprop="text"> <p>I'm trying to update a sql datetime. I just wana update the time and have some scripts for substr(). Now when i update the Hrs and min the day (d) get's reset to 1 in the first edit and 0 in a second edit.</p> <p>I'm using a html table generated by php and bootstrap-editable for editing the rows using Js and PHP.</p> <p>Why does the date return first 01 and then 00 in db?</p> <p>Ex. 2012-02-23 00:00:00 becomes 2012-02-01 00:00:00 in first update.</p> <p><strong>HTML</strong></p> <pre><code>&lt;a href='#' id='".$row['id']."' class='usr_stamp_out' data-name='usr_stamp_out' data-type='text' data-pk='".$row['id']."' data-url='php/time.php' data-title='Stämpla ut..'&gt;".substr($row['usr_stamp_out'],11,5)."&lt;/a&gt; </code></pre> <p><strong>PHP</strong></p> <pre><code>$id = $_POST['pk']; $updated_usr_stamp_out = $_POST['value']; if($row){ //Substring datetime to 0000-00-00 $usr_stamp_out_date = substr($row['usr_stamp_out'],0,9); //Add old date to updated time $new_usr_stamp_out = $usr_stamp_out_date." ".$updated_usr_stamp_out; //Prepare query $query = "UPDATE table SET usr_stamp_out = :usr_stamp_out WHERE id = :id"; // Security measures $query_params = array(':id' =&gt; $id,':usr_stamp_out' =&gt; $new_usr_stamp_out); //Connect and execute try { $stmt = $db-&gt;prepare($query); $result = $stmt-&gt;execute($query_params); } catch(PDOException $ex){ die("Failed to run query: " . $ex-&gt;getMessage()); } } </code></pre> </div>

bootstrap table 数据传递成功,就是不显示数据

bootstrap table 提示onloadsuccess 了,并且查看有数据,但是table就是不显示; 页面: <div class="wrapper"> <div class="fresh-table full-screen-table"> <div class="toolbar"> <button id="alertBtn" class="btn btn-default">Alert</button> </div> <table id="fresh-table" class="table" data-pagination="true" data-show-toggle="true" data-showColumns="true"> <thead> <tr> <th data-field="id" data-checkbox="true">id</th> <th data-field="username" data-sortable="true">Name</th> <th data-field="phone" data-sortable="true">Salary</th> <th data-field="actions" data-formatter="operateFormatter" data-events="operateEvents">Actions</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> JS: $(top.hangge()); var $table = $('#fresh-table'), $alertBtn = $('#alertBtn'), full_screen = false, window_height; $().ready(function(){ window_height = $(window).height(); table_height = window_height - 20; $table.bootstrapTable('destroy'); $table.bootstrapTable({ toolbar: ".toolbar", url : '<%=basePath%>receiving/queryList.do', //请求后台的URL(*) method : 'get', //请求方式(*) showRefresh : true, search : true, showToggle : true, showColumns : true, pagination : true, striped : true, sortable : true, height : table_height, pageSize : 25, pageList : [ 25, 50, 100 ], formatShowingRows : function(pageFrom, pageTo, totalRows) { }, formatRecordsPerPage : function(pageNumber) { return pageNumber + " rows visible"; }, icons : { refresh : 'fa fa-refresh', toggle : 'fa fa-th-list', columns : 'fa fa-columns', detailOpen : 'fa fa-plus-circle', detailClose : 'fa fa-minus-circle' }, onLoadSuccess : function(data) { alert(data.rows[0].username);//这边是有数据的 }, onLoadError : function(status) { alert(status); } }); window.operateEvents = { 'click .like' : function(e, value, row, index) { alert('You click like icon, row: ' + JSON.stringify(row)); console.log(value, row, index); }, 'click .edit' : function(e, value, row, index) { alert('You click edit icon, row: ' + JSON.stringify(row)); console.log(value, row, index); }, 'click .remove' : function(e, value, row, index) { $table.bootstrapTable('remove', { field : 'id', values : [ row.id ] }); } }; $alertBtn.click(function() { alert("You pressed on Alert"); }); $(window).resize(function() { $table.bootstrapTable('resetView'); }); }); function operateFormatter(value, row, index) { return [ '<a rel="tooltip" title="Like" class="table-action like" href="javascript:void(0)" title="Like">', '<i class="fa fa-heart"></i>', '</a>', '<a rel="tooltip" title="Edit" class="table-action edit" href="javascript:void(0)" title="Edit">', '<i class="fa fa-edit"></i>', '</a>', '<a rel="tooltip" title="Remove" class="table-action remove" href="javascript:void(0)" title="Remove">', '<i class="fa fa-remove"></i>', '</a>' ].join(''); }

bootstrap table onPostBody事件

![图片说明](https://img-ask.csdn.net/upload/201812/03/1543838613_826352.png) 我在bootstrap table中的field中定义的formatter formatter:function(value,row,index){ if (value == undefined) { value = "选择"; } var html = ""; html += "<input class = 'traningHour_date' >"; html += "-"; html += "<input class = 'traningHour_date' >"; return html; } 我想在onPostBody事件中获取$('.traningHour_date')元素,为什么会获取不到,onPostBody方法不就是在dom加载完成之后触发的事件吗? 为什么在onPostBody中获取的$('.traningHour_date').length为0,实际应该为12。 请教大神,这是为什么?什么时机才能获取到$('.traningHour_date')元素?

bootstrap table删除事件失效

window.operateRebateEvents = { 'click .removeRebate': function (e, value, row, index) { layer.confirm('您确定要删除吗?', function(layerindex){ $.ajax({ type: "post", data: row, url: 'admin.php?ac=crm_vendor&fileurl=crm&do=deleteRebate', success: function (data) { layer.close(layerindex); $('#rebateList').bootstrapTable('remove', { field: 'id', values: [row.id] }); layer.msg("删除成功",{ icon:1,time:2000 }) } }); }); } } 这是用的bootstrap-table中事件监听,但是隔了不久,点击删除按钮没有任何反应,也没有报错就很纳闷儿,求大神赐教

在bootstrap-table上加载数据

<div class="post-text" itemprop="text"> <p>I have made a website with bootstrap framework. In this website I load a table with records of the database, I using php for this.</p> <p>My question is: php is the best way to load a data on the table or there are a better option?</p> <p>Also when it's load the data in the website, first it show the text without format and after 1 second show with the css styles :(</p> <p>This is the code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;title&gt;AddCloud - Edicions&lt;/title&gt; &lt;link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;?php session_start(); if(isset($_SESSION['username']) and $_SESSION['username'] &lt;&gt; ''){ ?&gt; &lt;nav class="navbar navbar-default"&gt; &lt;div class="container-fluid"&gt; &lt;!-- Brand and toggle get grouped for better mobile display --&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt; &lt;a class="navbar-brand" href="http://www.addvantage.es"&gt;&lt;font color=#8abe44&gt;AddCloud&lt;/font&gt;&lt;/a&gt;&lt;/div&gt; &lt;!-- Collect the nav links, forms, and other content for toggling --&gt; &lt;div class="collapse navbar-collapse" id="defaultNavbar1"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active"&gt;&lt;a href="edicions.php"&gt;Edicions&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="productes.php"&gt;Productes&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="nav navbar-nav navbar-right"&gt; &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; &lt;?php echo $_SESSION['username'] ?&gt;&lt;/a&gt; &lt;ul class="dropdown-menu" role="menu"&gt; &lt;li&gt;&lt;a href="preferences.html"&gt;&lt;span class="glyphicon glyphicon-wrench"&gt;&lt;/span&gt; preferències&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="changepassword.html"&gt;&lt;span class="glyphicon glyphicon-lock"&gt;&lt;/span&gt; canviar password&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="logout.php"&gt;&lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt; log out&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- /.navbar-collapse --&gt; &lt;/div&gt; &lt;!-- /.container-fluid --&gt; &lt;/nav&gt; &lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="col-md-6 col-md-offset-3"&gt; &lt;h1 class="text-center"&gt;Miquel Alimentació&lt;/h1&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class="row text-center"&gt; &lt;div class="col-md-6 col-md-offset-3"&gt;&lt;h3&gt;Edició 12&lt;/h3&gt;&lt;/div&gt; &lt;/div&gt; &lt;hr&gt; &lt;div class="row"&gt; &lt;?php // Conexió a la base de dades include("connect.php"); $conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass"); //query $query = "SELECT * FROM produccion.ma_origen ORDER BY id_articulo ASC"; $result = pg_query($conn, $query); //se despliega el resultado echo "&lt;table id='table' data-toggle='table' data-toolbar='#toolbar' data-show-refresh='true' data-show-toggle='true' data-sort-name='name' data-sort-order='desc' data-show-columns='true' data-pagination='true' data-search='true' data-click-to-select='true'&gt;"; echo "&lt;thead class='thead-inverse'&gt;"; echo "&lt;tr&gt;"; echo "&lt;th data id='seleccion' data-switchable='false' data-checkbox='true'&gt;&lt;/th&gt;"; echo "&lt;th data id='pagina' data-sortable='true'&gt;pagina&lt;/th&gt;"; echo "&lt;th data id='codigo' data-sortable='true' data-switchable='false'&gt;codigo&lt;/th&gt;"; echo "&lt;th data id='descripcion' data-sortable='true' data-switchable='false'&gt;descripcion&lt;/th&gt;"; echo "&lt;th data id='pvp-cat' data-sortable='true'&gt;pvp-cat&lt;/th&gt;"; echo "&lt;th data id='pvp-lev' data-sortable='true'&gt;pvp-lev&lt;/th&gt;"; echo "&lt;th data id='pvp-and' data-sortable='true'&gt;pvp-and&lt;/th&gt;"; echo "&lt;th data id='pvp-cen' data-sortable='true'&gt;pvp-cen&lt;/th&gt;"; echo "&lt;th data id='pvp-nor' data-sortable='true'&gt;pvp-nor&lt;/th&gt;"; echo "&lt;th data id='pvp-vas' data-sortable='true'&gt;pvp-vas&lt;/th&gt;"; echo "&lt;th data id='fecha-mod' data-sortable='true'&gt;fecha-mod&lt;/th&gt;"; echo "&lt;th data id='user' data-sortable='true' data-visible='false'&gt;user&lt;/th&gt;"; echo "&lt;/tr&gt;"; echo "&lt;/thead&gt;"; echo "&lt;tbody&gt;"; while ($row = pg_fetch_row($result)){ echo "&lt;tr&gt;"; echo "&lt;td&gt;&lt;/td&gt;"; echo "&lt;td&gt;$row[2]&gt;&lt;/td&gt;"; echo "&lt;td&gt;$row[3]&lt;/td&gt;"; echo "&lt;td&gt;$row[4]&lt;/td&gt;"; echo "&lt;td&gt;$row[5]&lt;/td&gt;"; echo "&lt;td&gt;$row[6]&lt;/td&gt;"; echo "&lt;td&gt;$row[7]&gt;&lt;/td&gt;"; echo "&lt;td&gt;$row[8]&lt;/td&gt;"; echo "&lt;td&gt;$row[9]&lt;/td&gt;"; echo "&lt;td&gt;$row[10]&lt;/td&gt;"; echo "&lt;td&gt;$row[11]&lt;/td&gt;"; echo "&lt;td&gt;$row[12]&lt;/td&gt;"; echo "&lt;/tr&gt;"; } echo "&lt;/tbody&gt;"; echo "&lt;/table&gt;"; ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr&gt; &lt;div class="row"&gt; &lt;div class="text-center col-md-6 col-md-offset-3"&gt; &lt;p&gt;Copyright &amp;copy; 2016 &amp;middot; All Rights Reserved &amp;middot; &lt;a href="http://www.addvantage.es/" &gt;http://www.addvantage.es&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr&gt; &lt;/div&gt; &lt;script&gt; $("td").dblclick(function(){ alert("The paragraph was double-clicked"); }); &lt;/script&gt; &lt;script src="assets/jquery/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="assets/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="assets/bootstrap-table/dist/bootstrap-table.js"&gt;&lt;/script&gt; &lt;?php } else{ ?&gt;&lt;p&gt;La sesión no está activa, por favor ingrese &lt;a href="login_ok.html"&gt;aquí&lt;/a&gt;&lt;/p&gt; &lt;?php }?&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Please Could you help me with this issues?</p> <p>Thanks!</p> </div>

BootstrapTable,找不到匹配的记录

<div class="post-text" itemprop="text"> <p>For a few days I am busy solving following. I would like to load bootstrap table through a click into a <code>&lt;div&gt;</code>. My situation:</p> <p>index.php</p> <pre><code>&lt;div id="page-content"&gt; &lt;div id="data" class="animated"&gt;&lt;/div&gt; on page load, loaddata &lt;div id="table" class="animated"&gt; &lt;table id="report-table" data-toggle="table"&gt;&lt;/table&gt; &lt;/div&gt; hidden, onclick hide #data and show #table &lt;/div&gt; </code></pre> <p>loaddata.php</p> <pre><code>$tab_id = $_POST['tab_id']; $tab_name = $_POST['tab_name']; $selectTabbladen = $gebruiker_data-&gt;runQuery("SELECT * FROM documenten LEFT JOIN relaties ON documenten.relatie_id = relaties.relatie_id LEFT JOIN clienten ON documenten.clienten_id = clienten.clienten_id WHERE documenten.tab_id = $tab_id ORDER BY document_datum"); if (!$selectTabbladen-&gt;execute()) return false; if ($selectTabbladen-&gt;rowCount() &gt; 0) { $tabblad_data = array(); while ($tabdata = $selectTabbladen-&gt;fetch()) { $tabblad_data[] = array( "id" =&gt; $tabdata['id'], "document_soort" =&gt; $tabdata['document_soort'], "voornaam" =&gt; $tabdata['voornaam'], "relatie_naam" =&gt; $tabdata['relatie_naam'], "tabblad" =&gt; $tabdata['document_status'], "status" =&gt; $tabdata['document_status'], "aanmaak_datum" =&gt; $tabdata['document_datum'] = date('d M Y H:i:s'), "laatst_gewijzigd" =&gt; $tabdata['document_datumgewijzigd'] = date('d M Y H:i:s'), ); } print '&lt;/tbody&gt; &lt;/table&gt; '; $json_data = json_encode($tabblad_data); print_r ($json_data); } </code></pre> <p>ajax</p> <pre><code> $('body').on('click', '.tab_data', function () { content.hide(); $('#dataa').show(); var tab_id = $(this).attr("id"); $.ajax({ type: "POST", url: "loaddata.php", data: { tab_id: tab_id }, dataType:"json", success : function(data) { $('#report-table').bootstrapTable({ data: data }); } }); }); </code></pre> <p>As result I'm getting: No matching records found</p> <p>Can you help me please. What am I doing wrong?</p> </div>

带有MySQL内容的Bootstrap数据表

<div class="post-text" itemprop="text"> <p>I have a form in which a user select a reference of a candelabra.<br> When the choice done, a list of incidents relative to the candelabra appears in a bootstrap table.<br> The table is completed with items from a Mysql database. </p> <p>All is ok. Now I'd like to add a button in another column called "test". But I have no buttons.. I put a screenshot of what I see..</p> <p><a href="https://i.stack.imgur.com/VvSWq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VvSWq.jpg" alt="My test"></a></p> <p>My code is this one : </p> <p><strong>FORM FILE</strong> </p> <pre><code>&lt;?php require_once 'login.php'; $sql= "SELECT ptlum FROM ptlum where ptlum LIKE '%AZ%'"; $result = mysql_query($sql) or die("Requete pas comprise"); //while($data = mysql_fetch_array($result)) // { //echo "&lt;option&gt;".$data[ptlum]."&lt;/option&gt;"; // } ?&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link href="examples.css" rel="stylesheet"&gt; &lt;link href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/lib/bootstrap.min.css" rel="stylesheet"&gt; &lt;link href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/lib/bootstrap-responsive.min.css" rel="stylesheet"&gt; &lt;link href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/custom.css" rel="stylesheet"&gt; &lt;link href="bootstrap.table.css" rel="stylesheet"&gt; &lt;script&gt; function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form class="form-horizontal" &gt; &lt;legend&gt;Rechercher une panne en cours ou archivée&lt;/legend&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="selectbasic-0"&gt;Sélectionner un point lumineux&lt;/label&gt; &lt;div class="controls"&gt; &lt;select name="users" onchange="showUser(this.value)"&gt; &lt;?php while ($row = mysql_fetch_array($result)) { echo "&lt;option&gt;".$row[ptlum]."&lt;/option&gt;"; } ?&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;script src= "jquery.js"&gt;&lt;/script&gt; &lt;script src= "bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src= "bootstrap.table.js"&gt;&lt;/script&gt; &lt;br&gt; &lt;div id="txtHint"&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>PHP FILE WITH CALLING THE DATABASE</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;script src= "jquery.js"&gt;&lt;/script&gt; &lt;script src= "https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"&gt;&lt;/script&gt; &lt;script src= "https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt; &lt;?php $q = $_GET['q']; //echo $q; $con = mysqli_connect('localhost','root','root','sdeer'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"ajax_demo"); $sql="SELECT * FROM depannages WHERE ptlum = '".$q."'"; $result = mysqli_query($con,$sql); echo "&lt;table id=\"example\" class=\"table table-striped table-bordered\" cellspacing=\"0\" width=\"100%\"&gt; &lt;tr&gt; &lt;th&gt;Pt Lum&lt;/th&gt; &lt;th&gt;Matériel&lt;/th&gt; &lt;th&gt;Prestation&lt;/th&gt; &lt;th&gt;Date&lt;/th&gt; &lt;th&gt;Nature&lt;/th&gt; &lt;th&gt;Test&lt;/th&gt; &lt;/tr&gt;"; while($row = mysqli_fetch_array($result)) { echo "&lt;tbody&gt;"; echo "&lt;tr&gt;"; echo "&lt;td&gt;" . $row['ptlum'] . "&lt;/td&gt;"; echo "&lt;td&gt;" . $row['materiel'] . "&lt;/td&gt;"; echo "&lt;td&gt;" . $row['presta'] . "&lt;/td&gt;"; echo "&lt;td&gt;" . $row['date'] . "&lt;/td&gt;"; echo "&lt;td&gt;" . $row['nature'] . "&lt;/td&gt;"; echo "&lt;/tr&gt;"; echo "&lt;/tbody&gt;"; } echo "&lt;/table&gt;"; mysqli_close($con); ?&gt; &lt;script&gt; $(document).ready(function() { var table = $('#example').DataTable( { "columnDefs": [ { "targets": -1, "data": null, "defaultContent": "&lt;button&gt;Click!&lt;/button&gt;" } ] } ); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>How to make it if I want to have a button ? When the user will click on the button, a new window will appear.<br> Thanks !</p> </div>

bootstrap table怎么想java传参数

这是js ``` function load1() { var state=parent.$("input[name='state']:checked").val(); alert(state) $('#exampleTable') .bootstrapTable( { method : 'get', // 服务器数据的请求方式 get or post url : prefix + "/list", // 服务器数据的加载地址 queryParams:function(params){//向后台传值 return{ offset:params.offset, limit:params.limit, state:parent.$("input[name='state']:checked").val() } }, // showRefresh : true, // showToggle : true, // showColumns : true, iconSize : 'outline', toolbar : '#exampleToolbar', striped : true, // 设置为true会有隔行变色效果 dataType : "json", // 服务器返回的数据类型 pagination : true, // 设置为true会在底部显示分页条 // queryParamsType : "limit", // //设置为limit则会发送符合RESTFull格式的参数 singleSelect : false, // 设置为true将禁止多选 // contentType : "application/x-www-form-urlencoded", // //发送到服务器的数据编码类型 pageSize : 10, // 如果设置了分页,每页数据条数 pageNumber : 1, // 如果设置了分布,首页页码 //search : true, // 是否显示搜索框 showColumns : false, // 是否显示内容下拉框(选择显示的列) sidePagination : "server", // 设置在哪里进行分页,可选值为"client" 或者 "server" queryParams : function(params) { return { //说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对 limit: params.limit, offset:params.offset, name:$('#searchName').val() // username:$('#searchName').val() }; }, // //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 // queryParamsType = 'limit' ,返回参数必须包含 // limit, offset, search, sort, order 否则, 需要包含: // pageSize, pageNumber, searchText, sortName, // sortOrder. // 返回false将会终止请求 } ``` 这是java ``` @ResponseBody @RequestMapping("/list") public PageUtils list(@RequestParam Map<String, Object> params,String state){ System.out.println(state); //查询列表数据 Query query = new Query(params); List<WagesDO> wagesList = wagesService.list(query); int total = wagesService.count(query); PageUtils pageUtils = new PageUtils(wagesList, total); return pageUtils; } ``` 这样写在java接受到的是state为null,这是为什么y

bootstrap table中 可编辑,如何将一列编辑的结果另一列动态加载

columns : [ { field : "dept", edit : { type : 'select',//下拉框 data : [ <c:forEach items="${deptList }" var="item" varStatus="status" > { id:"${item.id }", text:"${item.name }", deptnum:"${item.deptnum }" }, </c:forEach> ], valueField : 'deptnum', textField : 'text', onSelect : function(val, rec) { alert(val); $.ajax({ type: "POST", url: "../operate/getKufangs", dataType: "json", data: { dept:val }, success: function (data) { if (data.type == 'success') { $("#kufangs2").val(data.kufangs); } } }); console.log(val, rec); } }, title : "机构", align : "center", width : "200px" }, { field : "kufangid", edit : { type : 'select',//下拉框 data : [ <c:forEach items="${kufangList }" var="item" varStatus="status" > { id:"${item.id }", text:"${item.name }" }, </c:forEach> ], valueField : 'id', textField : 'text', onSelect : function(val, rec) { console.log(val, rec); } }, title : "名称", align : "center", width : "200px" }, 这两个要怎么动态关联,请大神解答

bootstraptable +springmvc 不显示数据 搞了一个下午没弄出来

后台获取数据 { "rows": [ { "content": "遗传性甲状腺髓样癌早期干预性治疗临床研究", "createtime": 1489113663000, "dealuserid": 1, "del_flag": "0", "id": 1, "name": "邱瑞", "realname": "王三", "status": "1", "type_name": "文献检锁", "typeid": 1, "updatetime": 1489113668000, "userid": 1 }, { "content": "我国临床免疫和分子诊断标准化的研究", "createtime": 1489113723000, "dealuserid": 2, "del_flag": "0", "id": 2, "realname": "王三", "status": "1", "type_name": "文献检锁", "typeid": 1, "updatetime": 1489113727000, "userid": 1 }, { "content": "我国临床免疫和分子诊断标准化的研究及应用分子诊断研究及应用", "createtime": 1489113760000, "dealuserid": 1, "del_flag": "0", "id": 3, "name": "邱瑞", "realname": "王三", "status": "2", "type_name": "参考咨询", "typeid": 2, "updatetime": 1489113764000, "userid": 1 } ], "total": 3 } 前端 $('#all_table').bootstrapTable('destroy'); $('#all_table').bootstrapTable({ method: 'post', pagination: true, pageNumber:1, pageSize: 10, pageList: [10, 25, 50, 100], url: "/SubjectService/user/getServiceInfo.do", sidePagination: "server", dataType: "json", columns: [{ title: '服务内容', field: 'content', align: 'center' }, { field: 'type_name', title: '服务项目', align: 'center' },{ field: 'realname', title: '申请人', align: 'center' },{ field: 'createtime', title: '申请时间', align: 'center' },{ field: 'status', title: '申请状态', align: 'center' },{ field: 'name', title: '处理人', align: 'center' }] }); }); 结果![图片说明](https://img-ask.csdn.net/upload/201703/13/1489401860_456028.png)

bootstrap table 条件查询

我的项目基于springmvc+mybatis,我在jsp设好查询条件,也能查出结果, 我对条件查询的结果做了分页的,问题是条件查询出来结果,我点下一页的时候又变成 全部数据都出来了,已经不是我要的按条件查出来的结果。一下是我代码: $(function() { $("#table_report").bootstrapTable({ method: "get",//post取不到数据 url: "station/list", dataType: "json", striped:true, toolbar:"#toolbar", idField:"id", pagination: true, pageSize:pageSize, pageList:pageList, // showPaginationSwitch:true, showRefresh:true, showColumns:true, showToggle:true, // searchText:"输入关键字", cache: false, // search: true, buttonsAlign:'left', sidePagination: "server", queryParamsType:'',//默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber columns:[ { 这是点击搜索按钮的js函数: //检索 function search(){ // top.jzts(); var regioncode = $('#area_id option:selected').val(); var subpackage = $('#subpackage_id option:selected').val(); var stationid = $('#station_id option:selected').val(); // var url = "station/findbyarea?regioncode="+regioncode+"&stationid="+stationid+"&subpackage="+subpackage; $("#table_report").bootstrapTable('refresh', {url:'station/findbyarea', query: {regioncode: regioncode,stationid:stationid,subpackage:subpackage}}); // $.get(url,function(data){ // $("#table_report").bootstrapTable('load',data); // }); } 另外为什么用post请求不了数据?而用get就可以?

bootStrap中服务器分页以后,下面分页按钮消失了,其余数据正常

$('#tableArea').bootstrapTable({ url: 'salary.SalaryAction$querySalaryInfo.json', //请求后台的URL(*) method: 'post', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 dataField : "data", striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 5, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) responseHandler:responseHandler, //请求数据成功后,渲染表格前的方法 contentType: "application/x-www-form-urlencoded", columns: [{ field: 'employeeId', title: '工号' }。。。。。。 //得到查询的参数 oTableInit.queryParams = function (params) { return { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit : params.limit, // 每页显示数量 offset : params.offset // SQL语句偏移量 } }; function responseHandler(result){ /* var errcode = result.errcode;//在此做了错误代码的判断 alert(errcode) if(errcode != 0){ alert("错误代码" + errcode); return; } */ //如果没有错误则返回数据,渲染表格 return { total : result.total, //总页数,前面的key必须为"total" data : result.rows //行数据,前面的key要与之前设置的dataField的值一致. }; };

Bootstrap-内部表的文本对齐类

<div class="post-text" itemprop="text"> <p>Is there a set of classes in Twitters Bootstrap Framework that aligns text?</p> <p>E.g. I have some tables with <code>$</code> totals that I want aligned to the right... </p> <pre><code>&lt;th class="align-right"&gt;Total&lt;/th&gt; </code></pre> <p>and </p> <pre><code>&lt;td class="align-right"&gt;$1,000,000.00&lt;/td&gt; </code></pre> </div> <p>转载于:https://stackoverflow.com/questions/12829608/bootstrap-text-align-class-for-inside-table</p>

想问大佬,bootstraptable统计列值的时候没有显示在页面上怎么回事啊?

function reload() { let $table = $('#db_dependences'); $('#db_dependences').bootstrapTable({ method:'POST', dataType:'json', contentType: "application/x-www-form-urlencoded", cache: false, striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true, pagination:true, minimumCountColumns:2, pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 20, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) uniqueId: 'id', //每一行的唯一标识,一般为主键列 showExport: true, showFooter:true, exportDataType: 'all', exportTypes:[ 'txt', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 columns: [{ field: 'id', title: '序号', align: 'center', edit:false,formatter:function(value, row, index){ return row.index=index ; //返回行号 }, visible: true, footerFormatter: function(){ return "当前总分:"; } }, { field: 'type', title: '题型', align: 'center', sortable:true },{ field: 'content', align: 'center', title: '内容' }, { field: 'level', title: '难度', align: 'center' }, { field: 'value', title: '分值', align: 'center', formatter:function(value,row,index){ return row.value; }, //计算此列的值 footerFormatter:function(rows){ var sum=0; for(var i=0;i<rows.length;i++){ sum=sum+parseInt(rows[i].value); } console.log("sum="+sum); return sum+"分"; } }, { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像素px formatter: function (value, row, index) { //传入数据 return '<button class="btn btn-default btn-sm" onclick="showitem(\'' + row.type+'\',\''+row.level+'\',\''+row.value+'\',\''+row.content + '\')">查看</button>&emsp;<button class="btn btn-primary btn-sm" onclick="del(\'' + row.id + '\')">移除</button>'; } }], onPostBody:function(){ //合并页脚 merge_footer(); }, data: result, onClickCell: function(field, value, row, $element) { $element.attr('contenteditable', true); $element.blur(function() { let index = $element.parent().data('index'); let tdValue = $element.html(); saveData(index, field, tdValue); }) }, onExpandRow: function (index, row, $detail) { detailview(index, row, $detail) } }); //合并页脚 function merge_footer(){ //获取table表中footer 并获取到这一行的所有列 var footer_tbody = $('.fixed-table-footer table tbody'); var footer_tr = footer_tbody.find('>tr'); var footer_td = footer_tr.find('>td'); var footer_td_1 = footer_td.eq(0); //由于我们这里做统计只需要两列,故可以将除第一列与最后一列的列全部隐藏,然后再设置第一列跨列 //遍历隐藏中间的列 下标从1开始 for(var i=1;i<footer_td.length-1;i++) { footer_td.eq(i).hide(); } //设置跨列 footer_td_1.attr('colspan', footer_td.length-1).show(); //这里可以根据自己的表格来设置列的宽度 使对齐 footer_td_1.attr('width', "910px").show(); }

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

你以为这样写Java代码很6,但我看不懂

为了提高 Java 编程的技艺,我最近在 GitHub 上学习一些高手编写的代码。下面这一行代码(出自大牛之手)据说可以征服你的朋友,让他们觉得你写的代码很 6,来欣赏一下吧。 IntStream.range(1, 5).boxed().map(i -&gt; { System.out.print("Happy Birthday "); if (i == 3) return "dear NAME"...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

Python爬虫,高清美图我全都要(彼岸桌面壁纸)

爬取彼岸桌面网站较为简单,用到了requests、lxml、Beautiful Soup4

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

立即提问
相关内容推荐