The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> sort by with button
hokss
post Oct 30 2011, 07:01 PM
Post #1





Group: Members
Posts: 4
Joined: 30-October 11
Member No.: 15,740



i'm building some small website for myself and have stuck with sorting text in my website: what i want to get is sorting function so i can sort may contest wit button 1st - a to z 2nd by date. can some wan explain me have to do that.

website luck like that :

<h1> title </h1>

here i want to put button 1
here i want to put button 2

<h2> title1</h2>
<p> date1</p>
<p>text1</p>
<hr/>

<h2> title2</h2>
<p> date2</p>
<p>text2</p>
<hr/>

<h2> title3</h2>
<p> date3</p>
<p>text3</p>
<hr/>

i really stuck with this - if needed i can put all in tables. like:

<table>
<tr>
<td>
<h2> title1</h2>
<p> date1</p>
<p>text1</p>
</td>
</tr>
</table>
<hr/>

please help me it's very important for me.

This post has been edited by hokss: Oct 30 2011, 07:02 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 31 2011, 04:40 AM
Post #2


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



HTML does not "do" things like sorting. You either need to have a server script that produces the various versions as different pages (or with different query strings, such as mypage.html?sort=name : this is a simple programming job). Or you need javascript to do the sorting on the user's computer -- you may find some plug-in script to do this; try searching for "javascript sorting table".

HTH
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hokss
post Oct 31 2011, 11:43 AM
Post #3





Group: Members
Posts: 4
Joined: 30-October 11
Member No.: 15,740



ok i have script naw. and its work but now i have problem have to get it work with drop down menu or button. any advice?

code:

<title>TinyTable</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
.style1 {
text-align: center;
}
</style>
</head>
<body>

<div class="style1">

<button name="Abutton1">button</button>

<br />
<br />

<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th><h3 class="style1">Name</h3></th></tr>
</thead>
<tbody>

<tr>
<td>Fritz Benton</td>
</tr>
<tr>
<td>Mannix Davidson</td>
</tr>
<tr>
<td>Grant Lawrence</td>
</tr>

<tr>
<td>Katell Crosby</td>
</tr>
<tr>
<td>Eden Burks</td>
</tr>
</tbody>
</table>
<div id="controls">
<div id="perpage">
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Entries Per Page</span>
</div>
<div id="navigation">
<img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
</div>
<div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table",1);
</script>
</div>
</body>
</html>

as i understand i havtu wright somthing like <button name="Abutton1" onclick="???????">button</button> i just cant figure it out??

This post has been edited by hokss: Oct 31 2011, 11:44 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 31 2011, 07:13 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,332
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



This isn't about markup. It's about JavaScript. I'm moving it to the client-side programming forum.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hokss
post Oct 31 2011, 07:49 PM
Post #5





Group: Members
Posts: 4
Joined: 30-October 11
Member No.: 15,740



QUOTE(Darin McGrew @ Oct 31 2011, 07:13 PM) *

This isn't about markup. It's about JavaScript. I'm moving it to the client-side programming forum.

ok sorry i just beginner. still have to call javascript to sort my table with button?? any ideas?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 1 2011, 08:36 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(hokss @ Nov 1 2011, 01:49 AM) *

still have to call javascript to sort my table with button?? any ideas?

Googling "TINY.table.sorter" turned up this demo: http://sandbox.scriptiny.com/table-sorter/index.html where you apparently click the table's TH elements to sort columns. Form buttons are not needed.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hokss
post Nov 1 2011, 09:27 AM
Post #7





Group: Members
Posts: 4
Joined: 30-October 11
Member No.: 15,740



QUOTE(hokss @ Oct 31 2011, 07:49 PM) *

QUOTE(Darin McGrew @ Oct 31 2011, 07:13 PM) *

This isn't about markup. It's about JavaScript. I'm moving it to the client-side programming forum.

ok sorry i just beginner. still have to call javascript to sort my table with button?? any ideas?


i know its not needed to sort table. its just in my website wold luck better with button
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 6th June 2020 - 08:55 AM