Smart Lists is light-weight (8KB) Prototype-Scriptaculous framework extension that converts “flat” HTML lists of information into categorized, paginated lists. In essence, it’s a presentation layer for improving the readability of static information, without need of a database or server-side script. It can be applied to existing lists of information with very little work, providing a significant bump in usability.
I wrote a version of the script a couple of years back for my Software page and always intended to generalize it into a downloadable script. Finally found time to write the sucker.
Oh, and it’s free, naturally. :-)
I like it! Very novel approach. It’s probably not suitable for extreme pagination situations (e.g. 50 pages or more), but it’s awesome for multi-page forms, and other smaller result sets that only require a few pages.
Very very useful !!! We definitely will use this in most of our projects. Great work!!!
Great work. Thank you very much.
But I have a problem with blanks in flag-names.
Example:
————
Flag “Information Technology” will be separated in “Information” and “Technology”
Ah yes, I should have documented that better. Try using a non breaking space (& nbsp;) between the words, instead of just whitespace. That\’ll fix it for you!
– Ben
Smartlists is going to same me tons of time. Thanks for the great work.
Like Herr.Vorragend, I am having an issue with spaces in my flag-names. More specifically I have flags with multiple spaces. I used the non breaking space (& nbsp;) as you mentioned, however only the first instance of the tag is recognised. The second is left as visible text.
Any help would be appreciated.
Ahh… interesting. Yes, the code only converts a single one of them right now (bug!). I’ll post a fix for that shortly.
great plugin – would really like to use more than one on a page with jquery though any work arounds?
Hey Matt, not just yet, I’m afraid. This really bugged me when I first wrote it, but I couldn’t figure out a way to create separate self-referential instances of the Smart List. However, I’m going to a “hacking event” this weekend and plan on revisiting this script – I’ll see if I can make sense of it then (or find someone to lend me a hand…!)
– Ben
Ben
Really interesting plugin — I like it a lot.
I have a problem and a request.
Problem:
======
Not sure if it is my implementation or if smartLists does not play well with (an)other jquery plugin but when I switch pages by clicking the number, the page switch happens, but with no animation. When I click the next or previous page, the page switch happens but the redirects to the home page. I have put up an example here:
http://www.theintoy.co.uk/index.php?cPath=1_27&sl=test
If you try to change pages using the number and the next previous you will see what I mean. Interestingly, I get the animation if I change the drop down list from All to (33) after I have done a page change.
Request.
======
For good UI, I would like to put the tags:
<div id=”sl-flag-dropdown”></div>
<div id=”sl-pagination”></div>
at the top and the bottom of the list, but it appears that only 1 set is allowed. Can this be altered to allow the pagination controls multiple times?
Thanks for the great work. I hope the weekend event went well.
Hi,
thanks for the script, unfortunately the select-flag-dropdown did not work for me, had to change the following line in jquery.smartlists-uncompressed.js:
from
(359) flagIndex = event.target.value;
to
(359) flagIndex = parseInt(event.target.value);
tried on FF3 and IE7.
well, postet a bit too quick, in order to get “All items” to work, had to change the previous posted code to:
var flagIndex = flagIndex;
if (event.target.value == “smartlist-all”) {
flagIndex = event.target.value;
}
else if (event.target.value != undefined)
flagIndex = parseInt(event.target.value);
Now ev’thing seems just fine, thanks again for the script :)
Mr. Keen,
Your SmartLists project was a welcome find allowing us to paginate a set of products in an online store without having to use .NET postbacks to determine the page and dataset needed to repopulate the page. It is definitely going to make viewing the product list much faster and enjoyable and the built-in “keywords” filtering is a super-bonus!
I did, however, find one thing with the previous/next page linking not to my liking and this was likely just a bug. When clicking the back/forward links, the page was being sent to a new URL (/page.htm#, that is) due to the click event not returning false to the browser and aborting the click event. This was easily fixed by simply changing the call to “currSmartList.changePage(e)” to “return currSmartList.changePage(e)”.
Thanks for all your hard work on this project. It is a great time saver and adds tremendously to the end-user experience as well as server overhead AND search engine indexability by allowing us to put all the relevant content on the page and avoiding repeated postback events.
-Some Rando
Hey Rando –
Thanks for the post! I’m very glad to hear it’s coming in handy. :-)
And yes, the # problem was definitely a bug. Was this with the jQuery or Prototype version?
– Ben
It was with the jQuery version, sir.
First off, I was very happy to find this plugin and have been using it with great success. So thank you!
I noticed that if a flag uses HTML special characters, they get encoded and printed using the encoded string instead of the decoded string.
Ex: my flag is “Bed & Breakfasts”, after applying $. smartlist() to the list, “Bed & Breakfasts” is printed “Bed & Breakfasts”
Is this something that would be easy to fix (I’m using the jQuery version)?