Sortable list of links

Site URL: https://www.herocards.us

I'd like advice on the best way to create a page (Bedford template) filled with links that are sortable by category. My site has story pages for individual U.S. service members, and it's growing rapidly. My thought is to have a one-stop page that links for each service member, numbered consecutively. Ideally, the user would click Army, Navy, Air Force, Marine Corps, Coast Guard, or Space Force, and the list would reflect their choice.

No need for images or descriptions. Just a page that fills with the names, which link to the service member’s individual page. It's simple enough to do a long list of text links. But I need help on how to make the sortable categories.

Like some these examples?

• https://codepen.io/charlytux/pen/GmKBpr
• https://codepen.io/jalajcodes/pen/wvGKZNy
• https://codepen.io/georgemejia/pen/rNNQEbz

I'm thinking something based on DataTables. Then use Tables Generator to generate an HTML table for use with DataTables.

The nice thing about both these tools is that they are fairly flexible. So it's pretty easy to get something going quickly. Easy is a relative term here. If you know a bit about HTML and some JavaScript then it shouldn't be too hard to get something off the ground. If you have no experience then it's going to be a bit harder.

One thing to keep in mind is that with DT you can put all the rows in an HTML table but there is a performance downside in that it's all being done in memory in the browser. DT also has more advanced database like query features. If you plan to have lots of rows then you may want to think about some kind of database server down the road to make the table more performant.

I also looked at using a text block as a crude database with the help of some jQuery (JavaScript).

Here we see the full list.

Then I ran the following jQuery.

$( '#block-yui_3_17_2_1_1657998311603_4069 p:not(:contains(U.S. Navy))' ).hide ( );

And ran the following to show the full list again.

$( '#block-yui_3_17_2_1_1657998311603_4069 p' ).show ( );

Obviously if one were to go the later route some kind of interface would need to be built for the filtering.

Here are some demos of my tinkering to give you an idea of what may be possible. I don't have any solutions or code to share.

If  I understand you correctly, you want Army, Navy, Air Force, Marine Corps, Coast Guard, or Space Force, to be your categories and when clicked on one of them a list of text links comes up? It may be possible to do this by creating a blog page in the unlinked section of your site. Create six titled posts one for Army, Navy, Air Force etc. Each of these posts would contain the text links for that group. Assign a matching category to each post.  In the linked section of your site create a page with a  summary block that pulls content from the unlinked blog. You will have six items show up on the page,  six thumbnails or just titles,  one for Army, Navy etc. When an  item is  clicked  it will go directly to the post with the links. You can also create a drop down archive block that  uses the categories of the posts in the unlinked bog and when any one of those is clicked  will also go to to to the correct post with the list of links. This depends on you adding  the links to the proper blog post of course. 

I do something similiar to this, but a bit more elaborate,  with my site. I have two blog pages, number one has eleven posts that are all summary blocks pulling content from the second blog page where all the written posts reside. It pulls the posts by category assigned to each written post and sorts them into the corresponding category post. The number one blog, which is in the linked section of my site and on the nav bar, as I said,  has multiple categories that can be scrolled as one page and a drop down menu in the header that sorts by subject category from the number one blog as well.

I know this sounds a bit complicated but it does work, and does so without any code required. I used code just to change the appearance of the summary items. I have set this up for other site owners as well. For example,  I have used this method for company bios  where the employees are sorted by department or function. Cick on a dept and then multiple bios show up. Your need should be much simpler than that.  You can see my blog sorting method in acton here:

https://myrandomviews.com/blogsummary

Quote

Obviously if one were to go the later route some kind of interface would need to be built for the filtering.

I expanded on my crude demo code. If your filtering needs are extremely simple, basically one phrase then my code may be of use.

Folks. You'll need to determine which of the various methods discussed in this thread suits your need. Each has pros and cons. Pick whatever method works for your situation.

Please see Text Block Formats Phrase Filter.