如何在引导模式中基于ID检索动态记录

Question

There are two tables PFI and PFI_details. PFI table stores client_id, pfi_id and PFI_details table stores the PFI details like pfi_id, description, quantity, rate and amount.

I want to display the PFI_details data along side PFI data. I am using Bootstrap Tables to display my data. See tables below:

PFI records

PFI_details records:

First Record

Second Record

NOTE: See the title in the modal PFI Details for PFI_ID

My Controller:

$this->data['pfis']     = $this->pfis_model->getPFI();
$this->data['pfi_details'] = $this->pfis_model->getPFIDetails();

My View:

<?php if (isset($pfis)) : ?>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
    <thead>
        <tr>
            <th>Client</th>
            <th>PFI ID</th>
            <!-- <th>PFI DOC</th> -->
            <th>Managed By</th>
            <th>PFI Details</th>
            <th>PFI Export</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    <?php foreach ($pfis as $pfi) : ?>
        <tr>
            <td><?php echo $pfi->client_name; ?></td>
            <td><?php echo $pfi->pfi_id; ?></td>
            <!-- <td><a href="<?php //echo PFI_URL.$pfi->pfi_upload;?>" target="_blank"><?php //echo $pfi->pfi_upload; ?></a></td> -->
            <td><?php if ($pfi->managed_by === '2') {echo 'Admin';}?></td>
            <td>
            <button class="btn btn-primary btn-sm modal-toggler" data-id="<?php echo $pfi_id = $pfi->pfi_id;?>" data-toggle="modal" data-target="#viewPFIDetailsModal">View Details</button>
            <!-- Modal -->
            <div class="modal fade" id="viewPFIDetailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">PFI Details for <span id="pfi"></span></h4>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive" style="overflow:scroll;">

                                <table class="table table-striped">
                                <tr>
                                    <th>PFI ID</th>
                                    <th>Description</th>
                                    <th style="text-align:center;">Quantity</th>
                                    <th style="text-align:center;">Rate</th>
                                    <th style="text-align:center;">Amount</th>
                                </tr>
                                <?php if (isset($pfi_details)):?>
                                <?php foreach ($pfi_details as $pd) :?>
                                <?php if ($pfi_id == $pd->pfi_id):?>
                                <tr>
                                    <td><?php echo $pd->pfi_id;?></td>
                                    <td><?php echo $pd->description;?></td>
                                    <td style="text-align:center;"><?php echo number_format($pd->quantity);?></td>
                                    <td style="text-align:right;"><?php echo number_format($pd->rate);?></td>
                                    <td style="text-align:right;"><?php echo number_format($pd->amount);?></td>
                                </tr>
                                <?php endif;?>
                                <?php endforeach;?>
                                <?php endif;?>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
            </td>
            <td><a href="<?php echo base_url('pfi/export_to_pdf/'.$pd->pfi_id);?>" target="_blank" class="btn btn-sm btn-info"><i class="fa fa-print fa-fw"></i> Print</a></td>
            <td>
                <!-- <a href="<?php echo base_url('pfi/edit/'.$client->id); ?>" class="btn btn-primary btn-xs">Edit</a> -->
                <a href="<?php echo base_url('pfi/delete/'.$pfi->id); ?>" class="btn btn-danger btn-sm"><i class="fa fa-times fa-fw"></i> Delete</a>
            </td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>
<?php endif; ?>

My JavaScript:

$(".modal-toggler").click(function(){
    var pfi_id = $(this).attr("data-id");
    $('#pfi').text(pfi_id);
});

How do I go about fixing this?

Any help is appreciated.