Пейдженатор с помощью скриптов
Добрый вечер. Хотелось бы реализовать пейдженатор на скриптах.
чтобы выводилось что то вроде: Код:
prev 1 2 ... 4 5 6 ... 8 9 next <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <style> .pager a { margin: 0 5px; cursor: pointer; } .pager a.active { color: red; } </style> </head> <body> <div id="pager" class="pager"></div> <div id="curr-page"></div> <script type="text/javascript"> var currPage = 1; total = 22; function generateItems() { var items = '', i = 0; for (i; i < total; i++){ var p = i + 1; if (p < currPage + 2) { items += '<a data-page="'+(i+1)+'">'+(i+1)+'</a>'; } if (p == currPage + 2) { items += '<span>...</span>'; } if (p == currPage - 2) { items += '<span>...</span>'; } if (p > total - 2) { items += '<a data-page="'+(i+1)+'">'+(i+1)+'</a>'; } } $('#pager').html( '<a class="prev">prev</a>'+ items +'<a class="next">next</a>' ); } generateItems(); $('#curr-page').text( currPage ); $('#pager a[data-page="'+currPage+'"]').addClass('active'); $('#pager a').click(function(){ var currPage = $(this).data('page'); $('#curr-page').text( currPage ); }); $('#pager .next').click(function(){ var currPage = parseInt($('#curr-page').text()) + 1; if (currPage >= total) currPage = total; $('#curr-page').text( currPage ); $('#pager a').removeClass('active'); $('#pager a[data-page="'+currPage+'"]').addClass('active'); }); $('#pager .prev').click(function(){ var currPage = $('#curr-page').text() - 1; if (currPage <= 1) currPage = 1; $('#curr-page').text( currPage ); $('#pager a').removeClass('active'); $('#pager a[data-page="'+currPage+'"]').addClass('active'); }); </script> </body> </html> но вот как то дальше не идет.. |
пагинатор ...
piraids,
вариант... <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <style> .pager a { margin: 0 5px; cursor: pointer; } .pager a.active { color: red; } .page { margin: 0 5px; background-color: #D2691E; border-radius: 2px; padding: 4px; } span.cur{ margin: 0 5px; border-radius: 2px; padding: 4px; background-color: #40E0D0; } </style> </head> <body> <div id="pager" class="pager"></div> <div id="curr-page"></div> <script> var currPage = 1, total = 22; function pagination(num, limit, range) { range = range || 3; var arr = []; for (var i = 1; i <= limit; i++) if (i <= range || i > num - range / 2 && i < num + range / 2 || i > limit - range) { if (arr[arr.length - 1] && i != arr[arr.length - 1] + 1) arr.push("..."); arr.push(i) } return arr } function generateItems() { var items = pagination(currPage, total); items = items.map(function(el) { return el == currPage ? '<span class="cur" >' + el + "</span>" : el == "..." ? el : '<a class="page" data-page="' + el + '">' + el + "</a>" }).join(""); $("#pager").html('<a class="prev">prev</a>' + items + '<a class="next">next</a>'); $("#curr-page").text(currPage) } $(".pager").on("click", ".page", function(event) { event.preventDefault(); currPage = $(this).data("page"); generateItems() }); $(".pager").on("click", ".prev,.next", function(event) { event.preventDefault(); $(this).is(".prev") ? currPage-- : currPage++; currPage < 1 && (currPage = 1); currPage > total && (currPage = total); generateItems() }); generateItems(); </script> </body> </html> |
рони,
спасибо за код :victory: |
Часовой пояс GMT +3, время: 05:49. |