Bootstrap表格插件Bootstrap Table配置教程

bootstrap table本地化中文设置

bootstrap table默认是英文语言包,我们可以通过以下设置进行本地化中文设置,比如分页、加载进度进行中文提示。

方法一在html网页中加载语言包

<script src="bootstrap-table-en-US.js"></script> 
<script src="bootstrap-table-zh-CN.js"></script>

在html标签属性中设置语言

<table data-toggle="table" data-locale="en-US">
 </table>

或在js中设置语言

$('#table').bootstrapTable({  
 locale: 'en-US'
  })

方法二自定义语言包

不加载语言包,通过自定义的方式设置,代码如下

$('#table').bootstrapTable({ 
          //自定义分页字符串显示为中文
          formatShowingRows:function(pageFrom, pageTo, totalRows)
          {
            return "第"+pageFrom+"-"+pageTo+"行,总共"+totalRows+"";
          },
           //自定义分页字符串显示为中文
          formatRecordsPerPage:function(pageNumber)
          {
            return pageNumber+'行每页';
          }
  });

在线试一试

可自定义的本地化的方法如下

$('#table').bootstrapTable({ 
 //加载数据时提示
formatLoadingMessage:function()
{
return "数据加载中...";
},
//每页显示
formatRecordsPerPage:function(pageNumber)
{
     return pageNumber+'行每页';
  },
//页码
  formatShowingRows:function(pageFrom, pageTo, totalRows)
          {
            return "第"+pageFrom+"-"+pageTo+"行,总共"+totalRows+"";
   },

formatSRPaginationPreText :function(){
return '上一页';
},

formatSRPaginationPageText:function(page){
return '跳转至'+page;
},
 formatSRPaginationNextText:function(){
return '下一页';
},
 
 formatDetailPagination:function(totalRows)
 {
 return "总计:"+totalRows;
 }
,
formatSearch:function()
{
return  "搜索";
}
,
formatClearSearch:function()
{
return  "清除搜索";
}
 ,
formatNoMatches:function()
{
return  "未查询到相关记录";
} ,
  formatPaginationSwitch:function()
  {
  return "隐藏显示分页";
  }
,
formatPaginationSwitchDown:function()
  {
  return "显示分页";
  },
formatPaginationSwitchUp:function()
  {
  return "隐藏分页";
  } ,
formatRefresh:function()
  {
  return "刷新";
  }  ,
formatToggle:function()
  {
  return "展开";
  }  ,
formatToggleOn:function()
  {
  return "显示卡片视图";
  } ,  
  formatToggleOff :function()
  {
  return "隐藏卡片视图";
  },
formatColumns:function(){
return "列视图";
}
,
formatColumnsToggleAll:function()
{
return 'Toggle all';
}
 ,
formatFullscreen:function()
{
return '全屏';
} ,
formatAllRows function()
{
return '全部';
}

});
文章目录
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式