Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" >
  <link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css" rel="stylesheet">
  
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.js"></script>
  <title>JS Bin</title>
</head>
<body>
​
      <div class="card">
        <h4 class="text-center mt-3 mb-3"><u>Filter</u></h4>
        <div class="card-body">
            <div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-4 col-form-label text-dark">Account Number</label>
                            <div class="col-sm-8">
                              <div id="account_number"></div>
                            </div>
                          </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-4 col-form-label text-dark">From</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="min" name="min" placeholder="mm/dd/yyyy">
                            </div>
                          </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-4 col-form-label text-dark">To</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="max" name="max" placeholder="mm/dd/yyyy">
                            </div>
                          </div>
                    </div>
​
                </div>
            </div>
​
            <div id="buttons"></div>
        </div>
    </div>
  
      <div class="card">
        <h4 class="text-center mt-3 mb-3"><u>Bank Statement</u></h4>
        <p class="text-center" id="account_number1"></p>
        <div class="card-body">
            <div class="table-responsive">
              <table class=" table table-borderless  " style="min-width: 845px">
                    <thead>
                        <tr>
                            <th>Account Number</th>
                            <th>BAnk Name</th>
                            <th>Date</th>
                            <th>Expenses</th>
                            <th class="text-center">Amount</th>
​
                        </tr>
                    </thead>
                    <tbody>
​
                        <!-- @foreach (App\Models\BankTransaction::where('type','debit')->get() as $item) -->
                            <tr>
                                <td>35302111502</td>
                                <td>ABC Bank</td>
                                <td>2021-09-07</td>
                                <td>Withdraw</td>
                                <td class="text-center">10000</td>
                            </tr>
                       <!-- @endforeach -->
                       <tr>
                          <td>35302111502</td>
                          <td>ABC Bank</td>
                          <td>2021-09-07</td>
                          <td>Online Payment</td>
                          <td class="text-center">10000</td>
                       </tr>
                      <tr>
                          <td>35302111502</td>
                          <td>ABC Bank</td>
                          <td>2021-09-07</td>
                          <td>Online Payment</td>
                          <td class="text-center">10000</td>
                       </tr>
                       <tr>
                          <td>54-0211-15145</td>
                          <td>ANC Bank</td>
                          <td>2021-09-05</td>
                          <td>Card Bill</td>
                          <td class="text-center">6000</td>
                      </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Account Number</th>
                            <th>BAnk Name</th>
                            <th>Date</th>
                            <th>Expenses</th>
                            <th class="text-center">Amount</th>
                        </tr>
                      
                    </tfoot>
​
​
                </table>
                <table class=" table table-borderless " style="min-width: 845px">
                    <thead>
                        <tr>
                            <th>Account Number</th>
                            <th>BAnk Name</th>
                            <th>Date</th>
                            <th>Revenues</th>
                            <th class="text-center">Amount</th>
​
                        </tr>
                    </thead>
                    <tbody>
​
                        <!-- @foreach (App\Models\BankTransaction::where('type','credit')->get() as $item) -->
                            <tr>
                                <td>35302111502</td>
                                <td>ABC Bank</td>
                                <td>2021-09-06</td>
                                <td>Account Open</td>
                                <td class="text-center">1000</td>
                            </tr>
                        <!-- @endforeach -->
                      <tr>
                                <td>35302111502</td>
                                <td>ABC Bank</td>
                                <td>2021-09-06</td>
                                <td>Diposit</td>
                                <td class="text-center">10000</td>
                            </tr>
                      <tr>
                          <td>35302111502</td>
                          <td>ABC Bank</td>
                          <td>2021-09-07</td>
                          <td>Balance Transfer</td>
                          <td class="text-center">10000</td>
                      </tr>
                      <tr>
                          <td>54-0211-15145</td>
                          <td>ANC Bank</td>
                          <td>2021-09-01</td>
                          <td>Account Opening</td>
                          <td class="text-center">1000</td>
                      </tr>
                      <tr>
                          <td>54-0211-15145</td>
                          <td>ANC Bank</td>
                          <td>2021-09-03</td>
                          <td>Diposit</td>
                          <td class="text-center">3000</td>
                      </tr>
                      <tr>
                          <td>54-0211-15145</td>
                          <td>ANC Bank</td>
                          <td>2021-09-05</td>
                          <td>Online Earn</td>
                          <td class="text-center">6000</td>
                      </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Account Number</th>
                            <th>BAnk Name</th>
                            <th>Date</th>
                            <th class="text-dark"><h4>Total Revenues</h4></th>
                            <th class="text-dark text-center h4"></th>
                        </tr>
                    </tfoot>
​
​
                </table>
                
​
            </div>
​
        </div>
    </div>
</body>
  
  
  
<script>
​
        $(document).ready(function() {
            //Date Filter Start
            var minDate, maxDate;
            $.fn.dataTable.ext.search.push(
                function( settings, data, dataIndex ) {
                    var min = minDate.val();
                    var max = maxDate.val();
                    var date = new Date( data[1] );
                    if (
                        ( min === null && max === null ) ||
                        ( min === null && date <= max ) ||
                        ( min <= date   && max === null ) ||
                        ( min <= date   && date <= max )
                    ) {
                        return true;
                    }
                    return false;
                }
            );
            minDate = new DateTime($('#min'), {
                format: 'MMMM Do YYYY'
            });
            maxDate = new DateTime($('#max'), {
                format: 'MMMM Do YYYY'
            });
            var editor;
           var table= $('table.table-borderless').DataTable({
            "dom":'t',
            "columnDefs": [
                            {
                                "targets": [ 1 ],
                                "visible": false,
                                "searchable": true
                            },
                            {
                                "targets": [ 0 ],
                                "visible": false,
                                "searchable": true
                            },
                            ],
​
            "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();
​
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
​
            amount = api
                .column( 3, { search: "applied" } )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
​
            // Update footer
            $( api.column( 3 ).footer() ).html(
                amount
            );
        },
                initComplete: function() {
                    //Drop Down Account Number
                    var column = this.api().column(0);
                    var select = $('<select class="form-control" ><option value="">All Account</option></select>')
                        .appendTo($('#account_number').empty())
                        .on('change', function() {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                            document.getElementById("account_number1").innerHTML = val;
                            //console.log(column);
                        });
                        column.data().unique().sort().each(function(d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
​
                        });
                }
​
​
            });
​
            //Date Filter
            $('#min, #max').on('change', function () {
                table.draw();
            });
​
​
        });
​
    </script>
  
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.11.0/api/sum().js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hasibul442pro
0viewers