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

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 ม.ค. 2025

ความคิดเห็น • 64

  • @Codemycom
    @Codemycom  3 ปีที่แล้ว +1

    ▶️ 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
    @stevenowens7265 2 ปีที่แล้ว +20

    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
      @isaiaholaoye2786 2 ปีที่แล้ว +4

      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
      @JK-nx1wd 9 หลายเดือนก่อน

      @@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
    @jasondavis6850 2 ปีที่แล้ว +7

    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 %}

  • @kctienganh
    @kctienganh 6 หลายเดือนก่อน

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

    • @Codemycom
      @Codemycom  6 หลายเดือนก่อน

      You're very welcome!

  • @mrverloc
    @mrverloc 3 ปีที่แล้ว +1

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

    • @Codemycom
      @Codemycom  3 ปีที่แล้ว

      Glad you liked it!

  • @hdskbi
    @hdskbi 2 ปีที่แล้ว

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

  • @acronproject
    @acronproject 2 ปีที่แล้ว

    very good. you are realy teacher.

  • @briangreenberg153
    @briangreenberg153 3 ปีที่แล้ว

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

  • @behailubekele3834
    @behailubekele3834 2 ปีที่แล้ว

    Fantastic!!

  • @hcrnn7518
    @hcrnn7518 2 ปีที่แล้ว

    Good course man

  • @tohelpothers9767
    @tohelpothers9767 2 ปีที่แล้ว +1

    its good ,please can make it max screen size .

    • @Codemycom
      @Codemycom  2 ปีที่แล้ว

      What do you mean?

  • @nguyenconghuy3847
    @nguyenconghuy3847 2 ปีที่แล้ว

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

  • @demoaccount6859
    @demoaccount6859 2 ปีที่แล้ว

    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

  • @AbdulHadi-wp4sg
    @AbdulHadi-wp4sg 3 ปีที่แล้ว +1

    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
      @Niens 3 ปีที่แล้ว

      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
      @yanickylarson ปีที่แล้ว

      Hello Abdul do you find how to do that please ?

  • @leonardoantunes2289
    @leonardoantunes2289 2 ปีที่แล้ว

    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
      @Codemycom  2 ปีที่แล้ว

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

    • @leonardoantunes2289
      @leonardoantunes2289 2 ปีที่แล้ว

      @@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
    @svysvr4268 ปีที่แล้ว

    "Very Cool"😎

  • @kapitankidlattv9613
    @kapitankidlattv9613 2 ปีที่แล้ว

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

    • @Codemycom
      @Codemycom  2 ปีที่แล้ว

      in the same way

  • @webseries9482
    @webseries9482 3 ปีที่แล้ว

    Amazing bro

    • @Codemycom
      @Codemycom  3 ปีที่แล้ว

      Thanks!

    • @webseries9482
      @webseries9482 3 ปีที่แล้ว

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

    • @Codemycom
      @Codemycom  3 ปีที่แล้ว

      @@webseries9482 ajax or javascript

  • @hendmohamed3919
    @hendmohamed3919 2 ปีที่แล้ว

    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
      @hendmohamed3919 2 ปีที่แล้ว

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

  • @3DGFan9000
    @3DGFan9000 3 ปีที่แล้ว

    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
      @Codemycom  3 ปีที่แล้ว

      Sounds like maybe you need a course in basic HTML

  • @OasisFinder
    @OasisFinder 2 ปีที่แล้ว

    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
      @aimlezz8855 2 ปีที่แล้ว +4

      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
      @vex5243 2 ปีที่แล้ว

      @@aimlezz8855 Perfect!

  • @Xhandel
    @Xhandel 3 ปีที่แล้ว

    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
      @clashnub 3 ปีที่แล้ว

      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

  • @omicode8035
    @omicode8035 3 ปีที่แล้ว

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

  • @meliodasdali2729
    @meliodasdali2729 4 หลายเดือนก่อน

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

    • @Codemycom
      @Codemycom  4 หลายเดือนก่อน

      try it

  • @masihaahmadi7663
    @masihaahmadi7663 ปีที่แล้ว

    great

  • @mdnehal2389
    @mdnehal2389 2 ปีที่แล้ว

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

    • @Codemycom
      @Codemycom  2 ปีที่แล้ว

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

  • @tanishgambhir6679
    @tanishgambhir6679 3 ปีที่แล้ว

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

    • @Codemycom
      @Codemycom  3 ปีที่แล้ว

      No, I won't be doing that

  • @kellymaynard1192
    @kellymaynard1192 ปีที่แล้ว

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

  • @weishyan9699
    @weishyan9699 2 ปีที่แล้ว

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