datatables通过ajax重新加载数据
一、效果图：
二、功能：
点击某行的“通过”按钮和“拒绝”按钮，分别调用两个不同服务接口，然后重新加载数据表，改行就消失了。
三、html代码（js、css依赖需手动添加）
报销管理
//格式转换
var myFormatConversion;
myFormatConversion = {
formatterDateTime: function (date) {
var datetime = date.getFullYear()
+ "-"// "年"
+ ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
+ (date.getMonth() + 1))
+ "-"// "月"
+ (date.getDate() < 10 ? "0" + date.getDate() : date
.getDate())
+ " "
+ (date.getHours() < 10 ? "0" + date.getHours() : date
.getHours())
+ ":"
+ (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
.getMinutes())
+ ":"
+ (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
.getSeconds());
return datetime;
},
/**
* 毫秒转时间格式
*/
longMsTimeConvertToDateTime: function (time) {
var myDate = new Date(time);
return this.formatterDateTime(myDate);
},
//时间格式转换函数
timeconv: function (data) {
var dataConv = this.longMsTimeConvertToDateTime(data);
// for (var myIndex= 0; myIndex < data.length; myIndex++) {
// // console.log(myIndex);
// if (data[myIndex].hasOwnProperty("state")) data[myIndex].state=this.stateConversion(data[myIndex].state);
// if (data[myIndex].hasOwnProperty("createtime")) data[myIndex].createtime=this.longMsTimeConvertToDateTime(data[myIndex].createtime);
// if (data[myIndex].hasOwnProperty("createTime")) data[myIndex].createTime=this.longMsTimeConvertToDateTime(data[myIndex].createTime);
// }
// console.log(data);
return dataConv;
},
};
//申请记录tab内容重新加载
$('#tab_sqjl').off("click").on("click", function () {
$('#dt_sqjl').DataTable().ajax.reload();
});
//我已处理tab重新加载
$('#tab_wycl').off("click").on("click", function () {
//alert(1);
$('#dt_wycl').DataTable().ajax.reload();
});
//收回权限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 = data.data;
// 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": ""
// } ],
"columns": [
{
"data": "userid",
"title": "用户名",
},
{
"data": "createtime",
"title": "创建时间",
"render": function (data, type, row) {
return myFormatConversion.timeconv(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": "./DataTables.json"
}
});//表格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 myFormatConversion.timeconv(data);
// }
},
{
"data": "createTime",
"title": "创建时间",
"render": function (data, type, row) {
return myFormatConversion.timeconv(data);
}
},
{
"data": "table",
"title": "资源名称",
},
{
"data": null,
"title": "操作",
// "title": "操作",
"render": function (data, type, row, meta) {
return data = '' +
' ';
}
},
],
//设置排序
"order": [[1, 'asc']],
//设置语言
"language": {
"url": "./DataTables.json"
}
});//表格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;
// console.log(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().ajax.reload();
}
});
});
//“拒绝”操作，调用服务器特定接口
$("#dt_dwsp").off("click", ".bt_unpass").on("click", ".bt_unpass", function () {
var id = $('#dt_dwsp').DataTable().row($(this).parents().parents("tr")).data().id;
// console.log(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().ajax.reload();
}
});
});
//初始化网页
$(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);
});