BBnepal-Accounts/account/application/views/accounts/ledger/navigate.php

<div class="content-wrapper">

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- <div class="col-3">
                    <div class="card card-primary card-outline ">
                        <div class="card-header bg-primary disabled color-palette">
                        <h3 class='card-title text-center m-0'>Click to view Accounts</h3>
                        </div>
                        <div class="card-body">
                        <div id="tree1"></div>
                        </div>
                    </div>
                </div> -->
                <div class="col">
                    <div class="card card-primary card-outline">
                        <div class="card-header bg-primary disabled color-palette">
                            <h3 class="card-title m-0"><?php echo $pageTitle; ?></h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12" id="accountsContainer">
                                    <h5 class='text-center'>Accounts Here</h5>
                                </div>
                            </div>
                            <div class="modal fade" id="ledgerdetails_box" tabindex="-1" role="dialog" aria-labelledby="ledgerdetails_box" aria-hidden="true">
                                <div class="modal-dialog modal-xl" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Ledger Details</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body" id="details_container">
                                            Ledger Details Goes Here
                                        </div>
                                        <!-- <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-success" data-dismiss="modal">Print</button>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php
$tree = "[\n";
foreach ($AccountGroups as $AccountGroup) :
    $tree .= "{text:'" . $AccountGroup->acgroup_name . " <span class=\'node-counts\'>Categories: " . countChildCategories($AccountGroup->acgroup_id) . "</span>',icon: 'fa fa-folder',nodes:[\n";
    foreach ($AccountGroup->AccountCategories as $AccountCategory) :
        $tree .= "{text:'" . $AccountCategory->accategory_name . " (Accounts: " . countChildAccounts($AccountCategory->accategory_id) . ")',icon: 'fa fa-folder', class:'treecategory_link',id:  'accategory_" . $AccountCategory->accategory_id . "'},\n";
    endforeach;
    $tree .= "]},";
endforeach;
$tree .= "]";
?>
<script>
    $.AccountGroups = <?php echo $tree; ?>;
</script>
<?php function footerFunctions()
{
?>
    <script>
        $('#tree').bstreeview({
            data: $.AccountGroups
        });
        $(".treecategory_link").click(function(e) {
            var id = $(this).attr("id").substr(11);
            getAccounts(id);
        });
        $(".showLedgerTrigger").click(function(e) {
            var id = $(this).attr("id").substr(8);
            showLedger(id);
        });

        function getAccounts(id) {
            $("#accountsContainer").empty();
            $.ajax({
                url: "<?php echo site_url("accounts/reports/ajax/accountsbycategory/"); ?>" + id,
                success: function(data) {
                    // console.log(data);
                    $("#accountsContainer").html(data);
                    // $("#accountsContainer table").addClass("ajaxDataTable");
                    // $('.dataTable').DataTable().clear().destroy();
                    // $(".dataTable").dataTable();
                }
            });
        }
        getAccountsAll();

        function getAccountsAll() {
            $("#accountsContainer").html("");
            $.ajax({
                url: "<?php echo site_url("accounts/reports/ajax/getallaccounts/"); ?>", //accounts/reports/ajax/getallaccounts/
                success: function(data) {
                    $("#accountsContainer").html(data);
                    $("#accountsContainer table").addClass("ajaxDataTable");
                    $('.dataTable').DataTable().clear().destroy();
                    $(".dataTable").dataTable();
                }
            });
        }

        function showLedger(id) {
            // $("#accountsContainer").html("");
            alert(id);
            $.ajax({
                url: "<?php echo site_url("accounts/reports/getledgersummary/"); ?>" + id, //accounts/getledgersummary/
                success: function(data) {
                    $("#ledgerdetails_box #details_container").html(data);
                    $("#ledgerdetails_box").modal("show");
                    $('.dataTable').DataTable().clear().destroy();
                    $(".dataTable").dataTable();
                }
            });
        }
    </script>
<?php
}
?>