pagination
Advanced tools
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | ||
| "http://www.w3.org/TR/html4/loose.dtd"> | ||
| <html> | ||
| <head> | ||
| <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> | ||
| <script src="../release/pagination.full.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="paging"> | ||
| </div> | ||
| <script type="text/html" id="pagination-template"> | ||
| <ul class="pagination"> | ||
| <% if (first) { %> | ||
| <li><a href="<%=preparedPreLink + first %>">««</a></li> | ||
| <% } %> | ||
| <% if (previous) {%> | ||
| <li><a href="<%=preparedPreLink + previous %>">«</a></li> | ||
| <% } %> | ||
| <% for ( var i = 0; i < range.length; i++ ) { | ||
| if (i == current) {%> | ||
| <li class="active"><a href="<%=preparedPreLink %><%=range[i]%>" ><%=range[i]%></a></li> | ||
| <% } else { %> | ||
| <li><a href="<%=preparedPreLink %><%=range[i]%>" ><%=range[i]%></a></li> | ||
| <% } } %> | ||
| <% if (next) { %> | ||
| <li><a href="<%=preparedPreLink + next %>">»</a></li> | ||
| <% } %> | ||
| <% if (last) {%> | ||
| <li><a href="<%=preparedPreLink + last %>">»»</a></li> | ||
| <% } %> | ||
| </ul> | ||
| </script> | ||
| <script type="text/javascript"> | ||
| (function() { | ||
| var paginator = new pagination.TemplatePaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020, slashSeparator: true, template: document.getElementById("pagination-template").innerHTML}); | ||
| var html = paginator.render(); | ||
| console.log(html); | ||
| document.getElementById("paging").innerHTML = html; | ||
| })(); | ||
| </script> | ||
| </body> | ||
| </html> |
+34
| pagination = require('./index.js') | ||
| var boostrapPaginator = new pagination.TemplatePaginator({ | ||
| prelink:'/', current: 3, rowsPerPage: 200, | ||
| totalResult: 10020, slashSeparator: true, | ||
| template: function(result) { | ||
| var i, len, prelink; | ||
| var html = '<div><ul class="pagination">'; | ||
| if(result.pageCount < 2) { | ||
| html += '</ul></div>'; | ||
| return html; | ||
| } | ||
| prelink = this.preparePreLink(result.prelink); | ||
| if(result.previous) { | ||
| html += '<li><a href="' + prelink + result.previous + '">' + this.options.translator('PREVIOUS') + '</a></li>'; | ||
| } | ||
| if(result.range.length) { | ||
| for( i = 0, len = result.range.length; i < len; i++) { | ||
| if(result.range[i] === result.current) { | ||
| html += '<li class="active"><a href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>'; | ||
| } else { | ||
| html += '<li><a href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>'; | ||
| } | ||
| } | ||
| } | ||
| if(result.next) { | ||
| html += '<li><a href="' + prelink + result.next + '" class="paginator-next">' + this.options.translator('NEXT') + '</a></li>'; | ||
| } | ||
| html += '</ul></div>'; | ||
| return html; | ||
| } | ||
| }); | ||
| console.log(boostrapPaginator.render()); |
+1
-1
@@ -14,3 +14,3 @@ { | ||
| }, | ||
| "version": "0.4.2", | ||
| "version": "0.4.3", | ||
| "scripts": { | ||
@@ -17,0 +17,0 @@ "test": "vows --spec tests/*" |
+38
-16
@@ -14,2 +14,39 @@ ## pagination | ||
| ### Or customized renderer | ||
| This example show how to generate markup for twitter boostrap, see example/twitter.html for template rendering | ||
| var pagination = require('pagination') | ||
| var boostrapPaginator = new pagination.TemplatePaginator({ | ||
| prelink:'/', current: 3, rowsPerPage: 200, | ||
| totalResult: 10020, slashSeparator: true, | ||
| template: function(result) { | ||
| var i, len, prelink; | ||
| var html = '<div><ul class="pagination">'; | ||
| if(result.pageCount < 2) { | ||
| html += '</ul></div>'; | ||
| return html; | ||
| } | ||
| prelink = this.preparePreLink(result.prelink); | ||
| if(result.previous) { | ||
| html += '<li><a href="' + prelink + result.previous + '">' + this.options.translator('PREVIOUS') + '</a></li>'; | ||
| } | ||
| if(result.range.length) { | ||
| for( i = 0, len = result.range.length; i < len; i++) { | ||
| if(result.range[i] === result.current) { | ||
| html += '<li class="active"><a href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>'; | ||
| } else { | ||
| html += '<li><a href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>'; | ||
| } | ||
| } | ||
| } | ||
| if(result.next) { | ||
| html += '<li><a href="' + prelink + result.next + '" class="paginator-next">' + this.options.translator('NEXT') + '</a></li>'; | ||
| } | ||
| html += '</ul></div>'; | ||
| return html; | ||
| } | ||
| }); | ||
| console.log(boostrapPaginator.render()); | ||
| ### OR | ||
@@ -32,17 +69,2 @@ | ||
| ### OR | ||
| var pagination = require('pagination'); | ||
| var paginator = new pagination.ItemPaginator({prelink:'/', slashSeparator: true, current: 3, rowsPerPage: 200, totalResult: 10020}); | ||
| console.log(paginator.render()); | ||
| // output (without newlines) | ||
| <div class="paginator"> | ||
| <span class="paginator-current-report">Results 401 - 600 of 10020</span> | ||
| <a href="/page/1" class="paginator-first">First</a> | ||
| <a href="/page/2" class="paginator-previous">Previous</a> | ||
| <a href="/page/4" class="paginator-next">Next</a> | ||
| <a href="/page/51" class="paginator-last">Last</a> | ||
| </div> | ||
| ### OR need data from the calculation | ||
@@ -205,2 +227,2 @@ | ||
| ## Acknowledgements | ||
| Template engine is taking mostly from https://github.com/vanng822/ejs which is a fork of https://github.com/visionmedia/ejs | ||
| Template engine is taking mostly from https://github.com/vanng822/ejs which is a fork of https://github.com/visionmedia/ejs |
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
91203
3.95%39
5.41%1330
2.39%226
11.33%