Bootstrap table简单使用总结

一、构造方式

Bootstrap Table的构造方式十分灵活，可以通过HTML和JS两种方式来实现。

HTML构造方式：

```html

data-toggle="table"

data-url="${ctxAdmin}/user/userData?Id=${Id}"

data-pagination="true"

data-show-search="true"

data-show-columns="true"

data-icon-size="outline"

data-mobile-responsive="true"

data-500"

id="tablelist"

data-side-pagination="server">

ID

用户名

真实姓名

座机

手机

用户类型

操作

```

JS构造方式：

结合HTML和JS，我们可以更灵活地配置Bootstrap Table的各种选项和功能。例如：

```javascript

(function() {

$('tablelist').bootstrapTable({

url: "${ctxAdmin}/user/userData?Id=${Id}",

search: true,

pagination: true,

showRefresh: true,

showToggle: true,

showColumns: true,

iconSize: 'outline',

toolbar: 'exampleTableEventsToolbar',

icons: {

refresh: 'glyphicon-repeat',

toggle: 'glyphicon-list-alt',

columns: 'glyphicon-list'

}

});

});

```

二、data-formatter和data-events的使用

接下来，我们来讨论服务器分页和客户端分页的转换问题。在Bootstrap中，默认使用的是客户端分页。我们可以通过HTML标签中的 `data-side-pagination:"client"` 来指定使用客户端分页。我们也可以通过JS中的 `sidePagination: 'server'` 来指定使用服务器分页。需要注意的是，服务器分页和客户端分页传回来的JSON数据格式是不同的。客户端分页返回的是正常的json array格式，如 `[{},{},{}]`；而服务器分页返回的是一个包含总数据条数和当前页面展示的数据量的格式，如 `{“total”:0,”rows”:[]}`。

让我们以一段代码结束本文：

```javascript

function actionFormatter(value, row, index) {

return '修改 ' + '删除';

}

// 事件处理

window.actionEvents = {

'click .mod': function(e, value, row, index) {

// 执行修改操作

},

'click .delete': function(e, value, row, index) {

// 执行删除操作

}

}

// 分页方式转换和数据刷新

$("tablelist").bootstrapTable('refreshOptions', {

sidePagination: 'client' // 设置为客户端分页

});

$("tablelist").bootstrapTable('refresh', {

url: "${ctxAdmin}/user/getsearchuserinfo", // 设置数据来源

query: {

username: $('sea-username').val(),

realname: $("sea-realname").val(),

mobile: $("sea-mobile").val()

} // 传递给后台的参数

});

```

以上代码仅供参考和学习交流，实际使用时请根据实际情况进行调整和优化。