Fetch doctype data on webpage

I am creating Mentor-Mentee application on frappe where mentors can be allotted to mentees, here i have 3 doctypes: Mentee(for student data), Mentor(for teachers data), Relation(to link mentors and mentees). I want to fetch mentee names and mentor names on webpage of Relation doctype. I have done this by fetching data of mentor and mentee doctypes in relation_row.html file. Is this right approach or I should do this with sql queries?
Further, can I add filters like searching and sorting on webpage?

you can use context script in web page to show the doctype data.


use context script in web page to show the doctype data, as suggested by @Rehan_Ansari .



Thank you so much @Rehan_Ansari and @hsrai for help. I tried to show data using context script and it is working fine.
How can we apply pagination and sorting filter on webpage?

sorting means can you elaborate?

I was trying to create Custom Webpage.

Python file code

import frappe
search = 4
def get_context(context):
    context.users = frappe.get_list("User", fields=["first_name"], limit=search)

Html file code

<h3>List of Users</h3>
{% for user in users %}
    <li>{{ user.first_name }} {{ user.get("last_name", "") }}</li>
{% endfor %}

<div class="list-paging-area">
    <div class="row">
        <div class="col-xs-6">
            <div class="btn-group btn-group-paging">
                <button type="button" class="btn btn-default btn-sm btn-info" data-value="20">1</button>
                <button type="button" class="btn btn-default btn-sm" data-value="100">2</button>
                <button type="button" class="btn btn-default btn-sm" data-value="500">3</button>
        <div class="col-xs-6 text-right">
            <button class="btn btn-default btn-more btn-sm">Load More...</button>

i find the above frontend code in the frappe folder ~/frappe-bench/apps/frappe/frappe/public/js/frappe/ui/listing.html file

All i want to add Pagination just like default frappe pagination in this custom webpage please help
I added the frontend buttons But I’m confused with the functionality part.

In mentor-mentee app as I mentioned above, I was creating a custom webpage of Relation doctype to show fields Roll No, Mentee Name from Mentee doctype and Mentor Name from Mentor doctype. You can check the following screenshot of webpage.

Here in the webpage, I want a sorting filter, where I can sort values according to Roll No like in ascending or descending order, Mentee Name, Mentor Name.

for this searching you can add HTML text box and add javascript code in that Web Page.

you can add functionality using javascript section in that web page.

Have you any demo script which i can try.