This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

691 lines
25 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}">
  4. <style>
  5. </style>
  6. </head>
  7. <body>
  8. <div class="wrapper">
  9. <!-- Header -->
  10. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  11. <div class="page-wrap">
  12. <!-- Left Menu -->
  13. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  14. <div class="main-content">
  15. <div class="container-fluid">
  16. <div class="page-header">
  17. <div class="row align-items-end">
  18. <div class="col-lg-8">
  19. <div class="page-header-title">
  20. <i class="fas fa-user-graduate bg-blue"></i>
  21. <div class="d-inline">
  22. <h5>Assign Agents</h5>
  23. <span>1913 Assign agents for Campaign</span>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="col-lg-4">
  28. <nav class="breadcrumb-container" aria-label="breadcrumb">
  29. <ol class="breadcrumb">
  30. <li class="breadcrumb-item">
  31. <a href="/index"><i class="ik ik-home"></i></a>
  32. </li>
  33. <li class="breadcrumb-item">1913 Campaign</li>
  34. <li class="breadcrumb-item active" aria-current="page">Assign Agents</li>
  35. </ol>
  36. </nav>
  37. </div>
  38. </div>
  39. </div>
  40. <hr>
  41. <!-- Card for Agent Assignment -->
  42. <div class="card">
  43. <div class="card-header">
  44. <h3>Agent Assign</h3>
  45. </div>
  46. <div class="card-body">
  47. <!-- Dropdown for Category -->
  48. <div class="row">
  49. <div class="form-group col-md-6 col-sm-12">
  50. <label for="category">Category</label>
  51. <select id="category" class="form-control">
  52. </select>
  53. </div>
  54. <!-- Dropdown for Campaigns -->
  55. <div class="form-group col-md-6 col-sm-12">
  56. <label for="campaign">Campaign</label>
  57. <select id="campaign" class="form-control" disabled>
  58. </select>
  59. </div>
  60. <div class="form-group col-12 d-flex justify-content-center align-items-center">
  61. <!-- Centered button between the dropdowns -->
  62. <button id="searchBtn" class="btn btn-primary">Search</button>
  63. <button id="resetBtn" class="btn btn-secondary ml-3">Reset</button>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <!-- Card for Campaign Details -->
  69. <div class="card mt-3" id="campaignDetailsCard" style="display:none;">
  70. <div class="card-header">
  71. <h3>Campaign Details</h3>
  72. </div>
  73. <div class="card-body">
  74. <table class="table table-bordered">
  75. <tbody>
  76. <tr>
  77. <th >Name</th>
  78. <td class="fw-semibold" id="campaignName" style="padding: 0.45rem 0.45rem;"></td>
  79. </tr>
  80. <tr>
  81. <th>From Date</th>
  82. <td class="fw-semibold" id="campaignStartdate" style="padding: 0.45rem 0.45rem;"></td>
  83. </tr>
  84. <tr>
  85. <th>To Date</th>
  86. <td class="fw-semibold" id="campaignEnddate" style="padding: 0.45rem 0.45rem;"></td>
  87. </tr>
  88. <tr>
  89. <th>Agents Assigned</th>
  90. <td class="fw-semibold" id="campaignAgents" style="padding: 0.45rem 0.45rem;"></td>
  91. </tr>
  92. <tr>
  93. <th>Calls Assigned (per person)</th>
  94. <td class="fw-semibold" id="campaignCalls" style="padding: 0.45rem 0.45rem;"></td>
  95. </tr>
  96. <tr>
  97. <th>Description</th>
  98. <td class="fw-semibold" id="campaignDesc" style="padding: 0.45rem 0.45rem;"></td>
  99. </tr>
  100. </tbody>
  101. </table>
  102. </div>
  103. </div>
  104. <div class="row" id="editagentCard" style="display:none;">
  105. <div class="col-md-12">
  106. <div class="card">
  107. <div class="card-block">
  108. <div class="page-header-title" >
  109. <h5 style="margin: 0;font-weight: bold;">Selected Agent List</h5><hr>
  110. </div>
  111. <table id="editagentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
  112. <thead class="thead-dark">
  113. <tr role="row">
  114. <th class="text-center no-sort" width="1%">S.No</th>
  115. <th class="text-center">Agent Id</th>
  116. <th class="text-center">Name of Agents</th>
  117. <th class="text-center">Select/Not Selected</th>
  118. </tr>
  119. </thead>
  120. <tbody id="editagentList" style="text-align:center;">
  121. <!-- Rows will be dynamically inserted here -->
  122. </tbody>
  123. </table>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="row" id="agentCard" style="display:none;">
  129. <div class="col-md-12">
  130. <div class="card">
  131. <div class="card-block">
  132. <div class="page-header-title" >
  133. <h5 style="margin: 0;font-weight: bold;">Overall Agent List</h5><hr>
  134. </div>
  135. <div class=" d-flex justify-content-end mb-2">
  136. <button class="btn btn-primary" id="selectedCount"><i class="ik ik-user-plus f-16 mr-2"></i>0</button>
  137. <!-- <button class="btn btn-warning ml-2" id="editAgentsBtn"><i class="ik ik-edit f-16 mr-2"></i>Edit</button> -->
  138. </div>
  139. <table id="agentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
  140. <thead class="thead-dark">
  141. <tr role="row">
  142. <th class="text-center no-sort" width="1%">S.No</th>
  143. <th class="text-center">Agent Id</th>
  144. <th class="text-center">Name of Agents</th>
  145. <th class="text-center"><input type="checkbox" id="selectAllAgents"> Select All</th>
  146. </tr>
  147. </thead>
  148. <tbody id="agentList" style="text-align:center;">
  149. <!-- Rows will be dynamically inserted here -->
  150. </tbody>
  151. </table>
  152. <!-- Center the Submit button -->
  153. <div class="text-center">
  154. <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  163. </div>
  164. </div>
  165. <!-- Include jQuery and Bootstrap JavaScript -->
  166. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  167. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  168. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  169. <!-- sweet alert -->
  170. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  171. <script type="text/javascript">
  172. // Fetch category dropdown on page load
  173. fetchCategoryDropdown();
  174. // Handle category change event to fetch campaigns
  175. $(document).on('change', '#category', function() {
  176. let selectedCategoryId = $(this).val();
  177. if (selectedCategoryId != '0') {
  178. fetchCampaignDropdown(selectedCategoryId);
  179. } else {
  180. $('#campaign').empty().prop('disabled', true);
  181. }
  182. });
  183. $("#searchBtn").click(function () {
  184. let selectedCampaignId = $('#campaign').val();
  185. if(selectedCampaignId == null || selectedCampaignId=='0'){
  186. Swal.fire({
  187. title: 'Info!',
  188. text: 'Please Select Category and Campaign!',
  189. icon: 'info',
  190. timer: 2000,
  191. //timerProgressBar: true,
  192. showConfirmButton: false
  193. })
  194. hideCampaignAndAgentDetails();
  195. }
  196. else if (selectedCampaignId != '0') {
  197. fetchCampaignDetails(selectedCampaignId);
  198. checkCampaignInAssigned(selectedCampaignId);
  199. // Disable the category and campaign dropdowns after search
  200. $('#category').prop('disabled', true);
  201. $('#campaign').prop('disabled', true);
  202. }
  203. else {
  204. hideCampaignAndAgentDetails();
  205. }
  206. });
  207. //Approve button click event
  208. $("#submitBtn").click(function () {
  209. handleSubmit();
  210. });
  211. $("#resetBtn").click(function () {
  212. location.reload(); // Reloads the current page
  213. });
  214. // Initial binding for checkbox events
  215. bindCheckboxEvents();
  216. // Function to fetch category dropdown
  217. function fetchCategoryDropdown() {
  218. $.ajax({
  219. url: '/gcc/api/callcenter/admin/getcategory',
  220. type: 'GET',
  221. dataType: 'json'
  222. })
  223. .done(function (data) {
  224. let categoryDropdown = $('#category');
  225. categoryDropdown.empty();
  226. categoryDropdown.append($('<option selected value="0"></option>').text('Select a category'));
  227. $.each(data, function (index, category) {
  228. categoryDropdown.append($('<option></option>').attr('value', category.category_id).text(category.category_name));
  229. });
  230. })
  231. .fail(function (xhr, status, error) {
  232. console.error('Error fetching category:', error);
  233. });
  234. }
  235. // Function to fetch campaigns based on selected category
  236. function fetchCampaignDropdown(categoryId) {
  237. $('#campaign').prop('disabled', false);
  238. $.ajax({
  239. url: '/gcc/api/callcenter/admin/getcampaignbycategory?id=' + categoryId,
  240. type: 'GET',
  241. dataType: 'json'
  242. })
  243. .done(function (data) {
  244. let campaignDropdown = $('#campaign');
  245. campaignDropdown.empty();
  246. campaignDropdown.append($('<option selected value="0"></option>').text('Select a campaign'));
  247. $.each(data, function (index, campaign) {
  248. campaignDropdown.append($('<option></option>').attr('value', campaign.campaign_id).text(campaign.campaign_name));
  249. });
  250. })
  251. .fail(function (xhr, status, error) {
  252. console.error('Error fetching campaign:', error);
  253. });
  254. }
  255. // Function to fetch campaign details
  256. function fetchCampaignDetails(campaignId) {
  257. $.ajax({
  258. url: '/gcc/api/callcenter/admin/getcampaignbyid?id=' + campaignId,
  259. method: 'GET',
  260. dataType: 'json',
  261. success: function (response) {
  262. if (response.length === 0) {
  263. console.error("No campaign details found.");
  264. return;
  265. }
  266. document.getElementById("campaignName").innerHTML = response[0].campaign_name;
  267. document.getElementById("campaignStartdate").innerHTML = response[0].start_date;
  268. document.getElementById("campaignEnddate").innerHTML = response[0].end_date;
  269. document.getElementById("campaignAgents").innerHTML = response[0].no_of_agents;
  270. document.getElementById("campaignCalls").innerHTML = response[0].calls_per_agent;
  271. document.getElementById("campaignDesc").innerHTML = response[0].description;
  272. // Show the campaign details card
  273. document.getElementById('campaignDetailsCard').style.display = 'block';
  274. },
  275. error: function () {
  276. console.error("An error occurred while fetching campaign details.");
  277. }
  278. });
  279. }
  280. // Function to check if campaign is already assigned and fetch agents
  281. function checkCampaignInAssigned(selectedCampaignId) {
  282. $.ajax({
  283. url: '/gcc/api/callcenter/admin/getassignedcampaign?id=' + selectedCampaignId,
  284. type: 'GET',
  285. dataType: 'json',
  286. success: function(response) {
  287. //console.log('checkCampaignInAssigned response:', response);
  288. fetchAgentsForCampaign(selectedCampaignId); // Always fetch agents
  289. if (response.length > 0) {
  290. populateEditAgentList(response);
  291. document.getElementById('editagentCard').style.display = 'block';
  292. initializeEditAgentsDataTable();
  293. }
  294. else{
  295. document.getElementById('editagentCard').style.display = 'none';
  296. }
  297. },
  298. error: function(xhr, status, error) {
  299. console.error('Error fetching assigned agents:', error);
  300. }
  301. });
  302. }
  303. // Function to populate the edit agent list
  304. function populateEditAgentList(agents) {
  305. let editagentList = $('#editagentList');
  306. editagentList.empty();
  307. $.each(agents, function(index, agent) {
  308. let row = `
  309. <tr data-assigned-id="${agent.assigned_id}">
  310. <td>${index + 1}</td>
  311. <td>${agent.agent_id}</td>
  312. <td>${agent.agent_name}</td>
  313. <td>
  314. <button class="btn btn-warning" onclick="editagent(${agent.assigned_id})">Remove</button>
  315. </td>
  316. </tr>
  317. `;
  318. // Log the row HTML to debug
  319. // console.log('Appending row:', row);
  320. editagentList.append(row);
  321. });
  322. }
  323. function editagent(assignedId) {
  324. $.ajax({
  325. url: '/gcc/api/callcenter/admin/deleteassignedbyid?id=' + assignedId,
  326. type: 'GET',
  327. dataType: 'json',
  328. success: function(response) {
  329. $('tr[data-assigned-id="' + assignedId + '"]').remove();
  330. Swal.fire({
  331. title: 'Success!',
  332. text: 'Agents have been removed!',
  333. icon: 'success',
  334. timer: 2000,
  335. //timerProgressBar: true,
  336. showConfirmButton: false
  337. })
  338. },
  339. error: function(xhr, status, error) {
  340. console.error('Error removing agents:', error);
  341. reject(error); // Reject the promise in case of an error
  342. }
  343. });
  344. }
  345. // Function to fetch agents for the selected campaign
  346. function fetchAgentsForCampaign(campaignId) {
  347. $.ajax({
  348. url: '/gcc/api/callcenter/admin/getagentsfortask?id=' +campaignId,
  349. type: 'GET',
  350. dataType: 'json',
  351. success: function(response) {
  352. let agentList = $('#agentList');
  353. agentList.empty();
  354. if (response.length > 0) {
  355. $.each(response, function(index, agent) {
  356. let row = `
  357. <tr>
  358. <td>${index + 1}</td>
  359. <td>${agent.agent_id}</td>
  360. <td>${agent.agent_name}</td>
  361. <td><input type="checkbox" class="agentCheckbox" value="${agent.agent_id}"></td>
  362. </tr>
  363. `;
  364. agentList.append(row);
  365. });
  366. document.getElementById('agentCard').style.display = 'block';
  367. initializeAgentsDataTable();
  368. } else {
  369. agentList.append('<tr><td colspan="4">No agents available</td></tr>');
  370. }
  371. bindCheckboxEvents(); // Rebind checkbox events after adding new checkboxes
  372. },
  373. error: function(xhr, status, error) {
  374. console.error('Error fetching agents:', error);
  375. }
  376. });
  377. }
  378. // Function to hide campaign and agent details
  379. function hideCampaignAndAgentDetails() {
  380. document.getElementById('campaignDetailsCard').style.display = 'none';
  381. document.getElementById('agentCard').style.display = 'none';
  382. document.getElementById('editagentCard').style.display = 'none';
  383. }
  384. // Function to bind checkbox events and handle "Select All" functionality
  385. function bindCheckboxEvents() {
  386. $('#selectAllAgents').on('click', function() {
  387. let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10);
  388. let totalCheckboxes = $('.agentCheckbox').length;
  389. if ($(this).is(':checked')) {
  390. if (campaignAgentsCount > totalCheckboxes) {
  391. Swal.fire({
  392. title: 'Sorry!',
  393. text: 'You cannot select more checkboxes than available.',
  394. icon: 'error',
  395. timer: 2000
  396. }).then(() => {
  397. $('#selectAllAgents').prop('checked', false);
  398. });
  399. } else {
  400. let checkboxes = $('.agentCheckbox');
  401. checkboxes.prop('checked', false);
  402. for (let i = 0; i < campaignAgentsCount; i++) {
  403. if (checkboxes[i]) {
  404. $(checkboxes[i]).prop('checked', true);
  405. }
  406. }
  407. }
  408. } else {
  409. $('.agentCheckbox').prop('checked', false);
  410. }
  411. updateSelectedCount();
  412. });
  413. $(document).on('change', '.agentCheckbox', function () {
  414. if ($('.agentCheckbox:checked').length === $('.agentCheckbox').length) {
  415. $('#selectAllAgents').prop('checked', true);
  416. } else {
  417. $('#selectAllAgents').prop('checked', false);
  418. }
  419. updateSelectedCount();
  420. });
  421. }
  422. // Function to update the selected count
  423. function updateSelectedCount() {
  424. let selectedCount = $('.agentCheckbox:checked').length;
  425. $('#selectedCount').html('<i class="ik ik-user-plus f-16 mr-2"></i>' + selectedCount);
  426. }
  427. // Function to handle form submission and assign agents
  428. function handleSubmit() {
  429. let selectedCategoryId = $('#category').val();
  430. let selectedCampaignId = $('#campaign').val();
  431. let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10); // Get the required agent count
  432. let assignedAgentCount = $('#editagentList tr').length; // Count already assigned agents
  433. // Ensure category and campaign are selected
  434. if (selectedCategoryId == 0 || selectedCampaignId == 0) {
  435. Swal.fire({
  436. title: 'Info!',
  437. text: 'Please select a category and campaign before proceeding.',
  438. icon: 'info',
  439. timer: 2000,
  440. timerProgressBar: true
  441. });
  442. return;
  443. }
  444. let selectedAgentsCount = $(".agentCheckbox:checked").length; // Count of selected checkboxes
  445. // Total agent count (new selections + already assigned)
  446. let totalSelectedCount = selectedAgentsCount + assignedAgentCount;
  447. // Validation: Check if total selected count matches the campaignAgentsCount
  448. if (totalSelectedCount < campaignAgentsCount) {
  449. Swal.fire({
  450. title: 'Error!',
  451. text: `You need to select ${campaignAgentsCount - totalSelectedCount} more agents to meet the required count.`,
  452. icon: 'error',
  453. timer: 3000,
  454. timerProgressBar: true
  455. });
  456. return;
  457. } else if (totalSelectedCount > campaignAgentsCount) {
  458. Swal.fire({
  459. title: 'Error!',
  460. text: `You have selected more agents than allowed. Please reduce the number of selected agents.`,
  461. icon: 'error',
  462. timer: 3000,
  463. timerProgressBar: true
  464. });
  465. return;
  466. }
  467. let requestData = [];
  468. $(".agentCheckbox:checked").each(function () {
  469. requestData.push({
  470. categoryId: parseInt(selectedCategoryId),
  471. campaignId: parseInt(selectedCampaignId),
  472. agentId: parseInt($(this).val())
  473. });
  474. });
  475. if (requestData.length === 0) {
  476. Swal.fire({
  477. title: 'Info!',
  478. text: 'Please select at least one agent to assign.',
  479. icon: 'info',
  480. timer: 3000,
  481. timerProgressBar: true
  482. });
  483. return;
  484. }
  485. // AJAX request to submit the data
  486. $.ajax({
  487. url: "/gcc/api/callcenter/admin/addagentsfortask",
  488. type: "POST",
  489. contentType: "application/json",
  490. data: JSON.stringify(requestData),
  491. success: function (response) {
  492. Swal.fire({
  493. title: 'Success!',
  494. text: 'Agents have been successfully assigned!',
  495. icon: 'success',
  496. timer: 2000,
  497. timerProgressBar: true,
  498. showConfirmButton: false
  499. }).then(() => {
  500. location.reload(); // Reload after success
  501. });
  502. },
  503. error: function (xhr, status, error) {
  504. Swal.fire({
  505. title: 'Error!',
  506. text: 'There was an error while assigning agents.',
  507. icon: 'error',
  508. timer: 3000,
  509. timerProgressBar: true
  510. });
  511. }
  512. });
  513. }
  514. //Initialize the first table: agentsDatatable
  515. function initializeAgentsDataTable() {
  516. if (!$.fn.DataTable.isDataTable('#agentsDatatable')) {
  517. $('#agentsDatatable').DataTable({
  518. dom: 'Bftip',
  519. columnDefs: [{ targets: 'no-sort', orderable: false }],
  520. lengthMenu: [
  521. [50, 100, 200, 500, -1],
  522. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  523. ],
  524. scrollY: '30vh',
  525. fixedColumns: { left: 1, right: 1 },
  526. buttons: [
  527. { extend: 'pageLength', className: 'btn btn-warning' },
  528. { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  529. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  530. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  531. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  532. ],
  533. fixedHeader: true,
  534. autoWidth: true,
  535. responsive: true,
  536. searching: true,
  537. select: false,
  538. processing: false
  539. });
  540. } else {
  541. $('#agentsDatatable').DataTable().clear().draw();
  542. }
  543. }
  544. // Initialize the second table: editagentsDatatable
  545. function initializeEditAgentsDataTable() {
  546. if (!$.fn.DataTable.isDataTable('#editagentsDatatable')) {
  547. $('#editagentsDatatable').DataTable({
  548. dom: 'Bftip',
  549. columnDefs: [{ targets: 'no-sort', orderable: false }],
  550. lengthMenu: [
  551. [50, 100, 200, 500, -1],
  552. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  553. ],
  554. scrollY: '30vh',
  555. fixedColumns: { left: 1, right: 1 },
  556. buttons: [
  557. { extend: 'pageLength', className: 'btn btn-warning' },
  558. { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  559. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  560. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  561. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  562. ],
  563. fixedHeader: true,
  564. autoWidth: true,
  565. responsive: true,
  566. searching: true,
  567. select: false,
  568. processing: false
  569. });
  570. } else {
  571. $('#editagentsDatatable').DataTable().clear().draw();
  572. }
  573. }
  574. </script>
  575. </body>
  576. </html>