bootstarp table 使用及常用参数说明

下面的代码是我实际工作用到的,下面标注一下常用的属性说明

$(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
};



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值