Jump to content

Table column shorting

SrilekhaRamesh

By SrilekhaRamesh
in PHP Coding Help

 Share

Recommended Posts

SrilekhaRamesh Newbie

SrilekhaRamesh

Posted
Posted

Dear Team,

I had created page for approval process for submitted data. The submitted data will display for the approver on bellow table 

image.thumb.png.e2a7d5a9e181e2d3e030366353f273fb.png

 

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>

image.thumb.png.695d84b299b597272e0f2bca5309bc53.png

image.thumb.png.f02b4922440a3becb6d80ad62a410ff0.png

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.