Fetch doctype data on webpage

[sehjalpreet_kaur]

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?

[Rehan_Ansari]

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

[hsrai]

Making a Web Page That Displays A DocType's Data

@TurkerTunali @brian_pond Great to hear that I’m not alone and that you guys strive to learn and teach each other! Well, here’s the good news: I finally figured out how to do it. I have realized that I was overthinking everything that i was doing, questioning the control flow of the framework and every little component that it has. I’ve been upholding a “do-first-ask-questions-later” sort of policy. It is, indeed, a long, sometimes tedious process of trial and error; just as some like to com…

or

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

https://frappeframework.com/docs/v13/user/en/guides/portal-development/context

[sehjalpreet_kaur]

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?

[Rehan_Ansari]

@sehjalpreet_kaur

sorting

sorting means can you elaborate?

[Vishal1]

I was trying to create Custom Webpage.

Python file code
user.py

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

Html file code
user.html

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

<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>
        
        </div>
        <div class="col-xs-6 text-right">
            <button class="btn btn-default btn-more btn-sm">Load More...</button>
</div>
</div>
</div>

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.

[sehjalpreet_kaur]

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.

[Rehan_Ansari]

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

[Rehan_Ansari]

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

[Vishal1]

Have you any demo script which i can try.