/    Sign up×
Community /Pin to ProfileBookmark

How can I make toggle buttons (specifically, to sort entries in a table?)

Copy linkTweet thisAlerts:
Oct 18.2014

I have a list of entries which I would like to sort by date, time, name, etc. Of course, this means I want the ability to sort in ascending and descending order.

What I’d like to do is create a series of buttons which will control how this information is sorted. I would like each button to be uniquely selected, so the user can only choose one, and I would like the selected button to have a little arrow next to it (up or down) to indicate the sort direction. If a selected button is pressed, it will change the direction of the arrow, and thus the sort direction.

What is the best way to approach developing these buttons? Is there a pre-developed script for this?

(Please note, I’m asking how to develop the buttons, not the sorting. I’ll be doing that with AJAX and MySQL.)

Thank you,
Multimediocrity

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@TechmakerOct 18.2014 — You can use jQuery to register a click event on the buttons that adds a selected class to whatever button was clicked. When the button gets clicked, you will need to scan all of the other buttons and remove the selected class, then apply the selected class to the button that was clicked --- $(this).

You could use font awesome and use the fa-chevron-up and fa-chevron-down class for your up and down arrows. Then your code would look something like this:

$(function() {

$('.btn').click(function() {

$('.btn').find('.fa').removeClass('fa-chevron-down').addClass('fa-chevron-up');

$(this).find('.fa').removeClass('fa-chevron-up').addClass('fa-chevron-down');

});

});

That might not be exactly right, but something like that.
Copy linkTweet thisAlerts:
@Kevin2Oct 18.2014 — This may be a start for you with perhaps some adjustment.

http://www.kryogenix.org/code/browser/sorttable/
×

Success!

Help @multimediocrity spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...