datatables通過ajax重新載入資料
阿新 • • 發佈：2019-02-06
一、效果圖：
二、功能：
點選某行的“通過”按鈕和“拒絕”按鈕，分別呼叫兩個不同服務介面，然後重新載入資料表，改行就消失了。
三、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/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="./css/skin-blue.min.css" rel="stylesheet"> <link href="./css/dataTables.bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="./css/jquery.dataTables.css"> <!-- Theme style --> <link href="./css/AdminLTE.min.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" id="tab_sqjl">申請記錄</a> </li> <li> <a href="#wycl" data-toggle="tab" id="tab_wycl">我已處理</a> </li> <li> <a href="#shqx" data-toggle="tab" id="tab_shqx">收回許可權</a> </li> </ul> <div id="tab_top" class="tab-content"> <div class="active tab-pane" id="dwsp"> <div class="box-body" style="overflow :auto"> <!-- datatable --> <table id="dt_dwsp" class="table table-bordered table-hover table-striped" width="100%"> </table> <!-- ./datatable --> </div> </div> <div class="tab-pane" id="sqjl"> <div class="box-body" style="overflow :auto"> <!-- datatable --> <table id="dt_sqjl" class="table table-bordered table-hover table-striped" width="100%"> </table> <!-- ./datatable --> </div> </div> <div class="tab-pane" id="wycl"> <div class="box-body" style="overflow :auto"> <!-- datatable --> <table id="dt_wycl" class="table table-bordered table-hover table-striped" width="100%"> </table> <!-- ./datatable --> </div> </div> <div class="tab-pane" id="shqx"> <div class="box-body" style="overflow :auto"> <!-- datatable --> <table id="dt_shqx" 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/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="./js/bootstrap.min.js"></script> <!-- AdminLTE App --> <script src="./js/adminlte.js"></script> <script src="./js/jquery.dataTables.min.js" type="text/javascript"></script> <script src="./js/dataTables.bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript" src="./js/bxglSetting.js"> </script> </body> </html>
//格式轉換 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": "<button>Click!</button>" // } ], "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 = '<button type="button" style = "margin:0px;display:inline" class="btn bt_pass btn-primary btn-xs" id="dt_pass"><i class="fa fa-check"></i> 通過 </button>' + ' <button type="button" style="display:inline" class="btn bt_unpass btn-danger btn-xs" id="dt_unpass"><i class="fa fa-times"></i> 拒絕 </button>'; } }, ], //設定排序 "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); });