limit کردن اعداد این کد pagination در جیکوری

[comp90]

سلام ودرود:

من از pagination با استفاده از جیکوری استفاده کردم .

با استفاده از کد های imtech_pager این مورد رو ایجاد کردم الان موردی که هست این pagination کار می کنه ولی نمی دونم چه جوری محدودش کنم یعنی:

الان به این صورت کار می کنه page: 1 2 3 4 5 6 7 8 که با کلیک روی هر کدام از اعداد صفحه عوض میشه و بقیه موارد رو نشون میده اما می خوام ایجوری بشه یعنی:

فقط توی هر دید مثلا 4 تا از اعداد رو نشون بده و با کلیک روی عدد آخری یکی بره جلو یعنی اگه این باشه priv> 1 2 3 4 ... next

با کلیک روی عدد 4 اینجوری میشه priv 2 3 4 5 ... next

در کل از دو قطعه کد جاوا اسکریپت و یک قطعه کد html برای این مورد استفاده میشود لطفا اگر کسی وارد هست کمک کنه این مورد در کد جاووا اسکریپت حل بشه خیلی ممنون



<!--in imtech_pager.js -->

var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#content';

this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}

return numPages;
};

this.showPage = function(page) {
this.currentPage = page;
var html = '';

this.paragraphs.slice((page-1) * this.paragraphsPerPage,
((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
html += '<div>' + $(this).html() + '</div>';
});

$(this.pagingContainerPath).html(html);

renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}

var renderControls = function(container, currentPage, numPages) {
var pagingControls = 'Page: <ul style="margin-left: -10px;">';
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
} else {
pagingControls += '<li>' + i + '</li>';
}
}

pagingControls += '</ul>';

$(container).html(pagingControls);
}
}








<!--for pagination -->
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.paragraphsPerPage =12; // set amount elements per page
pager.pagingContainer = $('#content'); // set of main container
pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
pager.showPage(1);
});
<!-- jump script -->
$(document).ready(function() {
$(".jumper").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 600);
});
});






<div class="example">
<div id="content">
<div class="z">one</div>
<div class="z">tow</div>
.
.
.
<div class="z">three</div>

</div>
</div>

<div id="pagingControls"></div>

[meisam3322]

من که چیزی نفهمیدم !!!!!!

[comp90]

ببینید در کل می خوام بشه این ولی روی همین کد:

141867

141868

(پاسخ به خودم : خب مرد حسابی اینا از اول بگو :لبخند:)

[Moien Tajik]

اگر از asp.net mvc استفاده میکنید ، از پکیج PagedList میتونید با اسفاده از این کد و عوض کردن PagedListRenderOptions شکل pagination رو عوض کنید :


@Html.PagedListPager(Model, page => Url.Action("Index", new { page }),PagedListRenderOptions.MinimalWithItemCountText )



این لینک هم کمکتون میکنه : http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-pagination.php