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

Поделиться
HTML-код
  • Опубликовано: 10 сен 2024

Комментарии • 66

  • @Codemycom
    @Codemycom  3 года назад +1

    ▶️ Watch Entire Django Wednesdays Playlist ✅ Subscribe To My RUclips 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 года назад +17

    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 5 месяцев назад

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

  • @Maximuskcenglish
    @Maximuskcenglish 2 месяца назад

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

    • @Codemycom
      @Codemycom  2 месяца назад

      You're very welcome!

  • @hdskbi
    @hdskbi Год назад

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

  • @mrverloc
    @mrverloc 3 года назад +1

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

  • @briangreenberg153
    @briangreenberg153 3 года назад

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

  • @acronproject
    @acronproject Год назад

    very good. you are realy teacher.

  • @svysvr4268
    @svysvr4268 Год назад

    "Very Cool"😎

  • @masihaahmadi7663
    @masihaahmadi7663 Год назад

    great

  • @tohelpothers9767
    @tohelpothers9767 Год назад +1

    its good ,please can make it max screen size .

  • @behailubekele3834
    @behailubekele3834 2 года назад

    Fantastic!!

  • @AbdulHadi-wp4sg
    @AbdulHadi-wp4sg 2 года назад +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 2 года назад

      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 ?

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

  • @hcrnn7518
    @hcrnn7518 2 года назад

    Good course man

  • @meliodasdali2729
    @meliodasdali2729 16 дней назад

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

  • @3DGFan9000
    @3DGFan9000 2 года назад

    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  2 года назад

      Sounds like maybe you need a course in basic HTML

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

  • @leonardoantunes2289
    @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
      @Codemycom  Год назад

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

    • @leonardoantunes2289
      @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.

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

  • @OasisFinder
    @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
      @aimlezz8855 Год назад +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 Год назад

      @@aimlezz8855 Perfect!

  • @kapitankidlattv9613
    @kapitankidlattv9613 Год назад

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

  • @hendmohamed3919
    @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
      @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})

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

  • @omicode8035
    @omicode8035 3 года назад

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

  • @nezhatnour2462
    @nezhatnour2462 2 года назад

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

    • @Codemycom
      @Codemycom  2 года назад +1

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

  • @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 Год назад

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