<!-- 顶部导航 -->
<div class="container">
<div class="row">
<table class="table">
</table>
</div>
</div>
<script src='./js/jquery.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.min.js'></script>
<script src="./js/bootstrap-table.min.js"></script>
<script src="./js/bootstrap-table-print.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) {
$('.table').bootstrapTable('destroy').bootstrapTable({
data: res.data,//属性名称
//url:"" "请求数据源"
pagination: true,//启用分页
pageSize: 3,//分页大小
//PageList:[5,10,20]
showToggle: "true",//切换列表
showPaginationSwitch: "true",//分页开关
showFullscreen: "true",//全屏
// showRefresh:"true",//刷新,仅支持url数据源
search: "true",//查询工具条
showSearchButton: true,//显示查询按钮
showPrint: "true",//打印按钮
showExport: "true",//导出按钮
columns: [{//列
field: '_id',//数据绑定的属性
title: '编号'//
}, {
field: 'title',
title: '标题'
}, {
field: 'content',
title: '内容'
}, {
field: 'top',
title: '是否置顶',
formatter:function(value,data){
//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"
}
}
}
}
})
}
}
})
}
})
</script>