CODEWITHSUNDEEP
javascriptjqueryhtmlbackbone.jsunderscore.js
user2766267
user2766267

Reputation: 57

issue in setting value with javascript

Hello guys I am making pagination in javascript (backbone.js) this is the overall template: (http://jsfiddle.net/LQg7W/2151/ this jsfiddle is without css of course)

 <ul class="pagination">
        <li class="arrow unavailable"><a href="">Previous</a></li>
        <li class="current"><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li class="unavailable"><a href="">&hellip;</a></li>
        <li><a href="">12</a></li>
        <li><a href="">13</a></li>
        <li class="arrow"><a href="">Next</a></li>
      </ul>

Suppose i want to have 10 pages, so I want to limit it with certain number of pages with for loop. so I am trying to change the above code but the code that I wrote does not work and something is wrong with javascript part. Since I am working in a complex system the error does not say much. Any idea?

<ul class="pagination">
        <li class="arrow unavailable"><a href="">Previous</a></li>
        <li class="current"><a href="">1</a></li>
         <% 
            for(var i = 0; i < 10; ++i){ %>
                <li><a href="">i</a></li>
            <%  }
        }
    %>

        <li class="arrow"><a href="">Next</a></li>
      </ul>

Upvotes: 0

Views: 73

Answers (1)

Ivar
Ivar

Reputation: 4901

Iterating in template:

<script type="text/template" id="test">
    <% for(var i = 0; i < 10; i++){ %>
        <% if(i === 0){ %>
            <li><a href="">First value</a></li>
        <% } else if(i > 0 && i < 9){ %>
            <li><a href=""> <%= i+1%> </a></li>
        <% } else { %>
            <li><a href="">Last value</a></li>
        <% } %>
    <% } %>
</script>

Although this just extracts iteration value and does not reflect your results, so you should pass some sort of results object to template and operate on those:

HTML:
<ul class="pagination"></ul>

JS:
var compiled = _.template($('#test').html());
$('.pagination').html( compiled({offset:0,max:10,total:100}) )

Then update template to use those values.

EDIT:

So if you have 10000 pages and pass them all to template jsfiddle:

$('.pagination').html( compiled({pages:['page1','page2', ..., 'page10000']}) )

// update template
<script type="text/template" id="test">
    <% _.each(pages,function(page,i){ %>
        <% if(i === 0){ %>
            <li><a href="<%= page %>">First</a></li>
        <% } else if(i > 0 && i < 5){ %>
            <li><a href="<%= page %>"> <%= i+1 %> </a></li>
        <% } else if(i > 4 && i < (pages.length - 5) && i < 6){ %>
            <li class="unavailable"><a href=""> &hellip; </a></li>
        <% } else if(i > (pages.length - 6) && i !== (pages.length - 1) ){ %>
            <li><a href="<%= page %>"> <%= i+1 %> </a></li>
        <% } else if((pages.length - 1) === i){ %>
            <li><a href="<%= page %>">Last</a></li>
        <% } %>
    <% }) %>
</script>

Upvotes: 1

Related Questions