Get actual with foreign key Web2py

Question

I have a data table with three fields. All of these three (3) fields are foreign key of others table. But I want to display the actual data. How can I work it out? For now, I can only display their ID.

Database Table

class IS_MAC_IN_DB(object):
    def __init__(self, db, tablename, fieldname, error_message='Invalid MAC Address'):
        self.db = db
        self.tablename = tablename
        self.fieldname = fieldname
        self.error_message = error_message

    def __call__(self, value):
        row = self.db(self.db[self.tablename][self.fieldname] == value).select().first()
        if row:
            return (row.id, None)
        else:
            return (value, self.error_message)

    def formatter(self, value):
        return value

db.define_table('device_infra',
                Field('site_id', 'reference infra_site', label=T('Site'), ondelete='No ACTION'),
                Field('device_type_id','reference device_type', label=T('Device Type'), ondelete='NO ACTION'),
                Field('device_mac_id', 'reference device', label=T('Device Mac'), ondelete='NO ACTION')
                )

db.device_infra.device_mac_id.represent = lambda value, row: db(db.device.id == value).select(db.device.mac).first().mac if value else None

db.device_infra.device_mac_id.requires = [
        IS_NOT_EMPTY(error_message=T('Please select Device.')),
        IS_MAC_IN_DB(db, 'device', 'mac', error_message=T('Mac Address not found'))
]

db.device_infra.site_id.requires = IS_IN_DB(db, 'infra_site.id', '%(site)s', error_message='Site not found')

Controller

def index():
    # record = db.device_infra(request.args(0)) or redirect(URL('index'))
    device_infra_form = SQLFORM(db.device_infra)
    # device_infra_form.device_mac_id = db.device[record.device_mac_id].mac if record.device_mac_id else None

    # device_infra_form = SQLFORM(db.installed_devices)
    if device_infra_form.process().accepted:
        response.flash_type = "success"
        response.flash = 'Form accepted'
        # redirect(URL('index'))
    return dict(device_infra_form = device_infra_form)

View

{{extend 'layout_adminlte.html'}}

{{block head}}
<!-- DataTables -->
<link rel="stylesheet" href="{{=URL('static', 'adminlte/plugins/datatables/dataTables.bootstrap.css')}}">
{{end}}


<div class="box">
    <div class="box-header">
        <h1>Device Infra</h1>
        {{=device_infra_form}}
    </div>

    <div class="box-body">
    <table id="device_infra" class="table table-bordered table-hover dataTable"></table>
    </div>
</div>

{{block page_js}}
<!-- DataTables -->
<script src="{{=URL('static', 'adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{=URL('static', 'adminlte/plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
<script>

$(function() {
    let columns = [
        {title: "Site", data: 'site_id', defaultContent: ''},
        {title: 'Device Type', data: 'device_type_id', defaultContent: ''},
        {title: 'Device MAC', data: 'device_mac_id', defaultContent: ''},
    ]

    console.log('{{=URL("api", "v1", args=["device_infra"])}}.json');
$("#device_infra").DataTable({
        // autoWidth: false,
        // deferRender: true,
        // serverSide: true,
        ajax: {
            url: '{{=URL("api", "v1", args=["device_infra"])}}.json',
            dataSrc: 'content',
            // data: function(d) {
            //     d['search']['regex'] = true;
            // }
        },
        columns: columns
    }).on('draw', function() {
    });

})


</script>
{{end}}
{{pass}}

I'm trying to display the actual data of the respective foreign key.