adminlte中datatable中自定义搜索和导出按钮

为了方便使用，即使是不懂datatable的人也能上手使用，所以还是自定义的好，按钮和搜索直接和往常一样根据html中定义

按钮：分了两种，有一个特殊的类型colvis和普通的按钮
- colvis (".colvis").html((".colvis").html((".colvis").html(("#example_wrapper .buttons-colvis")); 直接写入dom元素
- 普通导出按钮；
1. 在datatable写出按钮并在页面上显示
2. 自定义按钮，属性名data-type的值就是按钮的extend值
3. 点击自定义按钮，触发名字相同的按钮的点击事件
搜索
1. 定义一个搜素的表单，定义一个点击事件（不是提交）
2. 点击后刷新表单
3. 在datatable提交数据时，将搜索表单一起传递

后台返回格式

$data = ["draw" => $_GET['draw'],"recordsTotal" => 570, //所有数据"recordsFiltered" => 60,// 过滤后的数据"data" => [["first_name" => "Airi", "last_name" => "Satou", "position" => "Accountant", "office" => "Tokyo", "start_date" => "28th Nov 08", "salary" => "$162,700",], ["first_name" => "Angelica", "last_name" => "Ramos", "position" => "Chief Executive Officer (CEO)", "office" => "London", "start_date" => "9th Oct 09", "salary" => "$1,200,000"], ["first_name" => "Ashton", "last_name" => "Cox", "position" => "Junior Technical Author", "office" => "San Francisco", "start_date" => "12th Jan 09", "salary" => "$86,000"],]
];

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>AdminLTE 3 | DataTables</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"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 图标 --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><style>body,html {padding: 30px;}.bottom>div {display: inline-block;}#example_paginate {float: right;}#example_length {margin-left: 10px;}.customer .dropdown-toggle::after {/* 去除下拉列表小三角 */display: none}.customer .btn-secondary {background-color: white;}.style2>div {float: right;padding-left: 5px;}</style>
</head><body><div class="customer"><!-- 自定义搜索表单，搜索的内容就是表单的内容 -->搜索样式<form id="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="button" class="btn btn-success" onclick="search()"> 搜用户</button></form><!-- 自定义按钮，注意data-type的值为datatable中按钮的值 --><br> 按钮样式1<div class="style1"><div class="btns"><button type="button" class="btn btn-success" data-type="copy"> 复制本页数据</button><button type="button" class="btn btn-primary" data-type="pdf"> 导出为pdf</button><button type="button" class="btn btn-info" data-type="csv"> 导出为csv</button><button type="button" class="btn btn-warning" data-type="print"> 导出为print</button><button type="button" class="btn btn-danger" data-type="excel"> 导出为excel</button><button type="button" class="btn btn-success" data-type="colvis"> 导出为colvis</button><button type="button" class="btn btn-link"> 添加</button></div></div><br> 按钮样式2<div class="style2"><div class="dropdown"><button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-download-alt"></span></button><div class="dropdown-menu"><a class="dropdown-item" data-type="copy"> 复制本页数据</a><a class="dropdown-item" data-type="pdf"> 导出为pdf</a><a class="dropdown-item" data-type="csv"> 导出为csv</a><a class="dropdown-item" data-type="print"> 导出为print</a><a class="dropdown-item" data-type="excel"> 导出为excel</a><a class="dropdown-item" data-type="colvis"> 导出为colvis</a></div></div><div class="colvis"><!-- 显示列 --></div></div></div><!-- 数据表格显示 --><table id="example" class="table table-bordered   table-hover  table-sm"><thead class="thead-light"> </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 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();}// 导出-自定义按钮功能实现，只和data-type属性有关$("[data-type]").on('click', function () {var name = $(this).attr('data-type');$('.buttons-' + name).click();})$(document).ready(function () {table = $("#example").DataTable({"processing": true,"serverSide": true,ajax: function (data, callback, settings) {// 自定义搜索var formSearch = $("#search").serializeArray();data.search = formSearch;console.log('提交的数据：', data);request(url, data).then(result => {// console.log('返回的数据：', 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": [{ extend: 'copy', 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: '标题', },{ extend: "colvis", text: '       <span class="glyphicon glyphicon-th-list"></span>', className: "btn btn-outline-secondary  " },],"autoWidth": false,searching: false,})// 按钮设置，但是有个特殊的就是colvis$(".colvis").html($("#example_wrapper .buttons-colvis"));$("#example_wrapper  .dt-buttons").hide(); //隐藏按钮，使用自定义按钮});</script>
</body></html>

当然了，还有之前自己写的官方版本，并不完善，仅供参考，
官方按钮和自定义搜索
https://blog.csdn.net/weixin_44797182/article/details/110730279

官方按钮和搜索
https://blog.csdn.net/weixin_44797182/article/details/110634680

adminlte中datatable中自定义搜索和导出按钮相关推荐

转：MSDN Visual系列：MOSS企业级搜索之一——在搜索中心里创建自定义搜索页面和标签选项卡...
MSDN Visual系列:MOSS企业级搜索之一--在搜索中心里创建自定义搜索页面和标签选项卡原文:http://msdn2.microsoft.com/en-us/library/bb42885 ...
JQuery Datatable 实现自定义搜索
前段时间做东西用到了Datatable,自定义搜索那里搜索了好久才做出来. 写的很笨,不过终于实现了. 作为第一篇笔记写下来(^ _ ^) 实现效果表格呈现现效果实现筛选 HTML代码 <! ...
Winforn中使用FastReport实现点击导出按钮PDF预览并弹出另存为对话框
场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
C#中DataTable中的Compute方法使用收集
Compute函数的参数就两个:Expression,和Filter. Expresstion是计算表达式,关于Expression的详细内容请看这里"http://msdn2.micros ...
html 必应网搜索,教程：创建自定义搜索网页 - 必应自定义搜索 - Azure Cognitive Services | Microsoft Docs...
您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn. 教程:构建自定义搜索网 ...
百度地图－自定义搜索、自定义marker、地图选址实用实例
该实例中包含地图自定义搜索.自定义标注marker.地图选址.鼠标样式修改.搜索周边接口等实用功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
ABAP：ALV中自定义搜索帮助
如果希望ALV中某字段具有搜索帮助,第一种办法当然是对表中某字段的引用,设置ref_table.ref_field,将自动触发该字段所带的搜索帮助. 可不可以直接设置Searh Help呢?应该不可以 ...
c html转为datatable,C#中DataTable导出为HTML格式的方法
前言在C#中DataTable导出数据的时候,我们需要HTML格式的输出数据, 这时候就需要使用将DataTable导出为到HTML格式的方法了,以下代码就可以帮助我们达到目的. 首先,我们要绑定D ...
C#中将DataTable中数据导出到csv文件中
在上一篇博文[C#读取CSV文件的方法]中,我介绍了读取csv文件中数据的方法,现在我来介绍下将datatable中的数据导出到csv文件中的方法,废话不多说了,deme程序的代码如下: prote ...
DataTable中的数据导出Excel文件
DataTable中的数据导出Excel文件 View Code ///<summary> /// 将DataTable中的数据导出到指定的Excel文件中 ///</summary ...

adminlte中datatable中自定义搜索和导出按钮

adminlte中datatable中自定义搜索和导出按钮相关推荐

最新文章

热门文章