4

I have list of pagination from ajax response. how to hide the later pages and show pagination according the limiter.

If the limiter is 5 have to show only 10 page links and hide later pages.

1 2 3 4 5 6 7 8 9 10 .. next

11 12 13 14 15.. next

I have tried to count the li length from the ajax response it doesn't show the count. how to get the count and hide and show later pages.

output:

next_page_num: <li>1</li><li>2</li><li>3</li><li>5</li><li>6</li><li>7</li>..



  success: function(response){  
                $("#listing_products").html("");
                $("#listing_products").html(response.html_content);
                $("ul.pagination").html("");
                $("ul.pagination").html(response.next_page_num);

                if(page_limit==5){

                    var product_listing_count = response.next_page_num;



                    if($(product_listing_count).length>8){

//How to hide after 8th pages and hide later pages add next to 8th page

 ));

                    }               

                    $("ul.pagination").html("");
                    $("ul.pagination").html(response.next_page_num);

                }
nick
  • 39
  • 5

2 Answers2

1

vanilla JS solution here, in which I used

  • regular expression

    var regex = /<li[^>]*>\d+<\/li[^>]*>/g

    This matches any pattern like <li>digits</li>

  • String.prototype.match, which gets me an array of results that matches the pattern above

  • Array.prototype.slice, which gets my the first limitTo items (in this case, 5)

  • ...Spread operator, which helps me easily concatenate two arrays

  • And, lastly, Array.prototype.join, which helps me get my array back into a string

Working solution: 

var regex = /<li[^>]*>\d+<\/li[^>]*>/g
var product_listing_count = "<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li>"
var productListingAsArray = product_listing_count.match(regex);
var limitTo = 5;
var continuousDots = "<li>...</li>"
var nextItem = "<li>next</li>"
var resultingArray = [...productListingAsArray.slice(0,limitTo),continuousDots,nextItem];
console.log(resultingArray.join(""));
Adelin
  • 7,809
  • 5
  • 37
  • 65
  • I love [that answer about when regex should be used](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454) – Lucas Jul 11 '18 at 11:50
  • No, just follow the link and you will understand, haha ! – Lucas Jul 11 '18 at 11:52
  • That's a minor detail which you can adjust yourself. Added something but that's up to you – Adelin Jul 11 '18 at 12:39
1

It's because the $.fn.find function go through the children nodes of an element, so if there's no parent like <ul> there's no children...

Then:

$('<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>')
    .find('li').length;

returns 6

And:

$('<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>')
    .find('li').length;

returns 0

A simple way to get the length would be a split/length:

'<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>'
    .split('<li>').length - 1; 
 //-1 because there will be always a empty entry in the array

returns 6

Or like Adelin sugested, use RegExp:

 '<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>'
      .match(/(<li>)/g).length

returns 6

Lucas
  • 1,259
  • 15
  • 25