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

[@Codemycom]

▶️ Watch Entire Django Wednesdays Playlist ✅ Subscribe To My KZbin 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 %}

[@kctienganh]

It's a fantastic tutorial. Thanks a lot, sir!

[@Codemycom]

You're very welcome!

[@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!

[@hdskbi]

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

[@Codemycom]

Thanks!

[@acronproject]

very good. you are realy teacher.

[@briangreenberg153]

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

[@Codemycom]

Ha, thanks!

[@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 %} &laquo First Previous {% endif %} {% for page in leads.paginator.page_range %} {{ page }} {% endfor %} {% if leads.has_next %} Next Last &raquo {% endif %}

[@yanickylarson]

Hello Abdul do you find how to do that please ?

[@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

[@tohelpothers9767]

its good ,please can make it max screen size .

[@Codemycom]

What do you mean?

[@behailubekele3834]

Fantastic!!

[@Codemycom]

Thanks!

[@kapitankidlattv9613]

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

[@Codemycom]

in the same way

[@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

[@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

[@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.

[@svysvr4268]

"Very Cool"😎

[@Codemycom]

Thanks!

[@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

[@nguyenconghuy3847]

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

[@OasisFinder]

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!

[@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})

[@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?

[@omicode8035]

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

[@Codemycom]

Cool

[@kellymaynard1192]

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

[@masihaahmadi7663]

great

[@Codemycom]

thanks

[@meliodasdali2729]

we could have assigned a list [ 1 , 2 , 3 , .... number of pages] and iterate through its elements

[@Codemycom]

try it

[@tanishgambhir6679]

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

[@Codemycom]

No, I won't be doing that

[@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 &raquo; {% 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})