引用bootstrap-table的js和css
<script src="./js/bootstrap-table.min.js"></script>
js代码：
load(); //查询(页面载入)
// 删除事件:
$(".table").on("click",".glyphicon-remove",function(){
// parent() 寻找父元素 attr("") 属性
var id=$(this).parent().attr("data-id");
console.log(id);
$.ajax({
url:"http://localhost:3000/content",
type:"DELETE",
data:{_id:id},
success:function(res){
if(res.status===200){
console.log("删除成功")
load();
}
}
})
})
function load() {
$.ajax({
url: "http://localhost:3000/content",
type: "GET",
success: function (res) {
if (res.status === 200) {
$(".table").bootstrapTable('destroy').bootstrapTable({
data: res.data,
// url："" , 数据源
pagination:true, //启用分页
pageSize:5, //分页大小
// pageList:[1,2,3], //自定义分页
showToggle:true, //试图
showPaginationSwitch:true, //分页开关
showFullscreen:true, //全屏
showRefresh:true, //刷新（仅支持url数据源）
search:true, //启用查询
showSearchButton:true, //查询按钮（和search一起使用）
showPrint:true, //打印
showExport:true, //导出(pdf)
// columns 列
columns: [{
field: '_id',
title: '编号'
}, {
field: 'title',
title: '标题'
}, {
field: 'content',
title: '内容'
}, {
field: 'top',
title: '是否置顶',
formatter:function(value,data){
// value 当前列的值
// data 当前行的数据
console.log(value,data)
return value ?"是":"否";
}
},{
title:"操作",
formatter:function(value,data){
return`
<a href="#" data-id='${data._id}' ><span class="glyphicon glyphicon-edit text-primary"></span></a>
<a href="#" data-id='${data._id}' ><span class="glyphicon glyphicon-remove text-danger"></span></a>
`
}
}
],
// 添加删除
// buttons:自定义按钮的集合
buttons: function () {
return {
btnAdd: {
icon: 'glyphicon glyphicon-plus',
event: function () {
alert('添加')
},
attributes: {
title: "add"
}
},
btnDel: {
icon: 'glyphicon glyphicon-remove',
event: function () {
alert('删除')
},
attributes: {
title: "remove"
}
}
}
}
})
}
}
})
}
})
<div class="row">
<table class="table">
</table>
</div>
// url："" , // 数据源
pagination:true, //启用分页
pageSize:5, //分页大小
// pageList:[1,2,3], //自定义分页
showToggle:true, //试图
showPaginationSwitch:true, //分页开关
showFullscreen:true, //全屏
showRefresh:true, //刷新（仅支持url数据源）
showSearchButton:true, //查询按钮（和search一起使用）
showPrint:true,//打印
<script src="./js/jquery.singlePageNav.min.js"></script>
showExport:true,//导出 引用需要多个script的外部插件：如图（按照循序）
自定义按钮：
return {
btnAdd: {
icon: 'glyphicon glyphicon-plus',
event: function () {
alert('添加')
},
attributes: {
title: "add"
}
},
btnDel: {
icon: 'glyphicon glyphicon-remove',
event: function () {
alert('删除')
},
attributes: {
title: "remove"
}
}
}
}
})
formatter 改变格式：
// value 当前列的值
// data 当前行的数据
console.log(value,data)
return value ?"是":"否";
}
删除标签的删除功能实现：
formatter:function(value,data){
return`
<a href="#" data-id='${data._id}' ><span class="glyphicon glyphicon-edit text-primary"></span></a>
<a href="#" data-id='${data._id}' ><span class="glyphicon glyphicon-remove text-danger"></span></a>
`
}
}
给新的“操作”列中的第二个删除标签样式添加ajax的点击事件：
$(".table").on("click",".glyphicon-remove",function(){
// parent() 寻找父元素 attr("") 属性
var id=$(this).parent().attr("data-id");
console.log(id);
$.ajax({
url:"http://localhost:3000/content",
type:"DELETE",
data:{_id:id},
success:function(res){
if(res.status===200){
console.log("删除成功")
load();
}
}
})
})
