匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。开始使用 & Bootstrap Table
假如您喜欢 Bootstrap Table：
问题/帮助：
来安装和管理 Bootstrap table 的 CSS，JavaScript, 多语言和扩展。
$ bower install bootstrap-table
下载的 Bootstrap table 源码包含了未压缩的 CSS，JavaScript，语言文件以及扩展，并且提供了压缩扰乱的 min 文件，当然也提供了我们的文档。更具体地说，主要包含了以下的文件：
bootstrap-table/
├── dist/
├── extensions/
├── locale/
├── bootstrap-table.min.css
└── bootstrap-table.min.js
├── docs/
└── src/
├── extensions/
├── locale/
├── bootstrap-table.css
└── bootstrap-table.js
src/，locale/ 和 extensions/ 是我们的 CSS，JavaScript 的源码。dist/文件夹包含了所有src/下压缩并扰乱的文件。docs/文件夹包含了我们文档的源码。另外，我们提供了包信息，License 信息，和其他的信息。
编译 CSS 和 JavaScript
Bootstrap table 使用
来作为编译系统，可以用十分方便的方法来编译我们代码，或者文档等等。
安装 Grunt
安装 Grunt，你必须先
(包含 npm)。npm 是
管理工具。
然后，我们使用命令行：
安装全局的 grunt-cli，使用 npm install -g grunt-cli 命令即可。
进入到 /bootstrap-table/ 的根目录，然后运行 npm install。npm 将通过查找 package.json 文件并自动安装这里所需要的依赖。
完成之后，你就可以运行一下的命令来编译的代码了。
可以用的 Grunt 命令
grunt dist (编译 CSS 和 JavaScript)
这里我们会生成 /dist/ 文件夹。 As a Bootstrap user, this is normally the command you want.
grunt test (运行 tests)
来测试我们的代码。
grunt docs (编译和测试文档)
编译和测试 CSS，JavaScript，本地我们可以通过 jekyll serve 来运行我们的文档。
grunt (编译所有并运行测试)
压缩和扰乱 CSS 和 JavaScript，测试，编译文档等等。依赖 。
如果你安装或运行依赖是遇到问题，首先删除 /node_modules/ npm 生成的文件夹。然后，再运行一次 npm install 即可。
引入 Bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.css 到 head 标签下。
&link rel="stylesheet" href="bootstrap.min.css"&
&link rel="stylesheet" href="bootstrap-table.css"&
引入 jQuery 库，bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.js 到 head 标签下或者在 body 标签关闭之前（一般建议这么做）。
&script src="jquery.min.js"&&/script&
&script src="bootstrap.min.js"&&/script&
&script src="bootstrap-table.js"&&/script&
&-- put your locale files after bootstrap-table.js --&
&script src="bootstrap-table-zh-CN.js"&&/script&
通过 data 属性或者 JavaScript 来启用 Bootstrap Table 插件，显示丰富的功能。
通过 data 属性的方式
无需编写 JavaScript 启用 bootstrap table，我们对普通的 table 设置 data-toggle=&table& 即可。
&table data-toggle="table"&
&th&Item ID&/th&
&th&Item Name&/th&
&th&Item Price&/th&
&td&1&/td&
&td&Item 1&/td&
&td&$1&/td&
&td&2&/td&
&td&Item 2&/td&
&td&$2&/td&
我们也可以通过设置远程的 url 如
data-url=&data1.json& 来加载数据。
&table data-toggle="table" data-url="data1.json"&
&th data-field="id"&Item ID&/th&
&th data-field="name"&Item Name&/th&
&th data-field="price"&Item Price&/th&
通过 JavaScript 的方式
通过表格 id 来启用 bootstrap table。
&table id="table"&&/table&
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
field: 'name',
title: 'Item Name'
field: 'price',
title: 'Item Price'
name: 'Item 1',
price: '$1'
name: 'Item 2',
price: '$2'
我们也可以通过设置远程的 url 如
url: 'data1.json' 来加载数据。
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
field: 'name',
title: 'Item Name'
field: 'price',
title: 'Item Price'Bootstrap table - ksgimi - ITeye技术网站
表格(Table)
依然使用&table&&tr&&th&&td&等标签来表现表格。主要提供了四个css的类来控制表格的边和结构。表2-1显示了bootstrap的table可选项。
没有样式，只有行和列
只有在行间有竖线
.table-bordered
圆角和添加外边框
Zebra-stripe
.table-striped
为奇数行添加淡灰色的背景色
.table-condensed
将横向的 padding 对切
表2-1 表格选项(Table Options)
我们可以将这些CSS类结合起来使用，如图2-4所示，显示一个混合的表格：
表单(Forms)
Bootstrap的表单是非常惊艳的部分。最好的地方在于你如何使用这些hmtl标签，它都会有很好的表现效果，而且不需要其他多余的代码。无论多复杂的布局都可以根据这些简洁，可扩展，事件绑定的要素来轻易实现。主要提供了四四种表单选项，如表2-2所示：
Vertical (default)
.form-vertical (not required)
堆放式, 可控制的左对齐标签
.form-inline
左对齐标签和简约的内联控制块
.form-search
放大的圆角，具有美感的搜索框
Horizontal
.form-horizontal
左漂浮, 右对齐标签
推荐到官方文档去体验下各种的真实效果，在chrome,Firefox等现代浏览器下显示十分优雅。同时可以使用.control-group来控制表单输入、错误等状态，需要wekit内核。如图2-5所示：
图2-5 表单状态控制
代码片段如下：
&div class="span8"&
&form class="form-horizontal"&
&fieldset&
&div class="control-group"&
&label class="control-label" for="focusedInput"&Focused input&/label&
&div class="controls"&
&input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"&
&div class="control-group"&
&label class="control-label"&Uneditable input&/label&
&div class="controls"&
&span class="input-xlarge uneditable-input"&Some value here&/span&
&div class="control-group"&
&label class="control-label" for="disabledInput"&Disabled input&/label&
&div class="controls"&
&input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled&
&div class="control-group"&
&label class="control-label" for="optionsCheckbox2"&Disabled checkbox&/label&
&div class="controls"&
&label class="checkbox"&
&input type="checkbox" id="optionsCheckbox2" value="option1" disabled&
This is a disabled checkbox
&div class="control-group warning"&
&label class="control-label" for="inputWarning"&Input with warning&/label&
&div class="controls"&
&input type="text" id="inputWarning"&
&span class="help-inline"&Something may have gone wrong&/span&
&div class="control-group error"&
&label class="control-label" for="inputError"&Input with error&/label&
&div class="controls"&
&input type="text" id="inputError"&
&span class="help-inline"&Please correct the error&/span&
&div class="control-group success"&
&label class="control-label" for="inputSuccess"&Input with success&/label&
&div class="controls"&
&input type="text" id="inputSuccess"&
&span class="help-inline"&Woohoo!&/span&
&div class="control-group success"&
&label class="control-label" for="selectError"&Select with success&/label&
&div class="controls"&
&select id="selectError"&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
&span class="help-inline"&Woohoo!&/span&
&div class="form-actions"&
&button type="submit" class="btn btn-primary"&Save changes&/button&
&button class="btn"&Cancel&/button&
&/fieldset&
浏览 15951
浏览: 141289 次
bootstrap demo实例教程源代码下载:http:// ...
bootstrap demo实例教程源代码下载:http:// ...
因开发使用的jdk7，其他版本不能解决问题，找了下
jdk7下 ...Bootstrap Table
我的图书馆
Bootstrap Table
注意： Bootstrap Table 是基于
的开源项目，你可以任意的使用和修改这个插件。假如您觉得这个开源项目对你有帮助，麻烦给这个项目加颗星（），您的支持是我最大的动力，谢谢。
使用的API：
Use url, method, cache, contentType, dataType, queryParams, queryParamsType, responseHandler options to set the AJAX request and response params.
<p data-zh="不通过JavaScript的方式启动Bootstrap Table（使用data-toggle=&table&）。" data-es="Use data-toggle=&table& para activar bootstrap table sin Javascript.">不通过JavaScript的方式启动Bootstrap Table（使用data-toggle="table"）。
Item IDItem NameItem Price
Item IDItem NameItem Price
0Item 0$01Item 1$12Item 2$23Item 3$34Item 4$45Item 5$56Item 6$67Item 7$78Item 8$89Item 9$910Item 10$1011Item 11$1112Item 12$1213Item 13$1314Item 14$1415Item 15$1516Item 16$1617Item 17$1718Item 18$1819Item 19$1920Item 20$20
&table data-toggle="table" data-url="data1.json" data-cache="false" data-height="299"&
&th data-field="id"&Item ID&/th&
&th data-field="name"&Item Name&/th&
&th data-field="price"&Item Price&/th&
从已经存在、未被格式化的表格中转换为Bootstrap Table。
Item Price
&div id="transform-buttons" class="btn-group btn-default"&
&button class="btn btn-default" id="transform"&
&i class="glyphicon glyphicon-transfer"&&/i& &span data-zh="转换" data-es="Transformar"&Transform&/span&
&button class="btn btn-default" id="destroy"&
&i class="glyphicon glyphicon-trash"&&/i& &span data-zh="摧毁" data-es="Destruir"&Destroy&/span&
&table id="table-transform" data-toolbar="#transform-buttons"&
&th&Item ID&/th&
&th&Item Name&/th&
&th&Item Price&/th&
&tr id="tr_id_1" class="tr-class-1"&
&td id="td_id_1" class="td-class-1"&1&/td&
&td&Item 1&/td&
&td&$1&/td&
&tr id="tr_id_2" class="tr-class-2"&
&td id="td_id_2" class="td-class-2"&2&/td&
&td&Item 2&/td&
&td&$2&/td&
&tr id="tr_id_3" class="tr-class-3"&
&td id="td_id_3" class="td-class-3"&3&/td&
&td&Item 3&/td&
&td&$3&/td&
&tr id="tr_id_4" class="tr-class-4"&
&td id="td_id_4" class="td-class-4"&4&/td&
&td&Item 4&/td&
&td&$4&/td&
&tr id="tr_id_5" class="tr-class-5"&
&td id="td_id_5" class="td-class-5"&5&/td&
&td&Item 5&/td&
&td&$5&/td&
$(function () {
var $table = $('#table-transform');
$('#transform').click(function () {
$table.bootstrapTable();
$('#destroy').click(function () {
$table.bootstrapTable('destroy');
<p data-zh="用height, classes, striped, rowStyle 属性和class, width, cellStyle 列属性设置 bootstrap table 的样式。" data-es="Use las opciones height, classes, striped, rowStyle y las opciones de columnas class, width, cellStyle para setear los estilos de bootstrap table.">用height, classes, striped, rowStyle 属性和class, width, cellStyle 列属性设置 bootstrap table 的样式。
Item Price
&label&&input id="hover" type="checkbox" checked=""& hover&/label&
&label&&input id="striped" type="checkbox"& striped&/label&
&label&&input id="condensed" type="checkbox"& condensed&/label&
&table id="table-style" data-url="data1.json" data-height="400" data-row-style="rowStyle"&
&th data-field="id" class="col-md-2"&Item ID&/th&
&th data-field="name" class="col-md-6"&
&i class="glyphicon glyphicon-star"&&/i&
&th data-field="price" class="col-md-4"&
&i class="glyphicon glyphicon-heart"&&/i&
Item Price
$(function () {
$('#hover, #striped, #condensed').click(function () {
var classes = 'table';
if ($('#hover').prop('checked')) {
classes += ' table-hover';
if ($('#condensed').prop('checked')) {
classes += ' table-condensed';
$('#table-style').bootstrapTable('destroy')
.bootstrapTable({
classes: classes,
striped: $('#striped').prop('checked')
function rowStyle(row, index) {
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (index % 2 === 0 && index / 2 & classes.length) {
classes: classes[index / 2]
return {};
<p data-zh="使用 align, halign 和 valign 来设置列和表头的对齐方式。" data-es="Use las opciones align, halign y valign para setear el alineamiento de las columnas y el header.">使用 align, halign 和 valign 来设置列和表头的对齐方式。
Item Price
&table data-url="data1.json" data-height="299"&
&th data-field="id" data-halign="right" data-align="center"&Item ID&/th&
&th data-field="name" data-halign="center" data-align="left"&Item Name&/th&
&th data-field="price" data-halign="left" data-align="right"&Item Price&/th&
<p data-zh="使用 sortName, sortOrder, sortable 属性和 sortable, order 列属性去设置表格的基本排序。" data-es="Use las opcionessortName, sortOrder, sortable y las opciones de columnas sortable, order para setear el ordenamiento básico de bootstrap table.">使用 sortName, sortOrder, sortable 属性和 sortable, order 列属性去设置表格的基本排序。
Item Price
&table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc"&
&th data-field="id" data-align="right" data-sortable="true"&Item ID&/th&
&th data-field="name" data-align="center" data-sortable="true"&Item Name&/th&
&th data-field="price" data-sortable="true"&Item Price&/th&
自定义排序
<p data-zh="使用 sorter列属性来定义表格的自定义排序。" data-es="Use la opción de columna sorter para definir el ordenamiento personalizado de bootstrap table.">使用 sorter列属性来定义表格的自定义排序。
Item Price
&table id="table-custom-sort" data-url="data1.json" data-height="299" data-sort-name="price" data-sort-order="desc"&
&th data-field="id" data-align="right" data-sortable="true"&Item ID&/th&
&th data-field="name" data-align="center" data-sortable="true"&Item Name&/th&
&th data-field="price" data-sortable="true" data-sorter="priceSorter"&Item Price&/th&
function priceSorter(a, b) {
a = +a.substring(1); // remove $
b = +b.substring(1);
if (a & b) return 1;
if (a & b) return -1;
格式化表格
<p data-zh="使用 formatter列属性来格式化表格列显示。" data-es="Use la opción de columna formatter para formatear como se muestra la columna bootstrap table.">使用 formatter列属性来格式化表格列显示。
Item Price
&table id="table-format" data-url="data1.json" data-height="299"&
&th data-field="id"&Item ID&/th&
&th data-field="name" data-formatter="nameFormatter"&Item Name&/th&
&th data-field="price" data-formatter="priceFormatter"&Item Price&/th&
function nameFormatter(value, row) {
var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'
return '&i class="glyphicon ' + icon + '"&&/i& ' +
function priceFormatter(value) {
== ffffff in decimal
var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
return '&div
style="color: ' + color + '"&' +
'&i class="glyphicon glyphicon-usd"&&/i&' +
value.substring(1) +
<p data-zh="使用 showHeader: false 去隐藏表头。" data-es="Use la opción showHeader: false para ocultar el header de bootstrap table.">使用 showHeader: false 去隐藏表头。
Item Price
&table data-url="data1.json" data-height="299" data-show-header="false"&
&th data-field="name"&Item Name&/th&
&th data-field="price"&Item Price&/th&
显示列选项
<p data-zh="使用 showColumns, minimumCountColumns 属性和 visible, switchable 列属性去显示列菜单用于切换。" data-es="Use las opciones showColumns, minimumCountColumns y las opciones de columna visible, switchable para mostrar el menu de columnas para mostrar u ocultar.">使用 showColumns, minimumCountColumns 属性和 visible, switchable 列属性去显示列菜单用于切换。
&table data-url="data3.json" data-height="299" data-show-columns="true" data-id-field="id"&
&th data-field="state" data-radio="true"&&/th&
&th data-field="name" data-switchable="false"&Name&/th&
&th data-field="price"&Price&/th&
&th data-field="column1"&Columns1&/th&
&th data-field="column2" data-visible="false"&Columns2&/th&
&th data-field="column3" data-switchable="false"&Columns3&/th&
&th data-field="column4" data-visible="false"&Columns4&/th&
超多列显示
Bootstrap table 支持超多列，会自动显示水平滚动条。
&table id="table-large-columns" data-height="400" data-show-columns="true"&&/table&
$(function () {
$('#large-columns-table').next().click(function () {
$(this).hide();
buildTable($('#table-large-columns'), 50, 50);
名片（card）表格
<p data-zh="使用cardView: true属性去显示名片（card）表格。" data-es="Use la opción cardView: true para mostrar la vista de tarjeta.">使用cardView: true属性去显示名片（card）表格。
Description
&table data-url="data4.json" data-height="299" data-card-view="true" data-response-handler="responseHandler"&
&th data-field="name"&Name&/th&
&th data-field="license"&License&/th&
&th data-field="description"&Description&/th&
&th data-field="url"&Url&/th&
// client side
function responseHandler(res) {
return res.
// server side
function responseHandler(res) {
rows: res.
total: res.repos.length
表格选择器
<p data-zh="使用 clickToSelect, selectItemName 属性和 radio 列属性来显示单选框表格。" data-es="Use las opciones clickToSelect, selectItemName y las opción de columna radio para mostrar el Radio seleccionable en la tabla.">使用 clickToSelect, selectItemName 属性和 radio 列属性来显示单选框表格。
Item Price
&table data-url="data1.json" data-height="299" data-click-to-select="true" data-select-item-name="radioName"&
&th data-field="state" data-radio="true"&&/th&
&th data-field="id" data-align="right"&Item ID&/th&
&th data-field="name" data-align="center"&Item Name&/th&
&th data-field="price" data-align="left"&Item Price&/th&
<p data-zh="使用 clickToSelect 属性和 radio 列属性来显示复选框表格。" data-es="Use la opción clickToSelect y la opción de columna checkbox para mostrar el Checkbox seleccionable en la tabla.">使用 clickToSelect 属性和 radio 列属性来显示复选框表格。
Item Price
&table data-url="data1.json" data-height="299" data-click-to-select="true"&
&th data-field="state" data-checkbox="true"&&/th&
&th data-field="id" data-align="right"&Item ID&/th&
&th data-field="name" data-align="center"&Item Name&/th&
&th data-field="price" data-align=""&Item Price&/th&
禁用的复选框
<p data-zh="使用 checkboxHeader, checkboxEnable 属性和 radio 列属性来禁用表格选择器。" data-es="Use las opciones checkboxHeader, checkboxEnable y la opción de columna formatter para desahabilitar el control seleccionado.">使用 checkboxHeader, checkboxEnable 属性和 radio 列属性来禁用表格选择器。
Item Price
&table data-url="data1.json" data-height="299" data-click-to-select="true"&
&th data-field="state" data-checkbox="true" data-formatter="stateFormatter"&&/th&
&th data-field="id" data-align="right"&Item ID&/th&
&th data-field="name" data-align="center"&Item Name&/th&
&th data-field="price" data-align=""&Item Price&/th&
function stateFormatter(value, row, index) {
if (index === 2) {
disabled: true
if (index === 5) {
disabled: true,
checked: true
只能单选的复选框
<p data-zh="使用 singleSelect 属性来允许表格只能选择一列。" data-es="Use la opción singleSelect para permitir solo un fila seleccionada a la vez..">使用 singleSelect 属性来允许表格只能选择一列。
Item Price
&table data-url="data1.json" data-height="299" data-click-to-select="true" data-single-select="true"&
&th data-field="state" data-checkbox="true"&&/th&
&th data-field="id" data-align="right"&Item ID&/th&
&th data-field="name" data-align="center"&Item Name&/th&
&th data-field="price" data-align=""&Item Price&/th&
表格工具栏
基本工具栏
<p data-zh="使用 search, showColumns, showRefresh, showToggle 属性来显示基本的工具栏。" data-es="Use las opciones search, showColumns, showRefresh, showToggle para mostrar una barra de herramientas básica.">使用 search, showColumns, showRefresh, showToggle 属性来显示基本的工具栏。
Item Price
&table data-url="data1.json" data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1"&
&th data-field="state" data-radio="true"&Item ID&/th&
&th data-field="id" data-align="right"&Item ID&/th&
&th data-field="name" data-align="center"&Item Name&/th&
&th data-field="price" data-align="left"&Item Price&/th&
自定义工具栏
<p data-zh="使用 toolbar 属性来自定义工具子。" data-es="Use la opción toolbar para definir la barra de herramientas personalizada.">使用 toolbar 属性来自定义工具子。
Remember me
Item Price
&div id="custom-toolbar"&
&div class="form-inline" role="form"&
&div class="form-group"&
&div class="input-group"&
&div class="input-group-addon"&@&/div&
&input class="form-control" type="email" placeholder="Enter email"&
&div class="form-group"&
&label class="sr-only" for="exampleInputPassword2"&Password&/label&
&input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"&
&div class="checkbox"&
&input type="checkbox"& Remember me
&button type="submit" class="btn btn-default"&Sign in&/button&
&table data-url="data1.json" data-height="299" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"&
&th data-field="id" data-align="right"&Item ID&/th&
&th data-field="name" data-align="center"&Item Name&/th&
&th data-field="price" data-align=""&Item Price&/th&
<p data-es="Use las opciones pagination, sidePagination, pageNumber, pageSize, pageList para setear las opciones de paginación.">Use pagination, sidePagination, pageNumber, pageSize, pageList options to set the pagination options.
客户的分页
Item Price
&table id="table-pagination" data-url="data2.json" data-height="400" data-pagination="true" data-search="true"&
&th data-field="state" data-checkbox="true"&&/th&
&th data-field="id" data-align="right" data-sortable="true"&Item ID&/th&
&th data-field="name" data-align="center" data-sortable="true"&Item Name&/th&
&th data-field="price" data-sortable="true" data-sorter="priceSorter"&Item Price&/th&
服务器端分页
<p data-zh="使用 sidePagination: 'server' 属性来定义分页是在服务器端。" data-es="Use la opción sidePagination: 'server' para definir la paginación del lado del servidor.">使用 sidePagination: 'server' 属性来定义分页是在服务器端。
Item Price
&table data-url="/examples/bootstrap_table/data" data-height="400" data-side-pagination="server" data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true"&
&th data-field="state" data-checkbox="true"&&/th&
&th data-field="id" data-align="right" data-sortable="true"&Item ID&/th&
&th data-field="name" data-align="center" data-sortable="true"&Item Name&/th&
&th data-field="price" data-sortable="true"&Item Price&/th&
Here is the result of event.
Item Price
&div class="alert alert-success" id="events-result" data-es="Aquí se muestra el resultado del evento"&
Here is the result of event.
&table id="events-table" data-url="data2.json" data-height="299" data-search="true" data-pagination="true" data-show-columns="true"&
&th data-field="state" data-checkbox="true"&&/th&
&th data-field="id" data-sortable="true"&Item ID&/th&
&th data-field="name" data-sortable="true"&Item Name&/th&
&th data-field="price" data-sortable="true"&Item Price&/th&
$(function () {
$('#basic-events-table').next().click(function () {
$(this).hide();
var $result = $('#events-result');
$('#events-table').bootstrapTable({
onAll: function (name, args) {
console.log('Event: onAll, data: ', args);
onClickRow: function (row) {
$result.text('Event: onClickRow, data: ' + JSON.stringify(row));
onDblClickRow: function (row) {
$result.text('Event: onDblClickRow, data: ' + JSON.stringify(row));
onSort: function (name, order) {
$result.text('Event: onSort, data: ' + name + ', ' + order);
onCheck: function (row) {
$result.text('Event: onCheck, data: ' + JSON.stringify(row));
onUncheck: function (row) {
$result.text('Event: onUncheck, data: ' + JSON.stringify(row));
onCheckAll: function () {
$result.text('Event: onCheckAll');
onUncheckAll: function () {
$result.text('Event: onUncheckAll');
onLoadSuccess: function (data) {
$result.text('Event: onLoadSuccess, data: ' + data);
onLoadError: function (status) {
$result.text('Event: onLoadError, data: ' + status);
onColumnSwitch: function (field, checked) {
$result.text('Event: onSort, data: ' + field + ', ' + checked);
onPageChange: function (number, size) {
$result.text('Event: onPageChange, data: ' + number + ', ' + size);
onSearch: function (text) {
$result.text('Event: onSearch, data: ' + text);
}).on('all.bs.table', function (e, name, args) {
console.log('Event:', name, ', data:', args);
}).on('click-row.bs.table', function (e, row, $element) {
$result.text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
}).on('dbl-click-row.bs.table', function (e, row, $element) {
$result.text('Event: dbl-click-row.bs.table, data: ' + JSON.stringify(row));
}).on('sort.bs.table', function (e, name, order) {
$result.text('Event: sort.bs.table, data: ' + name + ', ' + order);
}).on('check.bs.table', function (e, row) {
$result.text('Event: check.bs.table, data: ' + JSON.stringify(row));
}).on('uncheck.bs.table', function (e, row) {
$result.text('Event: uncheck.bs.table, data: ' + JSON.stringify(row));
}).on('check-all.bs.table', function (e) {
$result.text('Event: check-all.bs.table');
}).on('uncheck-all.bs.table', function (e) {
$result.text('Event: uncheck-all.bs.table');
}).on('load-success.bs.table', function (e, data) {
$result.text('Event: load-success.bs.table');
}).on('load-error.bs.table', function (e, status) {
$result.text('Event: load-error.bs.table, data: ' + status);
}).on('column-switch.bs.table', function (e, field, checked) {
$result.text('Event: column-switch.bs.table, data: ' +
field + ', ' + checked);
}).on('page-change.bs.table', function (e, size, number) {
$result.text('Event: page-change.bs.table, data: ' + number + ', ' + size);
}).on('search.bs.table', function (e, text) {
$result.text('Event: search.bs.table, data: ' + text);
<p data-zh="使用 formatter, events 列属性来自定义列事件。" data-es="Use las opciones de columna formatter, events para definiir los eventos.">使用 formatter, events 列属性来自定义列事件。
Item Price
Item Operate
&table id="events-id2" data-url="data1.json" data-height="299" data-search="true"&
&th data-field="state" data-checkbox="true"&&/th&
&th data-field="id" data-sortable="true"&Item ID&/th&
&th data-field="name" data-sortable="true"&Item Name&/th&
&th data-field="price" data-sortable="true"&Item Price&/th&
&th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents"&Item Operate&/th&
function operateFormatter(value, row, index) {
'&a class="like" href="javascript:void(0)" title="Like"&',
'&i class="glyphicon glyphicon-heart"&&/i&',
'&a class="edit ml10" href="javascript:void(0)" title="Edit"&',
'&i class="glyphicon glyphicon-edit"&&/i&',
'&a class="remove ml10" href="javascript:void(0)" title="Remove"&',
'&i class="glyphicon glyphicon-remove"&&/i&',
].join('');
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) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
<p data-zh="方法的使用语法为: $('#table').bootstrapTable('method', parameter);。" data-es="Sintáxis para llamar a los métodos: $('#table').bootstrapTable('method', parameter);.">方法的使用语法为: $('#table').bootstrapTable('method', parameter);。
Item Price
&div class="btn-group"&
&button class="btn btn-default" id="get-selections"&
Get Selections
&button class="btn btn-default" id="get-data" data-method="getData"&
&button class="btn btn-default" id="load-data" data-method="load"&
&button class="btn btn-default" id="append-data" data-method="append"&
Append Data
&button class="btn btn-default" id="remove-data" data-method="remove"&
Remove Data
&button class="btn btn-default" id="update-row" data-method="updateRow"&
Update Row
&button class="btn btn-default" id="merge-cells"&
Merge Cells
&button class="btn btn-default" id="check-all" data-method="checkAll"&
&button class="btn btn-default" id="uncheck-all" data-method="uncheckAll"&
Uncheck All
&button class="btn btn-default" id="show-loading" data-method="showLoading"&
Show Loading
&button class="btn btn-default" id="hide-loading" data-method="hideLoading"&
Hide Loading
&button class="btn btn-default" id="refresh" data-method="refresh"&
&button class="btn btn-default" id="show-column" data-method="showColumn"&
Show Column
&button class="btn btn-default" id="hide-column" data-method="hideColumn"&
Hide Column
&table id="table-methods-table" data-height="299"&
&th data-field="state" data-checkbox="true"&&/th&
&th data-field="id"&Item ID&/th&
&th data-field="name"&Item Name&/th&
&th data-field="price"&Item Price&/th&
$(function () {
$('#table-methods').next().click(function () {
$(this).hide();
var id = 0,
getRows = function () {
var rows = [];
for (var i = 0; i & 10; i++) {
rows.push({
name: 'test' + id,
price: '$' + id
// init table use data
$table = $('#table-methods-table').bootstrapTable({
data: getRows()
$('#get-selections').click(function () {
alert('Selected values: ' + JSON.stringify($table.bootstrapTable('getSelections')));
$('#get-data').click(function () {
alert('current data: ' + JSON.stringify($table.bootstrapTable('getData')));
// This demonstrates utilizing the data-method attribute to use one
jQuery handler to execute multiple methods.
// ($this).data('method') retrieves the value of the data-method
attribute of the object that was clicked which is then passed to
the bootstrapTable function.
// Only the load and append methods require a parameter
$('#load-data, #append-data, #check-all, #uncheck-all, ' +
'#show-loading, #hide-loading').click(function () {
$table.bootstrapTable($(this).data('method'), getRows());
$('#refresh').click(function () {
$table.bootstrapTable('refresh', {
url: 'data1.json'
$('#remove-data').click(function () {
var selects = $table.bootstrapTable('getSelections');
ids = $.map(selects, function (row) {
return row.
$table.bootstrapTable('remove', {
field: 'id',
values: ids
$('#update-row').click(function () {
$table.bootstrapTable('updateRow', {
name: 'test111111',
price: '$111111'
$('#merge-cells').click(function () {
$table.bootstrapTable('mergeCells', {
field: 'name',
colspan: 2,
rowspan: 3
$('#show-column, #hide-column').click(function () {
$table.bootstrapTable($(this).data('method'), 'id');
通过JavaScript启用
&table id="table-javascript"&&/table&
$(function () {
$('#via-javascript-table').next().click(function () {
$(this).hide();
$('#table-javascript').bootstrapTable({
method: 'get',
url: 'data2.json',
cache: false,
height: 400,
striped: true,
pagination: true,
pageSize: 50,
pageList: [10, 25, 50, 100, 200],
search: true,
showColumns: true,
showRefresh: true,
minimumCountColumns: 2,
clickToSelect: true,
columns: [{
field: 'state',
checkbox: true
field: 'id',
title: 'Item ID',
align: 'right',
valign: 'bottom',
sortable: true
field: 'name',
title: 'Item Name',
align: 'center',
valign: 'middle',
sortable: true,
formatter: nameFormatter
field: 'price',
title: 'Item Price',
align: 'left',
valign: 'top',
sortable: true,
formatter: priceFormatter,
sorter: priceSorter
field: 'operate',
title: 'Item Operate',
align: 'center',
valign: 'middle',
clickToSelect: false,
formatter: operateFormatter,
events: operateEvents
TA的最新馆藏