I am displaying pagination in my application using following javascript,its working fine for me, but i need to break the pagination after 5 pages
This is my existing pagination
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
but i need to display the pagination by following
1 2 3 4 5 ......15 16 17 18 19 20
if i click on page number 5 then it should add another 5 pages to current page
My Javscript like this
<script type="text/javascript">
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> <img src="${ctx}/images/prev.PNG" alt=" « Prev" height="17px" width="26px" style="vertical-align: middle;"/> </span> ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> <img src="${ctx}/images/nexts.png" alt="Next »" height="17px" width="26px" style="vertical-align: middle;"/></span>';
element.innerHTML = pagerHtml;
}
}
</script>
if any suggestion it will be appreciable
here is the JSfiddle
Here is a new jsfiddle doing what you want to do:
http://jsfiddle.net/nye7a/2/
The showPageNav function has been changed like this :
this.showPageNav = function(pagerName, positionId) {
var pageIndex = this.currentPage,
pageCount = this.pages,
start = Math.max(1, pageIndex - 4),
end = Math.min(pageCount, pageIndex + 4),
start2 = pageCount-4,
end2 = pageCount;
if (start2 <= end)
end = pageCount;
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '';
// adds the Prev button only if needed
if (pageIndex > 1)
pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';
// paging from 1 to 5
for (var page = start; page <= end; page++) {
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';
}
// paging from pageCount-5 to pageCount
if (end != pageCount) {
pagerHtml += '<span>...</span>';
for (var page = start2; page <= end2; page++) {
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';
}
}
// adds the Next button only if needed
if (pageIndex < pageCount && pageCount > 1)
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
Related
I have 3 js functions passing into each other for a blackjack game,
Hit() - Which gets a new card
checkCard() - which checks the card isnt in the users hand already
userTotal () - totals the value of the card and displays it in the DOM
The same card can appear more than once. the major flaw is with checking the card against others in an array of userCards
My logic is wrong. Could someone help me?
function hit() {
var cards = 2;
userIndex++;
var rankSelect = Math.floor(Math.random() * 13);
var suitSelect = Math.floor(Math.random() * 4);
var card = (rank[rankSelect] + suit[suitSelect]);
checkCard(card);
}
function checkCard(card) {
//if card = card in used array, select new card
for (i=0;i<=userCards.length;i++){
if (card = userCards[i] ) {
//selectCards(card)
var newRank = Math.floor(Math.random()*13);
var newSuit = Math.floor(Math.random()*4);
var newCard = (rank[newRank] + suit[newSuit]);
document.getElementById('userCards').innerHTML += "<td id=" + "UserCard" + "><img src="+"includes/images/cards/"+ newCard + ".png >"
userCards[userCards.length] = newCard;
userTotal();
} else {
userCards[userIndex] = card;
document.getElementById('userCards').innerHTML += "<td id=" + "UserCard" + "><img src="+"includes/images/cards/"+ card + ".png >"
userTotal();
}
}
}
function userTotal(userTotal){
var userTotal = 0;
for (i=0;i<userCards.length;i++){
var value = userCards[i];
if(userCards[i].charAt(0) == "a"){
value = parseInt((prompt("ACE, 1 or 11?")));
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
} else if (userCards[i].charAt(0) == "k" || userCards[i].charAt(0) == "q" || userCards[i].charAt(0) == "j"){
value = 10;
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
}else if (userCards[i].charAt(0) == "1" || userCards[i].charAt(1) == "0"){
value = 10;
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
} else {
value = parseInt(userCards[i].charAt(0));
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
}
if (userTotal > 21){
document.getElementById("userTotal").innerHTML = "Bust";
//document.getElementById("hit").disabled = true;
}
}
}
When you are inside 'checkCard' and if you get a card already in hand then you are again fetching a random card but this time you are not checking whether its already in hand or not.
You need to keep checking card until you won't get a fresh one.
replace this line :
var newCard = (rank[newRank] + suit[newSuit]);
with
card = (rank[newRank] + suit[newSuit]);
checkCard(card);
Try below :
function hit() {
var cards = 2;
userIndex++;
var rankSelect = Math.floor(Math.random() * 13);
var suitSelect = Math.floor(Math.random() * 4);
var card = (rank[rankSelect] + suit[suitSelect]);
checkCard(card);
}
function checkCard(card) {
//if card = card in used array, select new card
for (i = 0; i <= userCards.length; i++) {
if (card = userCards[i]) {
//selectCards(card)
var newRank = Math.floor(Math.random() * 13);
var newSuit = Math.floor(Math.random() * 4);
card = (rank[newRank] + suit[newSuit]);
chekCard(card);
document.getElementById('userCards').innerHTML += "<td id=" + "UserCard" + "><img src=" + "includes/images/cards/" + card + ".png >"
userCards[userCards.length] = card;
userTotal();
} else {
userCards[userIndex] = card;
document.getElementById('userCards').innerHTML += "<td id=" + "UserCard" + "><img src=" + "includes/images/cards/" + card + ".png >"
userTotal();
}
}
}
function userTotal(userTotal) {
var userTotal = 0;
for (i = 0; i < userCards.length; i++) {
var value = userCards[i];
if (userCards[i].charAt(0) == "a") {
value = parseInt((prompt("ACE, 1 or 11?")));
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
} else if (userCards[i].charAt(0) == "k" || userCards[i].charAt(0) == "q" || userCards[i].charAt(0) == "j") {
value = 10;
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
} else if (userCards[i].charAt(0) == "1" || userCards[i].charAt(1) == "0") {
value = 10;
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
} else {
value = parseInt(userCards[i].charAt(0));
userTotal = userTotal + value;
document.getElementById("userTotal").innerHTML = userTotal;
}
if (userTotal > 21) {
document.getElementById("userTotal").innerHTML = "Bust";
//document.getElementById("hit").disabled = true;
}
}
}
I have problem here with the JavaScript code below. I am unable to pass the w3 xhtml validator when this JavaScript code is included in my document.
Error output:
Error Line 224, Column 77: document type does not allow element "span" here
'<span onclick="' + pagerName + '.prev();" class="pg-normal"> ?Prev </span> ';
Error Line 228, Column 27: character "'" is not allowed in the value of attribute "id"
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerNam…
Error Line 228, Column 28: value of attribute "id" must be a single token
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerNam…
Error Line 228, Column 29: character "+" is not allowed in the value of attribute "id"
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerNam…
Error Line 243, Column 43: there is no attribute "align"
<table id="tablepaging" class="yui" align="center">
JavaScript code below
<script type="text/javascript">
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i > rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> ?Prev </span> ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' +
page + '</span> ';
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next ?/span>';
element.innerHTML = pagerHtml;
}
}
</script>
I havent done this for a long time, but you can wrap you script like this:
<script type="javascript">
//<![CDATA[
//Your JS Code
//]]>
</script>
This will stop W3C validator from parsing your JS as markup.
i just build a video gallery
Here is the link to the video gallery
http://www.braddockinfotech.com/demo/dvnonline/vod1/
Two issues : :
1) While navigating through the gallery using up and down arrow keys there is kind of video jump or flicker.how to remove that
2)Unequal extra spaces before and after the first and last video in gallery.
Here is the html code
<body onkeydown="HandleKeyDown(event);">
<table cellpadding="0px" cellspacing="0px" border="0px" class="sitewidth">
<tr>
<td align="left" valign="top" style="width:800px;">
<div id='divVideoPlayer'></div>
</td>
<td align="center" style="width:140px;">
<div id="divPlaylistContainer">
<div id="playlistNavPrev">
<a id="imgNavPrev" onclick="MoveToDirection('Up');"><span class="arrow"> </span>
</a>
</div>
<div id="divPlaylist">
<!--playlist-->
<div id="spanSlider" style='top:0px; position:relative;'>
<ul id="ulSlider">
<?php $index=1 ; $firstVideoUrl='' ; $firstImageUrl='' ; $videoDetails=G
etVideoDetails(); echo "<script> var siteUrl = '".$siteUrl.
"' </script>"; while ($row=m ysql_fetch_array($videoDetails)) { echo
"<script>video[".$index. "]='";echo $row[3]. "';</script>"; echo "<script>image[".$index.
"]='";echo $row[2]. "';</script>"; //echo "<script>title[".$index. "]='";echo
$row[1]. "';</script>"; echo "<script>title[".$index. "]='";echo str_replace(
"'", "\'",$row[1]). "';</script>"; // 0 - id , 1 - Title , 2- ImageUrl, 3
- VideoUrl //echo $row[0].$row[1].$row[2].$row[3]. "<br/>"; //echo
"<li id='liButton_".$index. "'><a onclick=\"ShowVideo( '".$index."');\
"><img id='ImageButton_".$index. "' title='".$row[1]. "' alt='".$row[1]. "' src=".$siteUrl.
"timthumb/timthumb.php?src=".$row[2]. "&h=54&w=109&zc=1&a=c></a></li>"; $index++;
} ?>
</ul>
</div>
</div>
<div id="playlistNavNxt">
<a id="imgNavNext" onclick="MoveToDirection('Down');"><span class="arrow"> </span>
</a>
</div>
</div>
</td>
</table>
</body>
Here is the javascript code..
var video = new Array();
var image = new Array();
var title = new Array();
var noOfImagesCanShow = 6;
var selected = 1;
var slideNo = 1;
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, "");
};
function SetPlayList() {
var listHtml = '';
var lastIndex = slideNo * noOfImagesCanShow;
var firstIndex = (slideNo * noOfImagesCanShow) - (noOfImagesCanShow - 1);
var rowNo = 1;
for (var i = firstIndex; i <= lastIndex; i++) {
if (firstIndex >= 1 && lastIndex < title.length) {
listHtml += "<li id='liButton_" + rowNo + "'><a onclick=\"ShowVideo('" + i + "');\"><img id='ImageButton_" + i + "' title=\"" + title[i] + "\" alt='" + title[i] + "' src=" + siteUrl + "timthumb/timthumb.php?src=" + image[(i)] + "&h=54&w=109&zc=1&a=c></a></li>";
rowNo++;
}
}
document.getElementById('ulSlider').innerHTML = listHtml;
document.getElementById('liButton_1').tabIndex = 2;
document.getElementById('liButton_1').focus();
}
function ShowVideo(videoIndex) {
var streamToBeUsed = "";
var provideType = "";
if (video[videoIndex].trim().substring(0, 7) == "http://") {
streamToBeUsed = '';
provideType = "http";
} else {
streamToBeUsed = "rtmp://cp87191.edgefcs.net/ondemand/";
provideType = "rtmp";
}
var autostart = "true";
if (jwplayer("divVideoPlayer") != null) {
jwplayer("divVideoPlayer").stop();
}
jwplayer("divVideoPlayer").setup({
file: streamToBeUsed + video[videoIndex].trim(),
image: image[videoIndex],
icons: "true",
autostart: autostart,
screencolor: "black",
'width': '800',
'height': '510',
streamer: streamToBeUsed,
provider: provideType,
events: {
onBeforePlay: function () {
document.getElementById('liButton_' + videoIndex).tabIndex = '2';
document.getElementById('liButton_' + videoIndex).focus();
}
}
});
// clearing all style
var totalImages = noOfImagesCanShow;
for (var i = 1; i <= totalImages; i++) {
var imageId = (((slideNo * noOfImagesCanShow) - (noOfImagesCanShow)) + i).toString();
if (document.getElementById('liButton_' + i) != null && document.getElementById('ImageButton_' + imageId) != null) {
document.getElementById('liButton_' + i).className = 'inactiveli';
document.getElementById('ImageButton_' + imageId).className = 'inactive';
}
}
document.getElementById('liButton_' + videoIndex).className = 'activeli';
document.getElementById('ImageButton_' + (((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex)).toString()).className = 'active';
SetButtonStatus(((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex));
document.getElementById('liButton_' + videoIndex).tabIndex = '2';
document.getElementById('liButton_' + videoIndex).focus();
document.getElementById('divVideoPlayer').tabIndex = '-1';
}
function SetButtonStatus(imageIndex) {
if (imageIndex <= noOfImagesCanShow) {
document.getElementById('imgNavPrev').className = 'disable_up';
document.getElementById('imgNavPrev').tabIndex = '-1';
document.getElementById('imgNavNext').tabIndex = '3';
} else {
document.getElementById('imgNavPrev').className = 'enable_up';
document.getElementById('imgNavPrev').tabIndex = '1';
}
if (imageIndex > (image.length - noOfImagesCanShow)) {
document.getElementById('imgNavNext').className = 'disable_down';
document.getElementById('imgNavNext').tabIndex = '-1';
document.getElementById('imgNavPrev').tabIndex = '1';
} else {
document.getElementById('imgNavNext').className = 'enable_down';
document.getElementById('imgNavNext').tabIndex = '3';
}
}
function MoveToDirection(direction) {
if (direction == 'Down') {
if (document.getElementById('imgNavNext').className != 'disable_down') {
slideNo++;
SetButtonStatus(slideNo * noOfImagesCanShow);
SetPlayList();
var topEle = document.getElementById('liButton_1');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'active';
}
} else if (direction == 'Up') {
if (document.getElementById('imgNavPrev').className != 'disable_up') {
slideNo--;
SetButtonStatus(slideNo * noOfImagesCanShow);
SetPlayList();
var topEle = document.getElementById('liButton_6');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'active';
console.log('Setting active element ' + nextSelImgId);
document.getElementById('liButton_6').focus();
console.log('active element ' + document.activeElement.id);
}
}
}
function HandleKeyDown(ev) {
if (document.activeElement != null) {
var element = document.activeElement;
if (ev.keyCode == 13) {
/*User Pressed Enter, Handle If required*/
if (element.id == "imgNavNext" && element.className != "disable_down") {
MoveToDirection('Down');
} else if (element.id == "imgNavPrev" && element.className != "disable_up") {
MoveToDirection('Up');
} else if (element.id.indexOf("liButton_") > -1) {
var nameSections = element.id.split('_');
ShowVideo(nameSections[1]);
}
} else if (ev.keyCode == 40) {
/*User Pressed Down*/
console.log('Pressed Down');
console.log('Element Id is ' + element.id);
if (element.id.indexOf("liButton_") > -1) {
console.log('Entered liButton_ Checking....');
var nameSections = element.id.split('_');
var imgName = element.getElementsByTagName("img")[0].getAttribute("id");
var imgSection = imgName.split('_');
var nextImgToFocus = (parseInt(imgSection[1])) + 1;
var nextIndexToFocus = (parseInt(nameSections[1])) + 1;
if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
element.tabIndex = "-1";
document.getElementById("ImageButton_" + nextImgToFocus).className = 'active';
document.getElementById("ImageButton_" + (nextImgToFocus - 1)).className = 'inactive';
document.getElementById("liButton_" + nextIndexToFocus).focus();
} else //need to focus in navNext
{
if (document.getElementById('imgNavNext').className != 'disable_down') {
console.log("Enetred need to focus navNext");
var topEle = document.getElementById('liButton_6');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'inactive';
document.getElementById('imgNavNext').focus();
}
}
} else {
if (element.id.indexOf("imgNavPrev") > -1) {
document.getElementById("liButton_1").focus();
}
}
} else if (ev.keyCode == 38) {
/*User Pressed Up Up*/
if (element.id.indexOf("liButton_") > -1) {
console.log('Up pressed ' + element.id);
var nameSections = element.id.split('_');
var imgName = element.getElementsByTagName("img")[0].getAttribute("id");
var imgSection = imgName.split('_');
var nextImgToFocus = (parseInt(imgSection[1])) - 1;
var nextIndexToFocus = (parseInt(nameSections[1])) - 1;
if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
element.tabIndex = "-1";
document.getElementById("ImageButton_" + nextImgToFocus).className = 'active';
document.getElementById("ImageButton_" + (nextImgToFocus + 1)).className = 'inactive';
document.getElementById("liButton_" + nextIndexToFocus).focus();
} else //need to focus in navPrev
{
if (document.getElementById('imgNavPrev').className != 'disable_up') {
var topEle = document.getElementById('liButton_1');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'inactive';
document.getElementById('imgNavPrev').focus();
}
}
} else /* To handle up button from imgNavNext */
{
if (element.id.indexOf("imgNavNext") > -1) {
document.getElementById("liButton_6").focus();
}
}
}
}
}
The reason, I believe, the images flicker is because they aren't loaded until the button is clicked.
for (var i = firstIndex; i <= lastIndex; i++) {
if (firstIndex >= 1 && lastIndex < title.length) {
listHtml += "<li id='liButton_" + rowNo + "'><a onclick=\"ShowVideo('" + i + "');\"><img id='ImageButton_" + i + "' title=\"" + title[i] + "\" alt='" + title[i] + "' src=" + siteUrl + "timthumb/timthumb.php?src=" + image[(i)] + "&h=54&w=109&zc=1&a=c></a></li>";
rowNo++;
}
}
When the view is scrolled up or down, the list regenerates, and the images are loaded.
You can prevent the flicker if you preload the images.
You can do this by preloading all of the images at once or by loading the images while showing a "loading (please wait) graphic." Please see this http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
first of all, to be clear i am a newbie with javascript and jquery.
now, i am using a javascript file to paginate inside a div. the script works fine, but if there is a lot of data then i need to limit the paginating links with a "next" and a "previous" tag. i can't find a way to do that. currently the pagination script is showing all the numbers like 1 2 3 4 5 6 7 8 9 etc depending on the data supplied. but, i want to show them like, 1 2 3 4 5 next>> or, <<prev 2 3 4 5 6 next>>
here is my pagination.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 = "";
for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) {
if (i < this.paragraphs.length) {
var elem = this.paragraphs.get(i);
html += "<" + elem.tagName + ">" + elem.innerHTML + "</" + elem.tagName + ">";
}
}
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
var pagingControls = "<b>Pages</b>: <ul>";
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);
}
}
to get the desired look, how do i edit this script?if anyone could help me with it, please do so.
You could change renderControls like this:
var renderControls = function(container, currentPage, numPages, pagesCutoff) {
var pagingControls = "<b>Pages</b>: <ul>";
var prevPosition = currentPage - pagesCutoff;
var nextPosition = currentPage + pagesCutoff;
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
if(i >= prevPosition && i <= nextPosition) {
var linkToPage = i == prevPosition ? currentPage - 1 : i == nextPosition ? currentPage + 1 : i;
var linkText = i == prevPosition ? "<< prev" : i == nextPosition ? "next >>" : i;
pagingControls += "<li><a href='#' onclick='pager.showPage(" + linkToPage + "); return false;'>" + linkText + "</a></li>";
}
} else {
pagingControls += "<li>" + i + "</li>";
}
}
pagingControls += "</ul>";
$(container).html(pagingControls);
}
And add this to Imtech.Pager: this.pageLinksEachSide = 3;
And change the renderControls call to this: renderControls(this.pagingControlsContainer, this.currentPage, this.numPages(), this.pageLinksEachSide);
This is assuming that you want the "next" link to navigate to currentPage + 1 and the "prev" link to navigate to currentPage - 1.
i have this .js file for the pagination in html anybody can help me what i have to change to show the different url for each page & user can save that url & can use it for future use to go on that specific page.
(.js file start from below)
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
}
in this.showPage() update the url hash with something like "pg=1":
location.hash = "#pg=" + pageNumber;
That method will add an item to your page history. If you don't want to add an item to your page history, use this:
location.replace("#pg=" + pageNumber);
Then, when the page is loaded, after you call pager.init(), you'll want to call pager.showPage(). You can use this code to decide whether to load the first page or the page from the url::
var page = /\bpg=(\d+)\b/.test(location.hash) ? parseInt(RegExp.$1) : 1;
pager.showPage(page);