Click here to Skip to main content
15,669,133 members
Search within:


Sum not changing after apply filter. How to do this?
Please Sign up or sign in to vote.
0.00/5 (No votes)
<!DOCTYPE html>
<html lang="en"><head>
	<title>ENOVIC School Management System</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    	*{font-family:'Arial';}
	    body{width:auto; max-width:auto;margin:0 auto;font-size:12px;}
	    h2{font-size: 16px;font-weight: bold;}
	    .heading{font-size: 16px;font-weight: bold;}
	    .font-weight-bold{font-weight: bold;}
	    .font-120pc{font-size: 14px;}
	    .tw-50 {width: 50%;}
	    table.table-head th{font-size: 12px; font-weight: bold;text-align: right;}
	    table.table-head td{font-size: 14px;text-align: center;}

	    table.fancy-detail {  font-size:12px; border-collapse: collapse;  width:100%;  margin:0 auto;}
	    table.fancy-detail th{  background:#696969; color:#FFFFFF; border-bottom: 1px #2e2e2e solid;  padding: 0.5em;  padding-left:10px; vertical-align:top;text-align: left;}
	    table.fancy-detail td {padding: 0.5em;  padding-left:10px; border-bottom:1px solid #2e2e2e;text-align: left;}
	    table.fancy-detail caption {  margin-left: inherit;  margin-right: inherit;}
	    table.fancy-detail tr:hover{}

	    table.report-card {  font-size:12px; border-collapse: collapse;  width:100%;  margin:0 auto;}
	    table.report-card th{  background:#696969; color:#FFFFFF; border-bottom: 1px #2e2e2e solid;  padding: 0.5em;  padding-left:10px; vertical-align:top;text-align: left;}
	    table.report-card td {padding: 0.5em;  padding-left:10px; border:1px solid #2e2e2e;text-align: left;}
	    table.report-card caption {  margin-left: inherit;  margin-right: inherit;}
	    table.report-card tr:hover{}
	    table.no-border {width: 100%;}
	    table.no-border td {border:0px;}
	    .data {border-bottom: 1px solid black; font-weight: bold;}
	    .page-break {page-break-after: always;}
    </style>
</head>
<body>
    <div style=" border:1px dashed #696969;  margin-top: 10px;">
        <div style="padding:10px;background: #ffffff;">
        		          
		            


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @media  print {
            #mediaprintcustom {display:none}
        }
        table {
            border-collapse: collapse;
        }
        .bordercustom {
            border: thin solid grey;
        }

        thead tr {
            background: #DDD;
        }
        tbody tr.even {
            background: #EEE;
        }
        tbody tr.odd {
            background: #FFF;
        }
        th.dropdown-header > select {
            background: inherit;
            border: none;
            font-weight: bold;
            cursor: pointer;
        }
        th.dropdown-header > select:focus {
            outline: none;
        }
        table > thead th,
        table > thead th > select {
            font-family: Arial;
            font-size: 1em;
            vertical-align: middle;
            color:white;
        }
    </style>



<h2 style="text-align: center;">2020-2021</h2>
<!--<h2>Fee Payment Report Total 15 result found</h2>-->
<table id="myTable" class="table table-striped fancy-detail bordercustom">
    <thead>
    <tr>
        <th class="bordercustom">Receipt No</th>
        <th class="bordercustom">Adm No</th>
        <th class="bordercustom">Name</th>
        <th class="bordercustom">Division</th>
       <!-- <th class="bordercustom">Contact Number</th>-->
        <th class="bordercustom">Amount</th>
        <th class="bordercustom">Fee Installment</th>
        <th class="bordercustom">Date</th>
        <th class="bordercustom">Academic Session</th>
        <th class="bordercustom">Payment Method</th>
    </tr>
    <tr id="mediaprintcustom">
        <th class="bordercustom"></th>
        <th class="bordercustom"></th>
        <th class="bordercustom"></th>
        <th class="bordercustom dropdown-header" data-field-name="batch"><select multiple="multiple"><option value="all">All</option><option value="II A">II A</option><option value="IV C">IV C</option><option value="IV E">IV E</option><option value="VIII B">VIII B</option><option value="VIII C">VIII C</option><option value="VIII D">VIII D</option><option value="X B">X B</option><option value="XI B">XI B</option></select></th>
        <!--<th class="bordercustom">Contact Number</th>-->
        <th class="bordercustom"></th>
        <th class="bordercustom dropdown-header" data-field-name="term"><select multiple="multiple"><option value="all">All</option><option value="TERM- 1">TERM- 1</option><option value="TERM- 2">TERM- 2</option><option value="TERM- 3">TERM- 3</option><option value="TERM- 4">TERM- 4</option><option value="TERM-2">TERM-2</option><option value="TERM-3">TERM-3</option><option value="TERM-4">TERM-4</option></select></th>
        <th class="bordercustom dropdown-header" data-field-name="date"><select multiple="multiple"><option value="all">All</option><option value="2021-03-01 00:00:00">2021-03-01 00:00:00</option></select></th>
        <th class="bordercustom dropdown-header" data-field-name="academic_session"><select multiple="multiple"><option value="all">All</option><option value="-">-</option><option value="2019-2020">2019-2020</option><option value="2020-2021">2020-2021</option></select></th>
        <th class="bordercustom dropdown-header" data-field-name="payment"><select multiple="multiple"><option value="all">All</option><option value="CSB">CSB</option><option value="Cash">Cash</option><option value="Cheque">Cheque</option></select></th>
    </tr>
    </thead>
    <tbody>
            <tr class="row odd">
            <td class="bordercustom">20-21/12058</td>
            <td class="bordercustom">6742</td>
            <td class="bordercustom">NIKHIL  JAIS</td>
            <td class="bordercustom" data-field-name="batch">VIII B</td>
            <!--<td class="bordercustom">9744720115</td>-->
            <td class="bordercustom">5400</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row even">
            <td class="bordercustom">20-21/12059</td>
            <td class="bordercustom">4857</td>
            <td class="bordercustom">GEORGY SHELLY</td>
            <td class="bordercustom" data-field-name="batch">VIII D</td>
            <!--<td class="bordercustom">9495110709</td>-->
            <td class="bordercustom">5400</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">CSB</td>
        </tr>
            <tr class="row odd">
            <td class="bordercustom">20-21/12060</td>
            <td class="bordercustom">4923</td>
            <td class="bordercustom">DIYA ANN TOMY</td>
            <td class="bordercustom" data-field-name="batch">VIII B</td>
            <!--<td class="bordercustom">9605948141</td>-->
            <td class="bordercustom">5400</td>
            <td class="bordercustom" data-field-name="term">TERM-2</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cheque</td>
        </tr>
            <tr class="row even">
            <td class="bordercustom">20-21/12061</td>
            <td class="bordercustom">4923</td>
            <td class="bordercustom">DIYA ANN TOMY</td>
            <td class="bordercustom" data-field-name="batch">VIII B</td>
            <!--<td class="bordercustom">9605948141</td>-->
            <td class="bordercustom">5400</td>
            <td class="bordercustom" data-field-name="term">TERM-3</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cheque</td>
        </tr>
            <tr class="row odd">
            <td class="bordercustom">20-21/12062</td>
            <td class="bordercustom">4923</td>
            <td class="bordercustom">DIYA ANN TOMY</td>
            <td class="bordercustom" data-field-name="batch">VIII B</td>
            <!--<td class="bordercustom">9605948141</td>-->
            <td class="bordercustom">5400</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cheque</td>
        </tr>
            <tr class="row even">
            <td class="bordercustom">20-21/12063</td>
            <td class="bordercustom">3791</td>
            <td class="bordercustom">DONA MARIYA TOMY</td>
            <td class="bordercustom" data-field-name="batch">XI B</td>
            <!--<td class="bordercustom">9605948141</td>-->
            <td class="bordercustom">10000</td>
            <td class="bordercustom" data-field-name="term">TERM-3</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cheque</td>
        </tr>
            <tr class="row odd">
            <td class="bordercustom">20-21/12064</td>
            <td class="bordercustom">3791</td>
            <td class="bordercustom">DONA MARIYA TOMY</td>
            <td class="bordercustom" data-field-name="batch">XI B</td>
            <!--<td class="bordercustom">9605948141</td>-->
            <td class="bordercustom">10000</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cheque</td>
        </tr>
            <tr class="row even">
            <td class="bordercustom">20-21/12065</td>
            <td class="bordercustom">4111</td>
            <td class="bordercustom">GEORGIN THOMAS</td>
            <td class="bordercustom" data-field-name="batch">X B</td>
            <!--<td class="bordercustom">9946906424</td>-->
            <td class="bordercustom">5700</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row odd">
            <td class="bordercustom">12066</td>
            <td class="bordercustom">6365</td>
            <td class="bordercustom">ANSA SHINE ORATHEL</td>
            <td class="bordercustom" data-field-name="batch">II A</td>
            <!--<td class="bordercustom">9745284356</td>-->
            <td class="bordercustom">0</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">-</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row even">
            <td class="bordercustom">20-21/12066</td>
            <td class="bordercustom">5858</td>
            <td class="bordercustom">FEBY JOLLY</td>
            <td class="bordercustom" data-field-name="batch">IV E</td>
            <!--<td class="bordercustom">9447682833</td>-->
            <td class="bordercustom">4000</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row odd">
            <td class="bordercustom">20-21/12067</td>
            <td class="bordercustom">5857</td>
            <td class="bordercustom">FEYA JOLLY</td>
            <td class="bordercustom" data-field-name="batch">IV C</td>
            <!--<td class="bordercustom">9447682833</td>-->
            <td class="bordercustom">4000</td>
            <td class="bordercustom" data-field-name="term">TERM-4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2020-2021</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row even">
            <td class="bordercustom">19-20/12023</td>
            <td class="bordercustom">4639</td>
            <td class="bordercustom">SONA SABU</td>
            <td class="bordercustom" data-field-name="batch">VIII C</td>
            <!--<td class="bordercustom">9447529302</td>-->
            <td class="bordercustom">6450</td>
            <td class="bordercustom" data-field-name="term">TERM- 1</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2019-2020</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row odd">
            <td class="bordercustom">19-20/12024</td>
            <td class="bordercustom">4639</td>
            <td class="bordercustom">SONA SABU</td>
            <td class="bordercustom" data-field-name="batch">VIII C</td>
            <!--<td class="bordercustom">9447529302</td>-->
            <td class="bordercustom">6450</td>
            <td class="bordercustom" data-field-name="term">TERM- 2</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2019-2020</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row even">
            <td class="bordercustom">19-20/12025</td>
            <td class="bordercustom">4639</td>
            <td class="bordercustom">SONA SABU</td>
            <td class="bordercustom" data-field-name="batch">VIII C</td>
            <!--<td class="bordercustom">9447529302</td>-->
            <td class="bordercustom">6450</td>
            <td class="bordercustom" data-field-name="term">TERM- 3</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2019-2020</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
            <tr class="row odd">
            <td class="bordercustom">19-20/12026</td>
            <td class="bordercustom">4639</td>
            <td class="bordercustom">SONA SABU</td>
            <td class="bordercustom" data-field-name="batch">VIII C</td>
            <!--<td class="bordercustom">9447529302</td>-->
            <td class="bordercustom">6450</td>
            <td class="bordercustom" data-field-name="term">TERM- 4</td>
            <td class="bordercustom" data-field-name="date">2021-03-01 00:00:00</td>
            <td class="bordercustom" data-field-name="academic_session">2019-2020</td>
            <td class="bordercustom" data-field-name="payment">Cash</td>
        </tr>
        </tbody>
    <tfoot>
    <tr>
        <th colspan="4"></th>
        <th>86500</th>
        <th colspan="5"></th>
    </tr>
    </tfoot>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    (function($) {
        $.fn.tableFilterHeaders = function(filterFn) {
            this.each((index, header) => {
                let $header = $(header),
                    $table = $header.closest('table'),
                    text = $header.text(),
                    colIndex = $header.closest('th').index(),
                    fieldName = $header.attr('data-field-name') || text.toLowerCase(),
                    $select = $('<select multiple>')
                        .data('fieldName', fieldName)
                        //.append($('<option>').text(text).val('').prop('disabled', true))//
                        .append($('<option>').text('All').val('all'))
                        .append($table.find('tbody tr')
                            .toArray()
                            .map(tr => {
                                return $(tr).find(`td:eq(${colIndex})`).text();
                            })
                            .filter(text => text.trim().length > 0)
                            .sort()
                            .filter((v, i, a) => a.indexOf(v) === i)
                            .map(text => {
                                return $('<option>').text(text).val(text);
                            }));
                $header.empty().append($select.val('').on('change', filterFn));
            });
        };
        $.fn.initRowClasses = function(oddCls, evenCls) {
            this.find('tbody tr').each(function(i) {
                $(this).toggleClass(oddCls, i % 2 == 0).toggleClass(evenCls, i % 2 == 1);
            });
        };
        $.fn.updateRowClasses = function(oddCls, evenCls) {
            this.find('tbody tr:visible:even').addClass(oddCls).removeClass(evenCls);
            this.find('tbody tr:visible:odd').addClass(evenCls).removeClass(oddCls);
        };
    })(jQuery);

    $('#myTable').initRowClasses('odd', 'even');
    $('.dropdown-header').tableFilterHeaders(filterText);

    function filterText(e) {
        let $filter = $(e.target),
            $table = $filter.closest('table'),
            $filters = $table.find('.dropdown-header select'),
            filterObj = $filters.toArray().reduce((obj, filter) => {
                let $filter = $(filter);
                return Object.assign(obj, { [$filter.data('fieldName')] : $filter.val() });
            }, {});
        if ($filter.val() === 'all') {
            $filter.val('')
        }
        $table.find('tbody tr').each(function () {
            $(this).toggle($(this).find('td').toArray().every(td => {
                let $td = $(td), fieldName = $td.attr('data-field-name');
                if (fieldName != null) {
                    if (Array.isArray(filterObj[fieldName])) {
                        return filterObj[fieldName].length === 0 ||
                            filterObj[fieldName].indexOf('all') >= 0 ||
                            filterObj[fieldName].indexOf($td.text()) >= 0;
                    }
                    return filterObj[fieldName] === null ||
                        filterObj[fieldName] === '' ||
                        filterObj[fieldName] === 'all' ||
                        filterObj[fieldName] === $td.text();
                }
                return true;
            }));
        });

        $table.updateRowClasses('odd', 'even');
    }
</script>


<p style="margin-top:20px; text-align: right; font-size: 12px;">Generated at 06-03-2021,01:43</p>
        </div>
    </div>

</body></html>


What I have tried:

when i am applying a filter it is working. but the sum is not changing as per filter
Posted
Add a Solution
Comments
shanda watkins 5-Mar-21 16:06pm    
Can you edit your question and only show the relevant code? It's very hard to help trying to look through everything. Keep it simple.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise
Privacy
Cookies
Terms of Use
Last Updated 5 Mar 2021
Layout: fixed | fluid
Copyright © CodeProject, 1999-2023
All Rights Reserved.

Web02 2.8:2023-05-13:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900