Special Hack To Style Pagination With Bootstrap - Django Wednesdays #19

In this video we'll style our pagination using Bootstrap for Django and Python.
In the last video we added functional pagination. In this video we'll make that pagination look good using the Bootstrap CSS framework. Bootstrap makes it really easy to make your pagination look awesome.
#django #codemy #JohnElder
Timecodes
0:00​​ - Introduction
1:44 - Get Pagination Code From Bootstrap
2:22 - Add li Tags To Our Links
2:59 - Add Class To Our Links
4:23 - Disable Page 5 of 6 Item
5:14 - Add Actual Pages To Pagination
6:50 - Create For Loop
7:31 - Create Character String In View
8:45 - View Character String On Webpage
9:41 - Add String Counter to ForLoop.Counter
10:14 - Add Links To Forloop.Counter Items
11:00 - Test It Out
13:37 - Center The Pagination Links
14:20 - Conclusion

[@Codemycom]

▶️ Watch Entire Django Wednesdays Playlist ✅ Subscribe To My TH-cam Channel:
bit.ly/35Xo9jD bit.ly/2IGzvOR
▶️ See More At: ✅ Join My Facebook Group:
Codemy.com bit.ly/2GFmOBz
▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt!
Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN
▶️ Get The Code
bit.ly/3sJpeV6

[@stevenowens7265]

Great video as always. Here's a simpler way to do the pagination. the Paginator class has a page range property you can use.
{% for page in page_obj.paginator.page_range %}
{{ page }}
{% endfor %}

[@isaiaholaoye2786]

This is great Steven, but what if u have like 20pages and u want to truncate your pages so as all of the pages do not iterate out. so more like (2, 3, 4 .... 17, 18, 20) instead of (1-20)

[@JK-nx1wd]

@@isaiaholaoye2786.... to truncate, note sure if a shorter way, but i've added on to what Steven kindly provided, down to 3 in below (1,2,3....18,19,20) and my object called items instead of page_obj: {% if items.paginator.num_pages > 3 %}
{% for page in items.paginator.page_range|slice:":3" %}
{{ page }}
{% endfor %}
...
{% for page in items.paginator.page_range|slice:"-3:" %}
{{ page }}
{% endfor %}
{% else %}
{% for page in items.paginator.page_range %}
{{ page }}
{% endfor %}
{% endif %}

[@jasondavis6850]

Enjoying the series, thanks. Here's a way to add disabled to the previous button. Modify the next button loop accordingly...
{% if venues.has_previous %}
« First
Previous
{% elif not venues.has_previous %}
Previous
{% endif %}

[@mrverloc]

Loved that special Hack, I've added it to an App I've been building. Thanks

[@Codemycom]

Glad you liked it!

[@acronproject]

very good. you are realy teacher.

[@hdskbi]

I don't like doing frontend but with Your tutorials this is very easy job :)

[@Codemycom]

Thanks!

[@behailubekele3834]

Fantastic!!

[@Codemycom]

Thanks!

[@briangreenberg153]

Hey John, All I gotta say is: "Clever hack!!"

[@Codemycom]

Ha, thanks!

[@hcrnn7518]

Good course man

[@Codemycom]

Thanks!

[@webseries9482]

Amazing bro

[@Codemycom]

Thanks!

[@webseries9482]

How to do this pagination without page reload. Can you make video on that, I need that.. 👍👍

[@Codemycom]

@@webseries9482 ajax or javascript

[@demoaccount6859]

I am using paginator in my list view. Every page listed 10 item. If I edit an item from page 5 then I want to redirect back to page 5. Right if I edit an team from page 5, it's redirecting me every time in page 1

[@nguyenconghuy3847]

Can you do a video about this pagination logic with 2 django code bases, 1 produce REST api and another consume the api

[@leonardoantunes2289]

Great video. I'm a big fan of this series.
One question. This approach would fit for big data operations? For example, let's suppose that we wanna get 10K venues (or anything else) for our list. This probably would overload the navigator that would probably crash at some moment. For this kind of purpose I would do the pagination routine from the scratch inside of the views. Like telling which window of data I wanna to get and not using the objects.all() method . Could you suggest an alternative on how to do this operation in a more automatic way?

[@Codemycom]

Not sure I agree that it necessarily would crash...

[@leonardoantunes2289]

@@Codemycom For large amount of data unfortunately it will. Or at the very least would take some time until finish load everything up. But thanks for the feedback anyway.

[@kapitankidlattv9613]

Great video as always. Just one quick thing, how can I make the pagination for say 300 pages?

[@Codemycom]

in the same way

[@masihaahmadi7663]

great

[@Codemycom]

thanks

[@svysvr4268]

"Very Cool"😎

[@Codemycom]

Thanks!

[@nezhatnour2462]

thank you so much for all the videos! where can I find the codes?

[@Codemycom]

In the pinned comment just like I said in the video..

[@3DGFan9000]

I just cannot seem to get the style to work right on my own app. Don't get any of the grid, and borders around each page number, and selected page seems to raise up a bit. I know the bootstrap include is right because if i just paste in the example it makes it correct, but can't get it to work around my data.

[@Codemycom]

Sounds like maybe you need a course in basic HTML

[@Xhandel]

There is one thing i still have an issue: when you have a lot of entries, the page counter below keeps spawning numbers, saturating the page. How can i make the numbers bar to show, i dont know, 10 pages, but having a button to show the next(or previous) 10?

[@clashnub]

you can try iterating through this one "Paginator.get_elided_page_range(number, *, on_each_side=3, on_ends=2)" but it requires djagno 3.2

[@tohelpothers9767]

its good ,please can make it max screen size .

[@Codemycom]

What do you mean?

[@AbdulHadi-wp4sg]

i wanna know how to make the current page number highlated ... when highlating current page all the other pages gets highlated as its in for loop

[@Niens]

If you use the the code below you will achieve that.
I have not yet figured out how to show though as @DavossSeaworth asked.

{% if leads.has_previous %}
« First
Previous
{% endif %}
{% for page in leads.paginator.page_range %}
{{ page }}
{% endfor %}
{% if leads.has_next %}
Next
Last »
{% endif %}

[@yanickylarson]

Hello Abdul do you find how to do that please ?

[@hendmohamed3919]

Great video as always...but i have a problem ,This does not move to the other page, I tried to change the page number in the path,but it is fixed on the first page

[@hendmohamed3919]

this code:
def list_venues(request):
venue_list = Venue.objects.all()
p = Paginator(Venue.objects.all(), 2)
page = request.GET.get('page')
venues = p.get_page(page)
nums = "a" * venues.paginator.num_pages
return render(request,'events/venue.html',
{'venue_list':venue_list,
'venues':venues,
'nums': nums})

[@omicode8035]

Had already done this but the only part pending was the number thing you did.. thanks..

[@Codemycom]

Cool

[@zuberkhan-kn7iu]

Nice explanation, So far you explain everything nicely.
But what if, we have, let's say 1000 entries in our venue and we are showing 20 per page, in this case our pagination will show 50 numbers like:
| first | | previous | |1| |2| |3| |4| |5| |6| |7| |8| |9| |10| |11| |12| |13| |14| |15| |16| |17| |18| all the way to 50 |Last| :
Which will not look good on web page, so how can we limit it?
Like, we can show first 5 pages and last five pages:
| first | | previous | |1| |2| |3| |4| |5| | .. | |47| |48| |49| |50| |Last|

[@aimlezz8855]

Use this:

{% if page.has_previous %}
First
Previous
{% elif not page.has_previous %}
First
Previous
{% endif %}
{% for n in page.paginator.page_range %}
{% if page.number == n %}

{{ n }}

{% elif n > page.number|add:'-3' and n < page.number|add:'3' %}
{{ n }}
{% endif %}
{% endfor %}
{% if page.has_next %}
Next
Last
{% elif not page.has_next %}
Next
Last
{% endif %}

[@vex5243]

@@aimlezz8855 Perfect!

[@mdnehal2389]

But what if we have 100 page then this should work or not

[@Codemycom]

What does the number of pages have to do with it?

[@tanishgambhir6679]

First Like, first comment, bro pls make a Kivy Translator app video bro.

[@Codemycom]

No, I won't be doing that

[@user-fx6uf4jn9n]

can i have the file sir??

[@Codemycom]

Yes, I tell you where it is in the video

[@user-fx6uf4jn9n]

@@Codemycom sir can you help me with server side datatable with django if you can create one video or series of datatables with django client side and server side will be great becouse there is no such thing in youtube, thank you

[@Codemycom]

@@user-fx6uf4jn9n There isn't really such a thing...Django handles both the front and backend...all Django videos, therefore, are about that.

[@kellymaynard1192]

i need a help.
i go warnning
UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: QuerySet.

[@weishyan9699]

i have a quest why my lat page have problem click it can't blank to last page
--html here
{% if venues.has_next %}

Next


Last »

{% endif %}
--view.py here
def add_event(request):
submitted = False
if request.method == 'POST':
if request.user.is_superuser:
form = EventFormAdmin(request.POST)
if form.is_valid():
form.save()
return HttpResponseRedirect('/add_event?submitted=True')
else:
form = EventForm(request.POST)
if form.is_valid():
# form.save()
event = form.save(commit=False)
event.manager = request.user # logged in user
event.save()
return HttpResponseRedirect('/add_event?submitted=True')
else:
# Just Going To The Page, Not Submitting
if request.user.is_superuser:
form = EventFormAdmin
else:
form = EventForm
form = EventForm
if 'submitted' in request.GET:
submitted = True
return render(request, 'events/add_event.html', {'form': form, 'submitted': submitted})