<!-- 顶部导航 -->
<div class="container">
<div class="row">
<table class="table"></table>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-table-print.min.js"></script>
<script src="./js/tableExport.min.js"></script>
<script src="./js/jspdf.min.js"></script>
<script src="./js/jspdf.plugin.autotable.js"></script>
<script src="./js/bootstrap-table.min.js"></script>
<script src="./js/bootstrap-table-export.min.js"></script>
<script>
$(function () {
load();
$(".table").on("click",".glyphicon-remove",function(){
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){
load();
}
}
})
})
function load() {
$.ajax({
url: "http://localhost:3000/content",
type: "GET",
success: function (res) {
if (res.status == 200) {
console.log(res);
$('.table').bootstrapTable("destroy").bootstrapTable({
data:res.data,
// url:"",数据源
pagination:true,//启用分页
pageSize:1,//分页大小
// pageList:[5,10,20],
showToggle:true,
showPaginationSwitch:true,
showFullscreen:true,
// showRefresh:true,刷新 仅支持data数据
search:true,//启用查询
showSearchButton:true,//显示查询按钮
showPrint:true,
showExport:true,
//列
columns: [{
field: '_id',
title: 'Item ID'
}, {
field: 'title',
title: 'Item Name'
}, {
field: 'content',
title: 'Item Price'
},{
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: function () {
return {
btnAdd: {
icon: 'glyphicon glyphicon-plus',
event: function () {
alert('添加')
},
attributes: {
title: "add"
}
},
btnDel: {
icon: 'glyphicon glyphicon-remove',
event: function () {
alert('删除')
},
attributes: {
title: "remove"
}
}
}
}
})
}
},
error: function (err) {
console.log(err);
}
})
}
})
</script>