最近项目的表格使用了bootstrap-Table控件,研究了一下直接上代码:
JS代码(这个只是客户端获取数据并不是服务端):
function initTable() {
jQuery.ajax({
url: "ashx/GuideManagement.ashx",
type: "post",
dataType: "json",
data: { Action: "GuideManagementCheck", AjaxFllage: true },
success: function (value) {
var obj = [];
for (var i = 0; i < value.length; i++) {
obj.push(value[i]); //由于传回的JSON数据是被封装成了一个Object类型的数据传回,所以这里需要用一个数组类型接收
}
$table = $('#tb_departments').bootstrapTable({
data: obj, //最终的JSON数据放在这里
height: $(window).height() - 100,
striped: true,
pagination: true,
pageNumber: 1,
pageSize: 10,
pageList: [5, 10, 20],
search: true,
showRefresh: true,
sidePagination: "client",
showColumns: true,
minimunCountColumns: 2,
columns: [{
field: 'Name', //列ID同时也是指定要显示的数据的ID
title: '姓名',
width: 100,
align: 'center',
valign: 'center',
sortable: true,
}, {
field: 'IDNumber',
title: '身份证号码',
align: 'center',
valign: 'center',
sortable: true
}, {
field: 'GuideCardNumber',
title: '导游证编号',
align: 'center',
valign: 'center',
sortable: true
}, {
field: 'TourCompany',
title: '导游公司',
align: 'center',
valign: 'center',
sortable: true
}, {
field: 'Time',
title: '添加/修改时间',
align: 'center',
valign: 'center',
sortable: true
}, {
field: 'Status',
title: '是否有效',
align: 'center',
valign: 'center',
sortable: true
}, {
field: 'TheRemarks',
title: '备注',
align: 'center',
width: 100,
valign: 'center',
}, {
field: 'operate',
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var e = '<button type="button" class="RoleOfD btn btn-default btn-sm" style="margin-right:15px;" οnclick="layer_show(\'' + "修改信息" + '\',\'' + "Update_GuideManagement.html" + '\',\'' + "" + '\',\'' + "510" + '\',\'' + row.ID + '\')">编辑</button>';
var d = '<button type="button" class="RoleOfEdit btn btn-default btn-sm" style="margin-right:15px;" οnclick="deletedata(\'' + row.ID + '\')">删除</a> ';
return e + d;
//这里是创建一个新的列但是列里面自定义了两个按钮用作业务上的操作。
}
}]
});
}
});
}
注意前台要有一个table作为容器,如:
<div>
<table id = "tb_departments"></table>
</div>