一、效果图：
二、功能：
点击某行的“通过”按钮和“拒绝”按钮，分别调用两个不同服务接口，然后重新加载数据表，改行就消失了。
三、html代码（js、css依赖需手动添加）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>报销管理</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="./css/" rel="stylesheet">
<!-- Font Awesome -->
<link href="./css/" rel="stylesheet">
<link href="./css/" rel="stylesheet">
<link href="./css/" rel="stylesheet">
<link rel="stylesheet" href="./css/">
<!-- Theme style -->
<link href="./css/" rel="stylesheet">
<link href="./css/dataTables_thead.css" rel="stylesheet">
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#dwsp" data-toggle="tab">待我审批</a>
</li>
<li>
<a href="#sqjl" data-toggle="tab" >申请记录</a>
</li>
<li>
<a href="#wycl" data-toggle="tab" >我已处理</a>
</li>
<li>
<a href="#shqx" data-toggle="tab" >收回权限</a>
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane" >
<div class="box-body" style="overflow :auto">
<!-- datatable -->
<table class="table table-bordered table-hover table-striped" width="100%">
</table>
<!-- ./datatable -->
</div>
</div>
<div class="tab-pane" >
<div class="box-body" style="overflow :auto">
<!-- datatable -->
<table class="table table-bordered table-hover table-striped" width="100%">
</table>
<!-- ./datatable -->
</div>
</div>
<div class="tab-pane" >
<div class="box-body" style="overflow :auto">
<!-- datatable -->
<table class="table table-bordered table-hover table-striped" width="100%">
</table>
<!-- ./datatable -->
</div>
</div>
<div class="tab-pane" >
<div class="box-body" style="overflow :auto">
<!-- datatable -->
<table class="table table-bordered table-hover table-striped" width="100%">
<thead>
<tr>
<th>名称</th>
<th>创建时间</th>
<th>创建人</th>
<th>所在位置</th>
</tr>
</thead>
</table>
<!-- ./datatable -->
</div>
</div>
</div>
</div>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="./js/"></script>
<!-- Bootstrap 3.3.7 -->
<script src="./js/"></script>
<!-- AdminLTE App -->
<script src="./js/"></script>
<script src="./js/" type="text/javascript"></script>
<script src="./js/" type="text/javascript"></script>
<script type="text/javascript" src="./js/"> </script>
</body>
</html>
//格式转换
var myFormatConversion;
myFormatConversion = {
formatterDateTime: function (date) {
var datetime = ()
+ "-"// "年"
+ ((() + 1) > 10 ? (() + 1) : "0"
+ (() + 1))
+ "-"// "月"
+ (() < 10 ? "0" + () : date
.getDate())
+ " "
+ (() < 10 ? "0" + () : date
.getHours())
+ ":"
+ (() < 10 ? "0" + () : date
.getMinutes())
+ ":"
+ (() < 10 ? "0" + () : date
.getSeconds());
return datetime;
},
/**
* 毫秒转时间格式
*/
longMsTimeConvertToDateTime: function (time) {
var myDate = new Date(time);
return (myDate);
},
//时间格式转换函数
timeconv: function (data) {
var dataConv = (data);
// for (var myIndex= 0; myIndex < ; myIndex++) {
// // (myIndex);
// if (data[myIndex].hasOwnProperty("state")) data[myIndex].state=(data[myIndex].state);
// if (data[myIndex].hasOwnProperty("createtime")) data[myIndex].createtime=(data[myIndex].createtime);
// if (data[myIndex].hasOwnProperty("createTime")) data[myIndex].createTime=(data[myIndex].createTime);
// }
// (data);
return dataConv;
},
};
//申请记录tab内容重新加载
$('#tab_sqjl').off("click").on("click", function () {
$('#dt_sqjl').DataTable().();
});
//我已处理tab重新加载
$('#tab_wycl').off("click").on("click", function () {
//alert(1);
$('#dt_wycl').DataTable().();
});
//收回权限tab内容
$('#tab_shqx').off("click").on("click", function () {
//alert(1);
// $.ajax({
// async: false,
// type: "GET",
// dataType: "json",
// url: "http://localhost:8080/ywsjglprj/process/list",
// timeout: 3000,
// success: function (data, status) {
// dwspDT = "#dt_shqx";
// var nodeDT = ;
// creatTable(dwspDT, nodeDT);
// }
// });
});
//创建没有操作按钮的DT
function creatTable(DTname, url) {
//将创建的表格存放到tables变量中
var tables = $(DTname).DataTable({
//控制分页、搜索、每页显示数量、显示信息等四个插件的dom
//数据传入
"autoWidth": true,
"ajax": {
"url": url,
"dataSrc": "",
},
"deferRender": true,
"lengthMenu": [15, 25, 50, 75, 100],
//允许重建
"destroy": true,
// "scrollX": true,
//设置列数据
// "columnDefs": [ {
// "targets": 0,
// "data": "userid",
// "defaultContent": "<button>Click!</button>"
// } ],
"columns": [
{
"data": "userid",
"title": "用户名",
},
{
"data": "createtime",
"title": "创建时间",
"render": function (data, type, row) {
return (data);
}
},
// { "data": "resourceid" },
{
"data": "resourcename",
"title": "资源名称",
},
// {"data": "resourcetype"},
{
"data": "state",
"title": "状态",
"render": function (data, type, row) {
switch (data) {
case 1:
return "过时";
break;
case 2:
return "过时";
break;
case 3:
return "通过";
break;
case 4:
return "拒绝";
break;
}
}
},
],
//设置排序
"order": [[1, 'asc']],
//设置语言
language: {
"url": "./"
}
});//表格tables创建完毕
// return tables;
}
//创建有操作按钮的DT
function creatTable_Op(DTname, url) {
//将创建的表格存放到tables变量中
var tables = $(DTname).DataTable({
//控制分页、搜索、每页显示数量、显示信息等四个插件的dom
//数据传入
"ajax": {
"url": url,
"dataSrc": "",
},
"lengthMenu": [15, 25, 50, 75, 100],
//允许重建
"destroy": true,
// "scrollX": true,
//设置列数据
"columns": [
// { "data": "code" },
// { "data": "name" },
// { "data": "enName" },
// { "data": "createTime" },
// { "data": "createPerson" },
// { "data": "updateTime" },
// { "data": "updatePerson" },
// { "data": "description" },
// { "data": "bmid" },
{
"data": "name",
"title": "名称",
},
{
"data": "assignee",
"title": "用户名",
// "render": function (data, type, row) {
// return (data);
// }
},
{
"data": "createTime",
"title": "创建时间",
"render": function (data, type, row) {
return (data);
}
},
{
"data": "table",
"title": "资源名称",
},
{
"data": null,
"title": "操作",
// "title": "操作",
"render": function (data, type, row, meta) {
return data = '<button type="button" style = "margin:0px;display:inline" class="btn bt_pass btn-primary btn-xs" ><i class="fa fa-check"></i> 通过 </button>' +
' <button type="button" style="display:inline" class="btn bt_unpass btn-danger btn-xs" ><i class="fa fa-times"></i> 拒绝 </button>';
}
},
],
//设置排序
"order": [[1, 'asc']],
//设置语言
"language": {
"url": "./"
}
});//表格tables创建完毕
// return tables;
}
//执行特定操作后，刷新表格
// function UpdateDT() {
// $.ajax({
// async: false,
// type: "GET",
// dataType: "json",
// url: "http://localhost:8080/ywsjglprj/process/list",
// timeout: 3000,
// success: function (data, status) {
// dwspDT = "#dt_dwsp";
// var nodeDT =myFormatConversion.dwsp_sqjl_wycl_conv(data);
// creatTable_Op(dwspDT, nodeDT);
// }
// });
// }
//“通过”操作，调用服务器特定接口
$("#dt_dwsp").off("click", ".bt_pass").on("click", ".bt_pass", function () {
var id = $('#dt_dwsp').DataTable().row($(this).parents().parents("tr")).data().id;
// (id);
$.ajax({
async: false,
type: "GET",
dataType: "json",
url: "http://localhost:8080/ywsjglprj/process/pass/" + id,
timeout: 3000,
success: function (data, status) {
//请求执行成功后，刷新表格
// UpdateDT();
$('#dt_dwsp').DataTable().();
}
});
});
//“拒绝”操作，调用服务器特定接口
$("#dt_dwsp").off("click", ".bt_unpass").on("click", ".bt_unpass", function () {
var id = $('#dt_dwsp').DataTable().row($(this).parents().parents("tr")).data().id;
// (id);
$.ajax({
async: false,
type: "GET",
dataType: "json",
url: "http://localhost:8080/ywsjglprj/process/unpass/" + id,
timeout: 3000,
success: function (data, status) {
//请求执行成功后，刷新表格
// UpdateDT();
$('#dt_dwsp').DataTable().();
}
});
});
//初始化网页
$(document).ready(function () {
var dwsp_url = "http://localhost:8080/ywsjglprj/process/list";
var dwspDT = "#dt_dwsp";
var sqjl_url = "http://localhost:8080/ywsjglprj/apply/list";
var sqjlDT = "#dt_sqjl";
var wycl_url = "http://localhost:8080/ywsjglprj/apply/processedlist";
var wyclDT = "#dt_wycl";
creatTable(sqjlDT, sqjl_url);
creatTable(wyclDT, wycl_url);
creatTable_Op(dwspDT, dwsp_url);
});