[jQuery] Lists, Filtering and Searching, Oh My!
A while back, the company I work for tasked me with coming up with a better way to move through a listing of forms on our Intranet. The way it was done before involved two identical files being maintained simultaneously, one sorted by the form ID (AA0001) and the other by name. The list of forms is nothing to sneeze at ... the first page includes a list of over 1800 forms. My first stab at a solution moved everything into a single unordered list. I was able to assign classes to each list item for the alpha character, the ID and type. Clicking on the appropriate links would show only those items which you selected. I also plugged in Rik Lomas' awesome QuickSearch plugin to quickly search the list. The only drawback was that the group responsible for maintaining the list of forms had to choose whether they wanted the list sorted by name or form ID. They chose name. Last week though, they decided that wasn't good enough and they needed to be able to sort by either name or form ID, so I've been handed this project again and told to make it work more to their liking. A table would break from the way they've organized these forms for years now, so they're really not interested in something like that, so it'd really need to be a list. The forms need to be able to be sorted alphabetically by name or form ID as well as organized by category. My first idea was to build a big (and I mean BIG) JSON file that would store all the information for these forms. I'd then be able to parse through the JSON object and build the list on the fly based on what they clicked. Of course, we're talking about a JSON file that'd probably be over 2000 lines and would have to be parsed every time they click something (I'm not sure if I could call in the JSON file and have it available instead of using $.getJSON). Then there's the issue of searching. Obviously QuickSearch works great, but how am I going to search through a static file without throwing everything on to the page? As you can see, I've begun brainstorming some ideas, but I'd really love to hear what other solutions come to mind for you guys. Any ideas you have would be awesome. Thanks! David
Re: [jQuery] Lists, Filtering and Searching, Oh My!
json is one approach. XML is another. CSV works, too. The format of the file should be what works best for the people that need to maintain it. Then, you need to find a good way of getting that data into the browser and in a format that is easy to work with. How often does this file change? Is this something that can be loaded at the beginning of the user session and then cached? Or do you need to update the user's view regularly? That is, do you need multiple ajax calls, or just load it all in on page load? If it were me, using Excel to manage the list, and exporting to CSV, then loading and parsing that is probably what I would do. Just make sure your CSV parsing code is bug-free. :) When you load and parse the CSV, just load each record into an object in an array. Piece of cake. Then you build your display based on the array, sorting and/or filtering as you do so, based on what the user needs. That last part has the potential to be a slightly sticky piece of cake if you tried to do it all yourself, but even then it is doable. Using the QuickSearch might work, but looking at the sample, it's pretty slow with even a small list (looking at the table example), so with such a large data set, it may not be much fun. Won't know until you try. There are also plugins (are there not?) which turn tables into sortable/searchable data sets. You could build one of those as an 'alternative possibility' for your users to look at. On Tue, Jan 19, 2010 at 4:54 AM, david.vansc...@gmail.com david.vansc...@gmail.com wrote: A while back, the company I work for tasked me with coming up with a better way to move through a listing of forms on our Intranet. The way it was done before involved two identical files being maintained simultaneously, one sorted by the form ID (AA0001) and the other by name. The list of forms is nothing to sneeze at ... the first page includes a list of over 1800 forms. My first stab at a solution moved everything into a single unordered list. I was able to assign classes to each list item for the alpha character, the ID and type. Clicking on the appropriate links would show only those items which you selected. I also plugged in Rik Lomas' awesome QuickSearch plugin to quickly search the list. The only drawback was that the group responsible for maintaining the list of forms had to choose whether they wanted the list sorted by name or form ID. They chose name. Last week though, they decided that wasn't good enough and they needed to be able to sort by either name or form ID, so I've been handed this project again and told to make it work more to their liking. A table would break from the way they've organized these forms for years now, so they're really not interested in something like that, so it'd really need to be a list. The forms need to be able to be sorted alphabetically by name or form ID as well as organized by category. My first idea was to build a big (and I mean BIG) JSON file that would store all the information for these forms. I'd then be able to parse through the JSON object and build the list on the fly based on what they clicked. Of course, we're talking about a JSON file that'd probably be over 2000 lines and would have to be parsed every time they click something (I'm not sure if I could call in the JSON file and have it available instead of using $.getJSON). Then there's the issue of searching. Obviously QuickSearch works great, but how am I going to search through a static file without throwing everything on to the page? As you can see, I've begun brainstorming some ideas, but I'd really love to hear what other solutions come to mind for you guys. Any ideas you have would be awesome. Thanks! David -- John Arrowwood John (at) Irie (dash) Inc (dot) com John (at) Arrowwood Photography (dot) com John (at) Hanlons Razor (dot) com -- http://www.irie-inc.com/ http://arrowwood.blogspot.com/
Re: [jQuery] Lists, Filtering and Searching, Oh My!
Would it not be better to provide a server side script such as php or asp to allow a paged, sorted, ajax call. Even if you put all this data in an access database or xml file the server side script can parse and return a small chuck of data reasonably fast. At 1800 records I'd opt for a database write a script to import/export to-from csv for that the list management can be done via xcell or similar app. On Tue, Jan 19, 2010 at 12:06 PM, John Arrowwood jarro...@gmail.com wrote: json is one approach. XML is another. CSV works, too. The format of the file should be what works best for the people that need to maintain it. Then, you need to find a good way of getting that data into the browser and in a format that is easy to work with. How often does this file change? Is this something that can be loaded at the beginning of the user session and then cached? Or do you need to update the user's view regularly? That is, do you need multiple ajax calls, or just load it all in on page load? If it were me, using Excel to manage the list, and exporting to CSV, then loading and parsing that is probably what I would do. Just make sure your CSV parsing code is bug-free. :) When you load and parse the CSV, just load each record into an object in an array. Piece of cake. Then you build your display based on the array, sorting and/or filtering as you do so, based on what the user needs. That last part has the potential to be a slightly sticky piece of cake if you tried to do it all yourself, but even then it is doable. Using the QuickSearch might work, but looking at the sample, it's pretty slow with even a small list (looking at the table example), so with such a large data set, it may not be much fun. Won't know until you try. There are also plugins (are there not?) which turn tables into sortable/searchable data sets. You could build one of those as an 'alternative possibility' for your users to look at. On Tue, Jan 19, 2010 at 4:54 AM, david.vansc...@gmail.com david.vansc...@gmail.com wrote: A while back, the company I work for tasked me with coming up with a better way to move through a listing of forms on our Intranet. The way it was done before involved two identical files being maintained simultaneously, one sorted by the form ID (AA0001) and the other by name. The list of forms is nothing to sneeze at ... the first page includes a list of over 1800 forms. My first stab at a solution moved everything into a single unordered list. I was able to assign classes to each list item for the alpha character, the ID and type. Clicking on the appropriate links would show only those items which you selected. I also plugged in Rik Lomas' awesome QuickSearch plugin to quickly search the list. The only drawback was that the group responsible for maintaining the list of forms had to choose whether they wanted the list sorted by name or form ID. They chose name. Last week though, they decided that wasn't good enough and they needed to be able to sort by either name or form ID, so I've been handed this project again and told to make it work more to their liking. A table would break from the way they've organized these forms for years now, so they're really not interested in something like that, so it'd really need to be a list. The forms need to be able to be sorted alphabetically by name or form ID as well as organized by category. My first idea was to build a big (and I mean BIG) JSON file that would store all the information for these forms. I'd then be able to parse through the JSON object and build the list on the fly based on what they clicked. Of course, we're talking about a JSON file that'd probably be over 2000 lines and would have to be parsed every time they click something (I'm not sure if I could call in the JSON file and have it available instead of using $.getJSON). Then there's the issue of searching. Obviously QuickSearch works great, but how am I going to search through a static file without throwing everything on to the page? As you can see, I've begun brainstorming some ideas, but I'd really love to hear what other solutions come to mind for you guys. Any ideas you have would be awesome. Thanks! David -- John Arrowwood John (at) Irie (dash) Inc (dot) com John (at) Arrowwood Photography (dot) com John (at) Hanlons Razor (dot) com -- http://www.irie-inc.com/ http://arrowwood.blogspot.com/ -- If you ask me if it can be done. The answer is YES, it can always be done. The correct questions however are... What will it cost, and how long will it take?
