Adding rel= attributes to Bootpag Pagination for SEO

Question

Im using Bootpag pagination with an ajax call and I'm looking for a way to add the rel='next' rel='prev' to the links, I got as far as adding them based on an 'active' class with the 'prev' attribute on all previous links and 'next' on all the next links but as I use the pagination the attributes don't change.

The Code For the additional attributes

if ( $('ul.pagination li').hasClass('active') ) {
   $('li.active').prevAll().attr("rel","prev");
 }
 if ( $('ul.pagination li').hasClass('active') ) {
   $('li.active').nextAll().attr("rel","next");
 }

The code for the pagination

$('#pagination_container').bootpag({
    total: ${myOrdersData.totalNumberOfPages},
    leaps: true,
    firstLastUse: true,
    first: '| &lt;',
    last: '&gt; |',
    wrapClass: 'pagination',
    activeClass: 'active',
    disabledClass: 'disabled',
    nextClass: 'next',
    prevClass: 'prev',
    lastClass: 'last',
    firstClass: 'first'
})
  .on("page", function(event, /* page number here */ num){
    $.ajax({
      type:"get",
      url: "ordersByPageNumber?pageNumber="+num,
    })
    .done(function(data) {
     $("#previousOrders").html( data );
    });
  });

The pagination works fine its just the addition of the rel attributes on the links.

Edited for clarification

<ul class="pagination bootpag">
<li data-lp="1" class="first" rel="prev">
  <a href="javascript:void(0);">| &lt;</a>
</li>
<li data-lp="1" class="prev" rel="prev">
  <a href="javascript:void(0);">&lt;</a>
</li>
<li data-lp="1" class="">
  <a href="javascript:void(0);">1</a>
</li>
<li data-lp="2" rel="next" class="active">
  <a href="javascript:void(0);">2</a>
</li>
<li data-lp="3" rel="next">
  <a href="javascript:void(0);">3</a>
</li>
<li data-lp="3" class="next" rel="next">
  <a href="javascript:void(0);">&gt;</a>
</li><li data-lp="3" class="last" rel="next">
  <a href="javascript:void(0);">&gt; |</a>
</li>
</ul>

the rel attribute displays as I want but when i use the pagination I need the attribute values to change based on the link with the active class. so for example if (3) is active (1) & (2) would be rel="prev", If I go back to (1) . (2)&(3) would be rel="next" as it stands they stay them same no matter what link is active. — user1428451

Ted Ted · Accepted Answer · 2015-06-04T15:38:52

Based on the above code, something like this in your 'page' event handler:

.on("page", function(event, /* page number here */ num){

    var $lis = $('.bootpag li').not('.first, .last, .prev, .next'),
        $active = $('.bootpag li.active');

    $lis.removeAttr('rel');
    $active.prev().attr('rel', 'prev');
    $active.next().attr('rel', 'next');

    ...the rest of your code

Adding rel= attributes to Bootpag Pagination for SEO

1 Answers