算是最全面的bootstrap-table的介绍了吧

目录

1.默认常量信息(表)

1.1. 无法转换为自定义方法

1.2. 可转换为自定义方法

2.字段属性

3.方法相关api

4.事件相关api

5.初始化配置


Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件

1.默认常量信息(表)

1.1. 无法转换为自定义方法

属性默认值描述
heightundefined表格的高度
classestable table-bordered table-hover表格的类名称
buttons{}按钮,bootstraptable加载的按钮集,可自定义
theadClasses表头样式''
undefinedText'-'当数据为 undefined 时显示的字符
localeundefined语言设置
virtualScrollfalse是否开启虚拟滚动
virtualScrollItemHeightundefined虚拟滚动条项目高度
sortabletrue是否启用排序
sortClassundefined被排序的td标签的class名
silentSorttrue是否开启自动记住排序项,设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效
sortEmptyLastfalse排序最后一个空
sortNameundefined定义排序列信息
sortOrderundefined定义排序方式 asc 或者 desc
sortResetfalse是否开启重置排序
sortStablefalse设置为 true 将获得稳定的排序
sortResetPagefalse排序是否重置页面
rememberOrderfalse是否记住顺序
serverSorttrue服务器排序
customSortundefined自定义排序
columns[[]]列配置项,一般为表格显示的字段信息
data[]加载json格式的数据
urlundefined服务器数据的加载地址
methodget请求方式,一般列表请求都是get请求,特殊情况特殊处理
cachetrue是否使用ajax缓存,true为禁用ajax缓存
contentTypeapplication/json发送到服务器的数据编码类型
dataTypejson服务器返回的数据类型
ajaxundefined自定义 AJAX 方法,须实现 jQuery AJAX API
ajaxOptions{}提交ajax请求时的附加参数
queryParamsTypelimit设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数
totalFieldtotal分页总条数对应的字段,可根据封装的json自定义调整
totalNotFilteredFieldtotalNotFilteredjson响应中的字段,用于服务器端定义分页计数
dataFieldrows分页数据所对应的字段,可根据封装的json自定义调整
footerFieldfooter页脚所对应的字段
paginationfalse是否显示分页 true显示 false隐藏
paginationParts['pageInfo', 'pageSize', 'pageList']定义了分页信息哪些部分可见 pageInfo:显示总行数且此页行范围pageSize:每页多少行下拉框pageList:分页按钮
showExtendedPaginationfalse是否显示分页的扩展版本
paginationLooptrue是否启用分页条无限循环的功能
sidePaginationclient分页方式 server服务端分页client客户端分页
totalRows0总行数该属性主要由分页服务器传递
totalNotFiltered0未筛选总数
pageNumber1初始化加载第一页,默认第一页
pageSize10每页的记录行数
pageList[10, 25, 50, 100]可供选择的每页的行数
paginationHAlignright分页条水平方向的位置 left最左 right最右
paginationVAlignbottom分页条垂直方向的位置 bottom 底部 top顶部 both:顶/底都存在
paginationDetailHAlignleft分页明细显示位置,left最左 right最右
paginationPreText'‹'上一页的按钮符号
paginationNextText'›'下一页的按钮符号
paginationSuccessivelySize5左边的最大连续页数 < 1.2.3.4.5 ... n > 建议:5
paginationPagesBySide1右边的最大连续页数 < 1.2.3.4.5 ... 80 >
paginationUseIntermediatefalse计算并显示中间页面以便快速访问
searchfalse是否显示搜索框功能(客户端搜索)
searchablefalse是否可检索的(一般应用于字段)
searchHighlightfalse是否对搜索内容高亮展示
searchOnEnterKeyfalse是否按下EnterKey才进行搜索
strictSearchfalse是否启用启用严格搜索
regexSearchfalse是否启用启用正则搜索
searchSelectorfalse自定义搜索框选择器
visibleSearchfalse为仅在可见列/数据中搜索
showButtonIconstrue是否显示按钮图标
showButtonTextfalse是否在按钮上显示文本
showSearchButtonfalse是否在搜索输入后面显示搜索按钮
showSearchClearButtonfalse是否在搜索输入后面显示清除按钮
trimOnSearchtrue是否自动忽略空格
searchAlignright指定搜索输入框的方向 left最左 right最右
searchTimeOut500搜索超时时间
searchText''设置搜索文本框的默认搜索值
customSearchundefined自定义搜索
showHeadertrue是否显示表头 true显示 false隐藏
showFooterfalse是否显示页脚 true显示 false隐藏
searchAccentNeutralisefalse是否开启搜索重音中和,若要使用重音消除功能,请设置为true
showColumnsfalse是否显示所有的列 true显示 false隐藏
showColumnsToggleAllfalse是否在列选项/下拉列表中显示“全部切换”复选框
showColumnsSearchfalse是否显示对列过滤器的搜索
minimumCountColumns1最少允许的列数
showPaginationSwitchfalse是否显示分页组件的切换按钮 true显示 false隐藏
showRefreshfalse是否显示刷新按钮 true显示 false隐藏
showTogglefalse是否显示详细视图和列表视图的切换按钮 true显示 false隐藏
showFullscreenfalse是否显示全屏按钮 true显示 false隐藏
smartDisplaytrue是否智能显示分页或卡片视图 true是 false 否
escapefalse是否开启html转义
escapeTitletrue是否转义标题
idFieldundefined表明哪个是字段是标识字段
selectItemName‘btSelectItem’设置radio 或者 checkbox的字段名称
clickToSelectfalse是否启用点击选中行 true 启用 false禁用
singleSelectfalse是否单选checkbox
checkboxHeadertrue表头是否展示checkbox
maintainMetaDatafalse是否维护元数据
multipleSelectRowfalse是否启用多选行
uniqueIdundefined唯一的标识符
cardViewfalse是否启用卡片视图
detailViewfalse是否启用明细视图
detailViewIcontrue是否显示详细视图图标
detailViewByClickfalse是否允许单击单元格时切换细节视图
detailViewAlignleft详细信息视图图标对齐方式
toolbarundefined指定工具栏
toolbarAlignleft指示如何对齐自定义工具栏
buttonsToolbarundefined一个jQuery选择器,指示按钮工具栏
buttonsAlignright指示如何对齐工具栏按钮
buttonsOrder['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']工具栏按钮重新排序
buttonsPrefixCONSTANTS.classes.buttonsPrefix按钮前缀 'btn'
buttonsClassCONSTANTS.classes.buttons按钮样式
iconsPrefixundefined图标前缀
icons{}图标,此处可以自定义
iconSizeundefined图标大小:undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
loadingFontSize'auto'自定义加载文本的字体大小
stripedtrue是否显示行间隔色

1.2. 可转换为自定义方法

属性默认值描述
headerStyle(column)return {}标头样式格式化程序函数
rowStyle (row, index)return {}设置行样式的函数支持类或css
rowAttributes (row, index)return {}row属性formatter函数,支持所有自定义属性
queryParams (params)return params要传递参数
responseHandler (res)return res请求获取数据后处理回调函数
footerStyle (column)return {}页脚样式设置。
ignoreClickToSelectOn ({ tagName })return ['A', 'BUTTON'].includes(tagName)忽略点击选中
detailFormatter (index, row)return ''格式化细节视图
detailFilter (index, row)return true是否对返回行进行拓展
loadingTemplate (loadingMessage)return ‘...’加载模版

2.字段属性

属性默认值描述
fieldundefined设置data-field的值,字段返回标识
titleundefined设置data-field的值,字段显示内容
titleTooltipundefined列标题工具提示文本
classundefined定义列的类名
widthundefined列的宽度
widthUnit'px'列的宽度单元
rowspanundefined指定单元格应占用的行数
colspanundefined指定单元格应占用的列数
alignundefined数据对齐方式
halignundefined表头对齐方式
falignundefined表格页脚对齐方式
valignundefined单元格数据对齐方式
cellStyleundefined单元格样式格式化函数
radiofalse单选框(一般都单独提出表格)
checkboxfalse复选框(一般都单独提出表格)
checkboxEnabledtrue设置false以禁用复选框/单选框
clickToSelecttrue是否点击选中
showSelectTitlefalse显示选择框标题,设置为true以使用'radio'或'singleSelect''复选框'选项显示列的标题
sortablefalse列是否允许排序
sortNameundefined排序字段名
order'asc'排序方式
sorterundefined用于进行本地排序的自定义字段排序函数
visibletrue列是否可见
switchabletrue是否可切换列
switchableLabelundefined可交换的标识
cardVisibletrue是否隐藏card 视图状态中的列项
searchabletrue是否可搜索此列的数据
formatterundefined单元格格式函数
footerFormatterundefined页脚格式化.页脚单元格中显示的文本
detailFormatterundefined明细格式化.
searchFormattertrue搜索格式化
searchHighlightFormatterfalse搜索高亮格式化
escapeundefined是否转义字符串(HTMl)
eventsundefined监听事件(function)

3.方法相关api

方法名方法用途
getOptions获取表格的参数
refreshOptions刷新表格参数
getData获取当前表格中加载的数据,参数useCurrentPage为true 将返回当前页内的数据
getSelections获取当前被选中的行
load将新数据加载到表格中
append将新数据加载到表格末尾中
prepend将新数据插入到表格头部
remove从表格中移除列名为指定值的数据
removeAll移除表格中的所有数据
insertRow插入多个新行到指定位置 params > index:要插入到行的索引 row: 要插入的行数据
updateRow更新指定行
getRowByUniqueId根据唯一ID获取行数据
updateByUniqueId根据唯一ID更新行数据每一行 params > id: 唯一ID row: 新的行数据
removeByUniqueId根据唯一ID移除行数据
updateCell更新一个单元格数据
updateCellByUniqueId更新id指定的一个单元格
showRow显示指定行
hideRow隐藏指定行
getHiddenRows获取所有隐藏的行数据
showColumn显示指定列
hideColumn隐藏指定列
getVisibleColumns获取可见的列
getHiddenColumns获取隐藏的列
showAllColumns展示所有列
hideAllColumns隐藏所有列
mergeCells合并多个单元格
checkAll选中当前页的所有行
uncheckAll取消选中当前页的所有行
checkInvert对当前页内行数据进行反选
check选中某一行,索引从0开始
uncheck取消选中某一行,索引从0开始
checkBy根据列名选则行数据
uncheckBy根据列名取消选中行数据
refresh重新加载远程数据
destroy销毁表格
resetView重置表格视图
showLoading显示数据加载状态提示
hideLoading隐藏数据加载状态提示
togglePagination切换分页参数
toggleFullscreen切换全屏展示
toggleView切换 card/table 视图
resetSearch设置搜索内容
filterBy在client模式下,对表格数据进行过滤
sortBy设置排序方式
scrollTo使滚动条滚动到指定位置,单位像素,'bottom' 滚动条滚动到底
getScrollPosition获取当前滚动条的位置,单位像素
selectPage跳转到指定页
prevPage上一页
nextPage下一页
toggleDetailView切换细节视图
expandRow展开指定索引的行的详细视图
collapseRow收起指定索引的行的详细视图
expandRowByUniqueId展开指定UniqueId的行的详细视图
collapseRowByUniqueId收起指定UniqueId的行的详细视图
expandAllRows展开所有行的详细视图
collapseAllRows收起所有行的详细视图
updateColumnTitle更新列标题
updateFormatText更新格式文本

4.事件相关api

方法名监听内容描述
onAllall.bs.table任何事件触发都会同时触发该事件
onClickRowclick-row.bs.table当点击某一行时触发
onDblClickRowdbl-click-row.bs.table当双击击某一行时触发
onClickCellclick-cell.bs.table当点击某一个单元格时触发
onDblClickCelldbl-click-cell.bs.table当双击某一个单元格时触发
onSortsort.bs.table当点击对某一字段列进行排序时触发
onCheckcheck.bs.table当选中某一行时触发
onUncheckuncheck.bs.table当取消选中某一行时触发
onCheckAllcheck-all.bs.table当点击全选时出发
onUncheckAlluncheck-all.bs.table当取消全选时出发
onCheckSomecheck-some.bs.table当选中某些行时触发
onUncheckSomeuncheck-some.bs.table当取消选中某些行时触发
onLoadSuccessload-success.bs.table当加载成功时触发
onLoadErrorload-error.bs.table当加载失败时触发
onColumnSwitchcolumn-switch.bs.table当切换某列的显示状态时触发
onColumnSwitchAllcolumn-switch-all.bs.table当切换全部列的显示状态时触发
onPageChangepage-change.bs.table当切换每页条数时触发
onSearchsearch.bs.table当对表格内容进行搜索时触发
onToggletoggle.bs.table当切换表格的显示视图时触发
onPreBodypre-body.bs.table在对表格体进行渲染前触发
onPostBodypost-body.bs.table在表格体渲染完成后触发
onPostHeaderpost-header.bs.table在表格列头渲染完成后触发
onPostFooterpost-footer.bs.table在表格页脚渲染完成后触发
onExpandRowexpand-row.bs.table当点击详情按钮展开详情视图时触发
onCollapseRowcollapse-row.bs.table当点击关闭详情按钮收起详情视图时触发
onRefreshOptionsrefresh-options.bs.table当刷新表格选项时,在销毁当前表格并重新初始化新表格之前触发
onResetViewreset-view.bs.table当重置表格视图时触发
onRefreshrefresh.bs.table当点击刷新按钮对表格进行刷新时触发
onScrollBodyscroll-body.bs.table当对表格体进行滚动时触发
onTogglePaginationtoggle-pagination.bs.table当点击切换分页时触发
onVirtualScrollvirtual-scroll.bs.table当发生虚拟滚动时触发

5.初始化配置

初始化一下常用的配置,可直接移植到项目中使用,一些默认自带的可以省去,罗列出项目中常用的属性,如属性不满足可参考常量信息表自行添加

var table = $("#bootstrap-table-list");
​
// 初始化表格
table.bootstrapTable({
   url: url,                           //请求后台的URL(*)用于从远程站点请求数据的URL
   method: 'get',                      //请求方式(*)
   toolbar: '#toolbar',                //工具栏
   buttonsClass:'secondary',           //定义工具按钮的Bootstrap类(在'btn-'之后添加)
   striped: true,                      //是否显示行间隔色
   cache: false,                       //是否使用缓存,默认为true
   pagination: true,                   //是否显示分页
   sortable: true,                     //是否启用排序
   sortName:'',                        //定义要排序的列
   sortOrder: "asc",                   //定义列排序顺序,只能是'asc'或'desc'。
   sortStable: false,                  //是否启用稳定排序
   queryParams: oTableInit.queryParams,//传递参数(*)
   sidePagination: "server",           //分页方式:client客户端分页(默认),server服务端分页(*)
   pageNumber:1,                       //初始化加载第一页,默认第一页
   pageSize: 10,                       //每页的记录行数(*)
   pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
   search: true,                       //是否显示表格搜索input
   showColumns: false,                 //是否显示所有的列
   showRefresh: true,                  //是否显示刷新按钮 默认false
   minimumCountColumns: 1,             //最少允许的列数 要从列下拉列表中隐藏的最小列数
   clickToSelect: true,                //是否启用点击选中行
   height: 500,                        //行高 
   uniqueId: "id",                     //表明每一行的唯一标识字段,一般为主键列
   showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
   cardView: false,                    //是否显示详细视图
   detailView: false,                  //设置为true以显示detail 视图表(细节视图)
   locale:'zh-CN',                     //语言设置
   height:800,                         //固定表格的高度     
   data:[],                            //要加载的数据 [] or {}
   contentType:'application/json',     //请求远程数据的contentType(现在大部分都是json请求) 
   dataType:'json',                    //服务器返回的数据类型    
   totalField:'total',                 //分页总条数对应的字段,可根据封装的json自定义调整
   dataField:'rows',                   //分页数据所对应的字段,可根据封装的json自定义调整  
   showHeader:true,                    //是否显示表头    
   showFooter:false,                   //是否显示页脚
   showPaginationSwitch:false,         //是否显示分页组件的切换按钮    
   showFullscreen:false,               //是否显示全屏按钮      
   clickToSelect:false,                //是否启用点击选中行
   singleSelect:false,                 //是否允许复选框仅选择一行
   loadingFontSize:'auto',             //加载文本的字体大小
   multipleSelectRow:false,            //是否启用多选行
   icons:icon,                         //自定义icon图标
   iconSize:'undefined',               //icon图表的尺寸大
   iconsPrefix:'fa',                   //图标前缀   
   queryParamsType:'limit',            //设置'limit'以使用RESTFul类型发送查询参数。        
   queryParams: function(params) {     //请求远程数据时,
      var reqParams = {
           // 传递参数查询参数
           pageSize:       params.limit,
           pageNum:        params.offset / params.limit + 1,
           searchValue:    params.search,
          "自定义":"自定义",
      };
       return reqParams;     
  },   
   responseHandler:function(res) {     //请求获取数据后处理回调函数  
       return res;
​
  },   
   onLoadSuccess: function (data){//表选项也可以时使用事件,列选项的事件则是在events
       //数据加载成功时触发
       console.log(data);
   
  },
   columns: [
      {checkbox: false},
      {radio: false},
      {
           radio: false,//此列转成radio上面单独领出来是应为有字段显示就不需要它呀
           checkbox: false,//此列转成checkbox 单独拎出来同上
           field: '对应服务器返回的字段信息', 
           title: 'table上显示的信息'
           align:'center',//指定如何对齐列数据。可以使用'left','right','center'
           formatter:function()//自定义格式化信息,一般是对状态等进行标识映射
      },
      {
           field:'opreation',
           tittle:'操作',
           aligin:'center',
           formatter:function(value,row,index,field){
               return[ 
"要添加的按钮"
              ];
          },
      }
  ]
});
​
​
/**
* 重写bootstrap-table 图标
* @type {{toggleOff: string, clearSearch: string, detailOpen: string, search: string, fullscreen: string, columns: string, detailClose: string, refresh: string, paginationSwitchDown: string, paginationSwitchUp: string, toggleOn: string}}
*/
window.icons={
   paginationSwitchDown: 'fa-caret-square-down',
   paginationSwitchUp: 'fa-caret-square-up',
   refresh: 'fa-sync',
   toggleOff: 'fa-toggle-off',
   toggleOn: 'fa-toggle-on',
   columns: 'fa-th-list',
   detailOpen: 'fa-plus',
   detailClose: 'fa-minus',
   fullscreen: 'fa-arrows-alt',
   search: 'fa-search',
   clearSearch: 'fa-trash',
   print:'fa-trash',
   export:'fa-trash',
}
​

JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签: Bootstrap Table 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机、平板、PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一、效果展示 二、BootStrap table简单介绍 bootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、table数据填充 bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#table').bootstrapTable({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的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: 50, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识,一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; }; field字段必须与服务器端返回的字段对应才会显示出数据。 3、后台获取数据 a、servlet获取数据 [js] view plain copy BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ... b、springMvc Controller里面对应的方法获取数据 [js] view plain copy public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype) { ... } 4、分页(遇到问题最多的) 使用分页,server端返回的数据必须包括rows和total,代码如下: [js] view plain copy ...gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i<len;i++) { TradeBean tb = gblst.get(i); if(tb==null) { continue; } jo=new JSONObject(); jo.put("id", i+1); jo.put("liushuiid", tb.getLiushuiid()); jo.put("price", String.format("%1.2f",tb.getPrice()/100.0)); jo.put("mobilephone", tb.getMobilephone()); jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime())); jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]); jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败"); jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败"); jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0)); jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0)); jo.put("goodroadid", tb.getGoodroadid()); jo.put("SmsContent", tb.getSmsContent()); jo.put("orderid", tb.getOrderid()); jo.put("goodsName", tb.getGoodsName()); jo.put("inneridname", tb.getInneridname()); jo.put("xmlstr", tb.getXmlstr()); jsonData.add(jo); } int TotalCount=SqlADO.getTradeRowsCount(sql); JSONObject jsonObject=new JSONObject(); jsonObject.put("rows", jsonData);//JSONArray jsonObject.put("total",TotalCount);//总记录数 out.print(jsonObject.toString()); ... 5、分页界面内容介绍 前端获取分页数据,代码如下: [js] view plain copy ...oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };... 后端获取分页数据,代码如下: [js] view plain copy ...int pageindex=0; int offset = ToolBox.filterInt(json1.getString("offset")); int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit; } pageindex+= 1;//第几页... 以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。 转自:http://www.jb51.net/article/79033.htm
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值