---
title: "typ paging"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/70065-typ-paging"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "kbking"
published: "2003-03-04T20:02:07.000Z"
updated: "2003-03-22T18:27:48.000Z"
replies: 14
views: 387
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/70065-typ-paging"
---

# typ paging

## #1 — kbking, 2003-03-04T20:02Z

Jag har delat upp ett långt html-dokument i tio delar, ava1 - ava10.

Går det med javascript att ha en framåt- och en bakåt-knapp på ömse sidor om siffrorna 1, 2, ..., 10, typ paging alltså? Hur i så fall

Om det vill till asp-kod,  kan någon visa hur man gör med ett exempelscript, tack!

De 10 ava.htm filerna ligger i rotmappen ame

Var gärna mycket utförlig!

Hälsn

kbking

Permalänk: https://www.webforum.nu/p/70065

## #2 — solbulle, 2003-03-04T21:21Z

**Välkommen till wF!** 

Om det nu är hårdkodade html-filer, varför då inte bara hårdkoda länkarna?

Permalänk: https://www.webforum.nu/p/968045

## #3 — kbking, 2003-03-05T17:40Z

Tack!

Det jag ville ha var två knappar, Tillbaka resp. Nästa.  Med javascript går det väl inte, eller hur? Gå fram och tillbaka använder jag, men det fungerar som jag förstått det endast på sidor jag varit på innan. För att styra det med en "Nästa-knapp" blir jag väl då tvungen att ha lika många knappar som jag har sidor?

Permalänk: https://www.webforum.nu/p/968719

## #4 — Peter S, 2003-03-05T18:12Z

Någonting sådant här:

Låt sidan heta t.ex. "foo.html":

```
// Innanför <head> i "foo.html"
<script type="text/javascript">
<!--

function getQueryString(){
	return parseInt((location.search.substring(location.search.indexOf("=")+1, location.search.length)));
};

function construct(h, n, p){
	var previous = document.createElement("button");
	previous.innerHTML = "&laquo; Tillbaka";
	previous.onclick = function(){
		location.href = "foo.html?page=" + (p-1);
	}
	previous.disabled = (p < 2) ? true : false;

	var next = document.createElement("button");
	next.innerHTML = "Nästa &raquo;";
	next.onclick = function(){
		location.href = "foo.html?page=" + (p+1);
	}
	next.disabled = (p > 9) ? true : false;

	h.innerHTML = document.getElementById("_"+p).innerHTML;
	n.appendChild(previous);
	n.appendChild(next);
};

function load(){
	var holder = document.getElementById("holder");
	var nav = document.getElementById("nav");
	var page = getQueryString();

	construct(holder, nav, page);
};

window.onload = load;

//-->
</script>
...
// Innanför <body> i "foo.html":
<div style="display:none" id="_1">Texten på den första sidan...</div>
<div style="display:none" id="_2">Texten på den andra sidan...</div>

<div id="holder"></div>
<div id="nav"></div>
```

Länka sedan till t.ex. den första sidan så här: "foo.html?page=1".

 :)

Permalänk: https://www.webforum.nu/p/968753

## #5 — kbking, 2003-03-05T18:52Z

Tack så väldigt mycket!

Här känner man sig verkligen välkomnad!

Ska testa ditt bidrag nu.

Permalänk: https://www.webforum.nu/p/968782

## #6 — solbulle, 2003-03-05T19:05Z

Ah. "I fatt!" eller som man säger på svenska: Jag förstår. Det var en sån variant som skulle till, trodde det var 10 olika html-filer.

Snygg lösning Peter S.

Permalänk: https://www.webforum.nu/p/968799

## #7 — kbking, 2003-03-05T19:45Z

Har gjort testet, det fungerade klanderfritt.

Verkligen bussigt! 

Fungerar detta script oavsett  hur sidan är uppbyggda? 

Kan jag positionera knapparna hur som helst på sidan?

Går det att ersätta knapparna med egna giffar?

Permalänk: https://www.webforum.nu/p/968828

## #8 — Peter S, 2003-03-05T20:03Z

De både "div"-elementen ("nav" och "holder") kan du styla och placera var du vill på sidan.

Om du vill använda bilder istället för knappar får du göra några ändringar:

```
function construct(h, n, p){
	var previous = document.createElement("img");
	previous.src = "previous.png";
	previous.height = "30";
	previous.width = "50";
	previous.onmouseover = function(){
		this.style.cursor = "pointer";
	}
	previous.disabled = (p < 2) ? true : false;

	var next = document.createElement("img");
	next.src = "next.png";
	next.height = "30";
	next.width = "50";
	next.onmouseover = function(){
		this.style.cursor = "pointer";
	}
	next.onclick = function(){
		location.href = "foo.html?page=" + (p+1);
	}
	next.disabled = (p > 9) ? true : false;

	h.innerHTML = document.getElementById("_"+p).innerHTML;
	n.appendChild(previous);
	n.appendChild(next);
};
```

 :)

Permalänk: https://www.webforum.nu/p/968837

## #9 — kbking, 2003-03-05T20:15Z

Ära den som äras bör!

Kan inte undvika att fascineras av vilken kapacitet du har!
Jag har jämt sjå med att implementera allt!

Nu förstår jag kvaliteten på detta forum!

Hälsn

kbking

Permalänk: https://www.webforum.nu/p/968849

## #10 — kbking, 2003-03-08T18:56Z

Allting är på plats och fungerar precis som det var tänkt!

Vad behöver jag göra om jag vill länka in scriptet i dokumentet
istället?

Permalänk: https://www.webforum.nu/p/973644

## #11 — Peter S, 2003-03-08T19:28Z

Då lägger du all kod som står mellan \<script\> och \</script\> (exklusive kommentarerna: \<!-- och //--\>) i en vanlig textfil och sparar den som *namn*.js. Sedan skriver du följande innanför \<head\> och \</head\> i det aktuella dokumentet:

```
<script type="text/javascript" src="[i]namn[/i].js"></script>
```

 :)

Permalänk: https://www.webforum.nu/p/973659

## #12 — kbking, 2003-03-08T19:55Z

Utmärkt!

Bugar och tackar!

Permalänk: https://www.webforum.nu/p/973680

## #13 — kbking, 2003-03-21T08:20Z

Det fungerar alltså helt som jag hade tänkt.

Det jag undrar nu är om det går att klämma in pagineringen 1, 2, ..., 10 mellan de båda knapparna (och kanske att aktuell sida visas med fetstil)?

Om det är möjligt, hur gör jag?

Permalänk: https://www.webforum.nu/p/984894

## #14 — Peter S, 2003-03-22T14:25Z

Exempel:

```
<head>
<script type="text/javascript">
<!--

function getQueryString(){
	return parseInt((location.search.substring(location.search.indexOf("=")+1, location.search.length)));
};

function construct(h, n, p){
	var previous = document.createElement("button");
	previous.innerHTML = "« Tillbaka";
	previous.onclick = function(){
		location.href = "foo.html?page=" + (p-1);
	}
	previous.disabled = (p < 2) ? true : false;

	var next = document.createElement("button");
	next.innerHTML = "Nästa »";
	next.onclick = function(){
		location.href = "foo.html?page=" + (p+1);
	}
	next.disabled = (p > 9) ? true : false;

	h.innerHTML = document.getElementById("_"+p).innerHTML;
	n.appendChild(previous);

	n.appendChild(document.createTextNode(" "));

	for(var i=1; i<=10; i++){
		if(i == p) continue;

		var a = document.createElement("a");
		a.href = "foo.html?page=" + i;
		a.innerHTML = i;
		n.appendChild(a);

		if( i < 10 )
			n.appendChild(document.createTextNode("-"));
		else
			n.appendChild(document.createTextNode(" "));
	}

	n.appendChild(next);
};

function load(){
	var holder = document.getElementById("holder");
	var nav = document.getElementById("nav");
	var page = getQueryString();

	construct(holder, nav, page);
};

window.onload = load;

//-->
</script>
</head>

<div style="display:none" id="_1">Texten på den första sidan...</div>
<div style="display:none" id="_2">Texten på den andra sidan...</div>
<div style="display:none" id="_3">Texten på den tredje sidan...</div>

<div id="holder"></div>
<div id="nav"></div>
```

Koden utelämnar den aktuella sidan i själva pagineringen.

 :)

Permalänk: https://www.webforum.nu/p/985654

## #15 — kbking, 2003-03-22T18:27Z

Jag har varit från datorn ett tag, därav dröjsmålet med svaret.

Än en gång stort tack! 

 :)

Permalänk: https://www.webforum.nu/p/985809

---

Tråden på webben: https://www.webforum.nu/amne/javascript/70065-typ-paging
