引用bootstrap-table的js和css
<link rel="stylesheet" href="./css/bootstrap-table.min.css">
<script src="./js/bootstrap-table.min.js"></script>
在script里面写： 代码：
注解：文件的请求方式是使用ajax的方法请求的，网页布局使用bootstrap-table格式（class名字：table） ajax的请求：url、type、success（成功）
html：
<div class="row">
<table class="table">
</table>
</div>
script代码：
$(function (){
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"
}
}
}
}
})
}
}
})
}
})
// 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, //打印 需要引用最新版的css和js
<script src="./js/bootstrap-table-print.min.js"></script>
<script src="./js/jquery.singlePageNav.min.js"></script>
==================================
showExport:true, //导出(pdf)
引用需要多个script的外部插件：如图（按照循序）：
<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">\
\
<script src=")https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/tableExport.min.js"></script>\
<script src=")https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF/jspdf.min.js"></script>\
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>\
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>\
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
自定义按钮集合
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"
}
}
}
}
})
formatter 改变格式：
formatter:function(value,data){
// value 当前列的值
// data 当前行的数据
console.log(value,data)
return value ?"是":"否";
}
语句格式 return 属性值 ? "true结果":"false结果"
//================================================== 删除标签的删除功能实现：
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>
`
}
}
给新的“操作”列中的第二个删除标签样式添加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();
}
}
})
})
