<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>1151s</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="../../plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<style>
body,
html {
padding: 30px;
}
.bottom>div {
display: inline-block;
}
#example_paginate {
float: right;
}
#example_length {
margin-left: 10px;
}
/* #btnshow>div {
display: flex;
}
#btnshow>div>button {
margin: auto;
} */
</style>
</head>
<body>
<!-- 自定义搜索框 -->
<div class="search">
用户名称:<input type="text" class="input-text" style="width:250px" placeholder="输入用户名称" id="name" name="name">
用户手机:<input type="text" class="input-text" style="width:250px" placeholder="输入用户电话" id="phone" name="phone">
<button type="submit" class="btn btn-success" onclick="search()"><i class="icon-search"></i> 搜用户
</button>
</div>
<!-- 按钮显示区域 -->
<div id="btnshow">
<div class="dt-buttons btn-group flex-wrap" style="margin-left:30px">
<button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example"
type="button"><span>组1</span></button>
<button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example"
type="button"><span>组2</span></button>
</div>
<button class="btn btn-success">添加</button>
</div>
<table id="example" class="table table-bordered table-hover table-sm">
<thead class="thead-light">
<tr>
</tr>
</thead>
</table>
<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables & Plugins -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="../../plugins/jszip/jszip.min.js"></script>
<script src="../../plugins/pdfmake/pdfmake.min.js"></script>
<script src="../../plugins/pdfmake/vfs_fonts.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
var timer = null; //延时搜索,
var timeout = 1000; // 当在搜索时,只有超过间隔时间(1000)才开始搜索
var url = "./demo.php" //请求地址
var delurl = "./demo.php" //请求地址
var table = null; //表格
var request = (url, params, method = "GET") => {
return new Promise((resolve, reject) => {
$.ajax({
type: method,
url: url,
cache: false, //禁用缓存
data: params, //传入组装的参数
dataType: "json",
success: function (result) {
resolve(result);
},
error: function () {
reject('出错')
}
});
})
}
// 修改
function update(me) {
var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
alert('修改:' + JSON.stringify(row))
}
// 删除
async function del(me) {
var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
var {
first_name } = row; //这里一般是主键,但是没有传过来的id值,这里就用name替代了
var param = {
first_name, method: 'del' }; //传递的参数,也可以在添加一些判断条件
var res = await request(delurl, param);
if (res && res.code == 0) {
//判断返回的数据
$(me).parents('tr').remove();
alert('删除成功')
}
}
// 搜索
function search() {
table.draw();
}
$(document).ready(function () {
table = $("#example").DataTable({
"processing": true,
"serverSide": true,
ajax: function (data, callback, settings) {
// 自定义搜索
data.search = {
name: $('#name').val(),
phone: $('#phone').val(),
}
// console.log(data);
request(url, data).then(result => {
callback(result);
})
},
"columns": [{
'sTitle': '第一个名字', //在thead中显示,有过原来有thead则替换
"data": "first_name",
"width": '20%',
'render': function (data, type, row) {
return "<span style='color:red'>" + data + '</span>';
},
'class': 'text-center', //添加一个css
},
{
'sTitle': '最后一个名字', //在thead中显示,有过原来有thead则替换
"data": "last_name", "orderable": false
},
{
"sTitle": '操作',
"orderable": false,
'render': function (data, type, row) {
return `
<button type="button" class="btn btn-sm btn-info" οnclick="update(this)">修改</>
<button type="button" class="btn btn-sm btn-danger " οnclick="del(this)">删除</button>
`;
},
}
],
"language": //把文字变为中文
{
"sProcessing": "加载中...",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有匹配结果",
"sInfo": "第 _START_ - _END_ 条,共计 _TOTAL_ 条",
"sInfoFiltered": "",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sPrevious": "<", //上一页
"sNext": ">", //下一页
},
},
'aLengthMenu': [3, 10, 20, 30], //设置每页显示记录的下拉菜单
dom: 'Bt<"bottom"ilp><"clear">',
"buttons": [
"copy", "pdf",
"csv",
{
extend: 'pdf', text: '导出为pdf', filename: '数据表', title: '标题', },
{
extend: 'csv', text: '导出为csv', filename: '数据表', title: '标题', },
{
extend: "print", text: '导出为print', filename: '数据表', title: '标题', },
{
extend: 'collection',
text: '导出',
className: "btn-success",
buttons:
[
{
extend: 'copy',//使用 excel扩展
text: '复制本页数据',// 显示文字
},
{
extend: 'pdf', text: '导出为pdf', filename: '数据表', title: '标题', },
{
extend: 'csv', text: '导出为csv', filename: '数据表', title: '标题', },
{
extend: "print", text: '导出为print', filename: '数据表', title: '标题', },
{
extend: 'excel', text: '导出为excel', filename: '数据表', title: '标题', },],
// fade: true
}
,
{
extend: "colvis",
text: '显示列',
className: "btn-info",
},
],
"autoWidth": false,
searching: false,
})
table.buttons().container().prependTo('#btnshow'); //将按钮添加到自己新建的expot中
// $("#btnshow>div").removeClass()
});
</script>
</body>
</html>
搜索和导出等按钮自定义看这个https://blog.csdn.net/weixin_44797182/article/details/110730229