下面的代码是我实际工作用到的,下面标注一下常用的属性说明
$(function () {
// 数据表格展示,destroy参数表示丢弃原来的table,重新构造新的table
$.getJSON("test.json", function(data){
initDataTable("destroy", data);
});
function initDataTable(op, data){
$("#data_info").bootstrapTable(op).bootstrapTable({
method: "get", // 请求方式有get和post两种,一般get就行了
toolbar: "#toolbar", // 指明自定义的toolbar,它是一个jQuery选择器,使用场景:比如,自定义新增、修改、删除等操作
striped: true, // 隔行变色
pagination: true, // 分页
sidePagination: "client", // 分页的方式,客户端分页和服务器端分页,两者的区别:客户端分页是一次性将数据返回后展现,服务器端分页是每次点击下一页后才会从后台取数据
pageNumber: 1, // 首页页码
cache:false, // 是否启用缓存
search: true, // 搜索框
sortable: true, // 排序
sortOrder: "desc", // 设置排序的方式
searchOnEnterKey: true, // 当搜索框启用后,再开启这个设置,表示按回车后触发搜索;否则自动触发搜索
showColumns: true, // 显示内容列下拉框
showRefresh: true, // 显示刷新按钮
showToggle: true, // 显示切换试图按钮
uniqueId: "id", // 指示每一行的唯一标识符,一般使用id来做为标识,当使用table的事件时,就可以捕获这个值
pageSize: 10, // 每页显示10条信息
pageList: [10, 25, 50, 100], // 设置可供选择的页面数据条数
columns: [{ // table所要显示的列
checkbox: true
}, {
field: "name", // field的值要和后台返回的json字段保持一致
title: "Name", // 列名
sortable: true // 排序
}, {
field: "comments",
title: "描述",
sortable: true
}, {
field: "contacts_email",
title: "报警联系人邮箱",
// sortable: true
}, {
field: "contacts_phone",
title: "报警联系人电话",
// sortable: true
}, {
field: "IP",
title: "IP",
// sortable: true
}, {
field: "create_time",
title: "创建时间",
sortable: true
}, {
field: "update_time",
title: "更新时间",
sortable: true
},{
field: "use_flag",
title: "更新状态",
sortable: true
}],
data: formatData(data), // 用于接收后台返回的json数据
});
}
// 为table格式化json返回的数据
var formatData = function (data) {
var l = []
for (var i = 0; i < data.data_list.length; i++) {
var m = data.data_list[i]
var d = {
'id': m.id,
'name': m.name,
'comments': m.comments,
'IP': m.IP,
'Port': m.Port,
'contacts_email': m.contacts_email,
'contacts_phone': m.contacts_phone,
'create_time': m.create_time,
'update_time': m.update_time,
}
l.push(d)
}
return l
};