Codeignitor-PHP-based-Tax-Invoice-Quotation-Proforma-QuickQuote-Purchase-invoice-management-System/test.html at master · reputed-artist/Codeignitor-PHP-based-Tax-Invoice-Quotation-Proforma-QuickQuote-Purchase-invoice-management-System · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <title>Hide Rows Example</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
</head>

<body class="p-4">

    <button class="btn btn-primary mb-3" id="hidezero">Hide Opening Balance = 0</button>

    <table id="acctable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Opening Balance</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ABC</td>
                <td>0</td>
            </tr>
            <tr>
                <td>XYZ</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>PQR</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>

<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#acctable').DataTable();

    // Hide rows with opening balance = 0
    $("#hidezero").click(function(){
        table.rows().every(function(){
            let bal = this.data()[1];  // second column
            if (bal == "0") {
                $(this.node()).hide();   // hide that row
            }
        });
    });
});
</script>

</body>
</html>