SrilekhaRamesh Posted October 5, 2023 Share Posted October 5, 2023 Dear Team, I had created page for approval process for submitted data. The submitted data will display for the approver on bellow table In this table the approver will verify the submitted data by clicking approve button. Once he clicked the button , the popup will be display the data based on the "Approved for" category. Modal code is <div class="modal fade" id="Id01" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-xl"> <form method="post" action="" > <div class="modal-content"> <div class="modal-header"> <div class="row" style="width:100%"> <div class="col-md-6"> <label>Dealer Name</label> <input type="text" name="dealername" class="dealername form-control" id="dealername" value="" style="width:100%" readonly/> </div> <div class="col-md-2" hidden> <label>Dealer ID</label> <input type="text" name="dealerid" class="dealerid form-control" id="dealerid" value="" style="width: 100%" readonly/> </div> <div class="col-md-3"> <label>Month</label> <input type="text" name="month" class="month form-control" id="month" value="" style="width: 100%" readonly/> </div> <div class="col-md-3"> <label>Approval for</label> <input type="text" name="approvalfor" class="approvalfor form-control" id="approvalfor" value="" style="width:100%" readonly/> </div> </div> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="tbl_fixed1"> <table cellpadding="0" cellspacing="0" border="0" id="Approval_View_Table" > <thead> </thead> <tbody> </tbody> </table> </div> </div> <div class="mb-1" style="margin-right:15px;margin-left:15px" > <label for="message-text" class="control-label">Remarks:</label> <textarea type="text" rows="2" class="form-control" required name="Remarks" value="" placeholder="Enter Remarks if any" ></textarea> </div> <div class="modal-footer"> <div class="d-grid gap-2 mx-auto d-md-block"> <button type="submit" name="Approve" id="Approve" class="btn btn-success btn-sm" style="box-shadow: 5px 5px 5px #839192" value="Approve" >APPROVE </button> <button type="submit" name="Return" id="Return" class="btn btn-danger btn-sm" value="Return" style="box-shadow: 5px 5px 5px #839192; margin-left: 15px" onclick="getLastYearData()">RETURN </button> </div> </div> </div> </form> </div> </div> Like above modal, the table header and data will append using below script. <script> // for get the data function Approve(field, id, month) { if (field == 'TIV') { $.ajax({ type: 'get', dataType: 'JSON', url: 'TIV_View.php', data: 'Month=' + month + '&dealerid=' + id, success: function (response) { var len = response.length; $("#Approval_View_Table tbody").empty(); $("#Approval_View_Table thead").empty(); var tr_hdr = "<tr>" + "<th align='center' style='width:5%'>S.No</th>" + "<th align='center' style='width:13.57%'>District</th>" + "<th align='center' style='width:13.57%' onclick='sortTable(0)'>Categoey</th>" + "<th align='center' style='width:13.57%' onclick='sortTable(1)'>Brand</th>" + "<th align='center' style='width:13.57%' onclick='sortTable(2)'>Sub Category</th>" + "<th align='center' style='width:13.57%' onclick='sortTable(3)'>Model</th>" + "<th align='center' style='width:12.14%'>Quantity</th>" + "<th align='center' style='width:15%'>Average Selling Price</th>" + "</tr>"; for (var i = 0; i < len; i++) { var Brand = response[i].Brand; var Category = response[i].Category; var Sub_Category = response[i].Sub_Category; var Model = response[i].Model; var Quantity = response[i].Quantity; var ASP = response[i].ASP; var District = response[i].District; var Dealer_Name = response[i].Dealer_Name; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td >" + District + "</td>" + "<td>" + Category + "</td>" + "<td>" + Brand + "</td>" + "<td>" + Sub_Category + "</td>" + "<td>" + Model + "</td>" + "<td align='center'>" + Quantity + "</td>" + "<td align='center'>" + ASP + "</td>" + "</tr>"; $("#Approval_View_Table tbody").append(tr_str); document.getElementById("approvalfor").value = 'TIV Sales Data'; document.getElementById("month").value = month; document.getElementById("dealerid").value = id; document.getElementById("dealername").value = Dealer_Name; } $("#Approval_View_Table thead").append(tr_hdr); $('#Id01').modal('show'); } }); }else if (field == 'Marketingpromotion') { $.ajax({ type: 'get', dataType: 'JSON', url: 'Marketing_View.php', data: 'Month=' + month + '&dealerid=' + id, success: function (response) { var len = response.length; $("#Approval_View_Table tbody").empty(); $("#Approval_View_Table thead").empty(); var tr_hdr = "<tr>" + "<th align='center' style='width:5%'>S.No</th>" + "<th align='center' style='width:10%'>Department</th>" + "<th align='center' style='width:10%'>Categoey</th>" + "<th align='center' style='width:5%'>Activity</th>" + "<th align='center' style='width:5%'>Product Category</th>" + "<th align='center' style='width:7%'>Date</th>" + "<th align='center' style='width:11%'>Customers Foot Falls</th>" + "<th align='center' style='width:10%'>No.of.Enquiries</th>" + "<th align='center' style='width:5%'>No.of.Order</th>" + "<th align='center' style='width:5%'>Total Budget in LKS</th>" + "<th align='center' style='width:7%'>Total Spent in LKS</th>" + "<th align='center' style='width:7%'>Remarks</th>" + "<th align='center' style='width:7%'>Attachment</th>" + "<th align='center' style='width:7%'>Reference No</th>" + "</tr>"; for (var i = 0; i < len; i++) { var Department = response[i].department; var Category = response[i].Category; var Activity = response[i].Activity; var Product_category = response[i].Product_category; var Date = response[i].Date; var Customersfootfalls = response[i].Customersfootfalls; var No_of_Enquiries = response[i].No_of_Enquiries; var No_of_Orders = response[i].No_of_Orders; var Total_budget_lacs = response[i].Total_budget_lacs; var Total_spent_lacs = response[i].Total_spent_lacs; var Remarks = response[i].Remarks; var Month = response[i].Month; var dealerid = response[i].dealerid; var Attachment = response[i].Attachment; var Directory = response[i].Directory; var Referencenumber = response[i].Referencenumber; var Dealer_Name = response[i].Dealer_Name; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td>" + Department + "</td>" + "<td>" + Category + "</td>" + "<td>" + Activity + "</td>" + "<td align='center'>" + Product_category + "</td>" + "<td align='center'>" + Date + "</td>" + "<td align='center'>" + Customersfootfalls + "</td>" + "<td align='center'>" + No_of_Enquiries + "</td>" + "<td align='center'>" + No_of_Orders + "</td>" + "<td align='center'>" + Total_budget_lacs + "</td>" + "<td align='center'>" + Total_spent_lacs + "</td>" + "<td align='center'>" + Remarks + "</td>" + '<td><a class="link" href="' + Directory + Attachment + '" target="_blank"> ' + Attachment + ' </a></td>' + "<td align='center'>" + Referencenumber + "</td>" + "</tr>"; $("#Approval_View_Table tbody").append(tr_str); document.getElementById("approvalfor").value = 'Marketing & Promotion Data'; document.getElementById("month").value = month; document.getElementById("dealerid").value = id; document.getElementById("dealername").value = Dealer_Name; } $("#Approval_View_Table thead").append(tr_hdr); $('#Id01').modal('show'); } }); }else if (field == 'Revenue') { $.ajax({ type: 'get', dataType: 'JSON', url: 'Revenue_View.php', data: 'Month=' + month + '&dealerid=' + id, success: function (response) { var len = response.length; $("#Approval_View_Table tbody").empty(); $("#Approval_View_Table thead").empty(); var tr_hdr = "<tr>" + "<th align='center' style='width:5%'>S.No</th>" + "<th align='center' style='width:10%'>Department</th>" + "<th align='center' style='width:35%'>Description</th>" + "<th align='center' style='width:10%'>Excavator</th>" + "<th align='center' style='width:10%'>Grader Category</th>" + "<th align='center' style='width:10%'>WheelLoader</th>" + "<th align='center' style='width:10%'>SLM</th>" + "<th align='center' style='width:10%'>Total Revenue</th>" + "</tr>"; for (var i = 0; i < len; i++) { var Department = response[i].Department; var Description = response[i].Description; var ExcavatorTarget = response[i].ExcavatorTarget; var ExcavatorActual = response[i].ExcavatorActual; var GraderTarget = response[i].GraderTarget; var GraderActual = response[i].GraderActual; var WheelLoaderTarget = response[i].WheelLoaderTarget; var WheelLoaderActual = response[i].WheelLoaderActual; var SLMTarget = response[i].SLMTarget; var SLMActual = response[i].SLMActual; var CompactorTarget = response[i].CompactorTarget; var CompactorActual = response[i].CompactorActual; var RevenueTarget = response[i].RevenueTarget; var RevenueActual = response[i].RevenueActual; var Dealer_Name = response[i].Dealer_Name; var Margin = response[i].Margin; var Month = response[i].Month; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td align='center'>" + Department + "</td>" + "<td >" + Description + "</td>" + "<td align='center'>" + ExcavatorActual + "</td>" + "<td align='center'>" + GraderActual + "</td>" + "<td align='center'>" + WheelLoaderActual + "</td>" + "<td align='center'>" + SLMActual + "</td>" + "<td align='center'>" + RevenueActual + "</td>" + "</tr>"; $("#Approval_View_Table tbody").append(tr_str); document.getElementById("approvalfor").value = 'After Sales Revenue Data'; document.getElementById("month").value = month; document.getElementById("dealerid").value = id; document.getElementById("dealername").value = Dealer_Name; } $("#Approval_View_Table thead").append(tr_hdr); $('#Id01').modal('show'); } }); }else if (field == 'Equipementpopulation') { $.ajax({ type: 'get', dataType: 'JSON', url: 'Equipment_population_view.php', data: 'Month=' + month + '&dealerid=' + id, success: function (response) { var len = response.length; $("#Approval_View_Table tbody").empty(); $("#Approval_View_Table thead").empty(); var tr_hdr = "<tr>" + "<th align='center' style='width:10%'>S.No</th>" + "<th align='center' style='width:18%'>Category</th>" + "<th align='center' style='width:18%'>Warranty</th>" + "<th align='center' style='width:18%'>Non-Warranty</th>" + "<th align='center' style='width:18%'>No Of Machine Comissioned</th>" + "<th align='center' style='width:10%'>Total</th>" + "</tr>"; for (var i = 0; i < len; i++) { var Category = response[i].Category; var Warranty = response[i].Warranty; var Non_Warranty = response[i].Non_Warranty; var Machine_Comission = response[i].Machine_Comission; var Total = response[i].Total; var Dealer_Name = response[i].Dealer_Name; var EQ_Population_ID = response[i].EQ_Population_ID; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td >" + Category + "</td>" + "<td align='center'>" + Warranty + "</td>" + "<td align='center'>" + Non_Warranty + "</td>" + "<td align='center'>" + Machine_Comission + "</td>" + "<td align='center'>" + Total + "</td>" + "</tr>"; $("#Approval_View_Table tbody").append(tr_str); document.getElementById("approvalfor").value = 'Equipment Population Data'; document.getElementById("month").value = month; document.getElementById("dealerid").value = id; document.getElementById("dealername").value = Dealer_Name; } $("#Approval_View_Table thead").append(tr_hdr); $('#Id01').modal('show'); } }); }else if (field == 'Employeeexpense') { $.ajax({ type: 'get', dataType: 'JSON', url: 'Employee_Expense_View.php', data: 'Month=' + month + '&dealerid=' + id, success: function (response) { var len = response.length; $("#Approval_View_Table tbody").empty(); $("#Approval_View_Table thead").empty(); var tr_hdr = "<tr>" + "<th align='center' style='width:5%'>S.No</th>" + "<th align='center' style='width:18%'>Employee Name</th>" + "<th align='center' style='width:7%'>Department</th>" + "<th align='center' style='width:7%'>Salary</th>" + "<th align='center' style='width:7%'>TA&DA</th>" + "<th align='center' style='width:7%'>Mobile Exp</th>" + "<th align='center' style='width:7%'>Medical</th>" + "<th align='center' style='width:7%'>LTA</th>" + "<th align='center' style='width:7%'>PF</th>" + "<th align='center' style='width:7%'>ESI</th>" + "<th align='center' style='width:7%'>Incentive</th>" + "<th align='center' style='width:7%'>Others</th>" + "<th align='center' style='width:7%'>Total</th>" + "</tr>"; for (var i = 0; i < len; i++) { var EmployeeName = response[i].EmployeeName; var Department = response[i].Department; var Salary = response[i].Salary; var TaandDa = response[i].TaandDa; var MobileExp = response[i].MobileExp; var MedicalReimbursement = response[i].MedicalReimbursement; var LeaveTravelAssistance = response[i].LeaveTravelAssistance; var ProvidendFund = response[i].ProvidendFund; var ESI = response[i].ESI; var Incentive = response[i].Incentive; var Others = response[i].Others; var Total = response[i].Total; var Dealer_Name = response[i].DealerName; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td>" + EmployeeName + "</td>" + "<td align='center'>" + Department + "</td>" + "<td align='center'>" + Salary + "</td>" + "<td align='center'>" + TaandDa + "</td>" + "<td align='center'>" + MobileExp + "</td>" + "<td align='center'>" + MedicalReimbursement + "</td>" + "<td align='center'>" + LeaveTravelAssistance + "</td>" + "<td align='center'>" + ProvidendFund + "</td>" + "<td align='center'>" + ESI + "</td>" + "<td align='center'>" + Incentive + "</td>" + "<td align='center'>" + Others + "</td>" + "<td align='center'>" + Total + "</td>" + "</tr>"; $("#Approval_View_Table tbody").append(tr_str); document.getElementById("approvalfor").value = 'Employee Expense Data'; document.getElementById("month").value = month; document.getElementById("dealerid").value = id; document.getElementById("dealername").value = Dealer_Name; } $("#Approval_View_Table thead").append(tr_hdr); $('#Id01').modal('show'); } }); }else if (field == 'Infrastructureexpense') { $.ajax({ type: 'get', dataType: 'JSON', url: 'Infrastructure_Expense_view.php', data: 'Month=' + month + '&dealerid=' + id, success: function (response) { var len = response.length; $("#Approval_View_Table tbody").empty(); $("#Approval_View_Table thead").empty(); var tr_hdr = "<tr>" + "<th align='center' style='width:5%'>S.No</th>" + "<th align='center' style='width:15%'>Office Name</th>" + "<th align='center' style='width:8.9%'>Rent</th>" + "<th align='center' style='width:8.9%'>Maintenance</th>" + "<th align='center' style='width:8.9%'>Electricity</th>" + "<th align='center' style='width:8.9%'>Land line</th>" + "<th align='center' style='width:8.9%'>Courier / Postage</th>" + "<th align='center' style='width:8.9%'>Stationary</th>" + "<th align='center' style='width:8.9%'>Welfare</th>" + "<th align='center' style='width:8.9%'>Vehicle Running / Maintenance</th>" + "<th align='center' style='width:8.8%'>Total</th>" + "</tr>"; for (var i = 0; i < len; i++) { var Officename = response[i].Officename; var Rent = response[i].Rent; var Maintenance = response[i].Maintenance; var Electricity = response[i].Electricity; var Landlinetelephone = response[i].Landlinetelephone; var Courierorpostage = response[i].Courierorpostage; var Stationary = response[i].Stationary; var Welfare = response[i].Welfare; var Vehicle_Running_maintenance = response[i].Vehicle_Running_maintenance; var Total = response[i].Total; var Dealer_Name = response[i].Dealer_Name; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td>" + Officename + "</td>" + "<td align='center'>" + Rent + "</td>" + "<td align='center'>" + Maintenance + "</td>" + "<td align='center'>" + Electricity + "</td>" + "<td align='center'>" + Landlinetelephone + "</td>" + "<td align='center'>" + Courierorpostage + "</td>" + "<td align='center'>" + Stationary + "</td>" + "<td align='center'>" + Welfare + "</td>" + "<td align='center'>" + Vehicle_Running_maintenance + "</td>" + "<td align='center'>" + Total + "</td>" + "</tr>"; $("#Approval_View_Table tbody").append(tr_str); document.getElementById("approvalfor").value = 'Infrastructure Expense Data'; document.getElementById("month").value = month; document.getElementById("dealerid").value = id; document.getElementById("dealername").value = Dealer_Name; } $("#Approval_View_Table thead").append(tr_hdr); $('#Id01').modal('show'); } }); }else if (field == 'Otherexpense') { $.ajax({ type: 'get', dataType: 'JSON', url: 'Other_Expense_view.php', data: 'Month=' + month + '&dealerid=' + id, success: function (response) { var len = response.length; for (var i = 0; i < len; i++) { var costofbankguarantee = response[i].costofbankguarantee; var paidpartsandlubsinventorycarryingcost = response[i].paidpartsandlubsinventorycarryingcost; var marketingevents = response[i].marketingevents; var discounttocustomer = response[i].discounttocustomer; var LegalandTaxationExpense = response[i].LegalandTaxationExpense; var Total = response[i].Total; var Dealer_Name = response[i].Dealer_Name; document.getElementById("approvalfor1").value = 'Other Expense Data'; document.getElementById("month1").value = month; document.getElementById("dealerid1").value = id; document.getElementById("dealername1").value = Dealer_Name; document.getElementById("costofbankguarantee").value = costofbankguarantee; document.getElementById("paidpartsandlubsinventorycarryingcost").value = paidpartsandlubsinventorycarryingcost; document.getElementById("marketingevents").value = marketingevents; document.getElementById("discounttocustomer").value = discounttocustomer; document.getElementById("LegalandTaxationExpense").value = LegalandTaxationExpense; document.getElementById("Total").value = Total; } $('#Id02').modal('show'); } }); } } </script> All the tables are working properly. I want to short all the table column. Can any one please help me how to do that. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted October 5, 2023 Share Posted October 5, 2023 What is 'shorting'? Quote Link to comment Share on other sites More sharing options...
requinix Posted October 5, 2023 Share Posted October 5, 2023 ...you mean sorting? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.