Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that showcases the movies: 

 <!-- Latest additions-->
#LATEST_ADDITIONS_START#
<div class="header">Movie Cover Listings</div>
#LATEST_ADDITIONS_TEMPLATE_START#
<li>
    <a href="movies/#INDEX#.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/#COVER#.jpg" width="#WIDTH#" height="#HEIGHT#"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">#TITLE#</td>
        </tr>
    </table>
</a>
</li>
#LATEST_ADDITIONS_TEMPLATE_END#
<div class="link_latest"><tr>#LATEST_ADDITIONS#</tr></div>
#LATEST_ADDITIONS_END#

<!-- All movies -->

This is how the program outputs data from the database using the template file:

<!-- Latest additions-->

<div class="header">Movie Cover Listings</div>

<div class="link_latest"><tr>

<li>
    <a href="movies/2.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/000002.jpg" width="90" height="135"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">3 Days to Kill</td>
        </tr>
    </table>
</a>
</li>

<li>
    <a href="movies/1.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/000001.jpg" width="89" height="135"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">300: Rise of an Empire 3D</td>
        </tr>
    </table>
</a>
</li>
</tr></div>


<!-- All movies -->

The movies are currently listed in descending order by #INDEX# filename. I would like them to be sorted alphabetically by #TITLE# name instead.

If anyone has any tips on how to achieve this, I would greatly appreciate it.

Thank you for your assistance.

javascripthtmlcss

Answer №1

All the values are retrieved from the backend database and displayed in Descending Order based on the file name.

To display data in order by title name, you can execute the following query:

SELECT * FROM table_name ORDER BY title_name DESC

Answer №2

To optimize the sorting process, it is recommended to utilize the ORDER BY clause on the backend:

SELECT * FROM table_name ORDER BY title

This approach proves to be more efficient compared to executing sorting operations on the frontend. However, considering that the question pertains specifically to frontend technologies:

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Retrieve and prepare list items for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate array with innerHTML of list items
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Perform sorting
  vals.sort();

  // Implement descending order if specified
  if(sortDescending)
    vals.reverse();

  // Update the list content on the webpage
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

//Simple implementation...

sortUnorderedList("ID_OF_LIST");

For further information: How may I sort a list alphabetically using jQuery?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background color in the HTML file remains unchanged

Hello everyone, this is my debut post here. I can't seem to figure out why the background color isn't changing for me. Even though I have applied the bg color property, it's not taking effect as expected. <body bgcolor="#f0ffff"> T ...

htmlcsscolorsbackground

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss

Tips on how to bring in a module from index.js

Recently, I set up a sample node.js project: "name": "example", "version": "1.0.0", "type": "module", Let's take a look at the index.js (only two lines): "use strict"; import ...

javascriptnode.jsubuntunpmmaplibre-gl

Tips for accessing a website and logging in to extract important data for scraping purposes

Currently facing an issue with scraping data from a website that requires logging in. I've been attempting to use the node request package for the login process, but so far have been unsuccessful. The code snippet I'm currently using is: var j = ...

javascriptjquerynode.jsmeteor

Need help with styling for disabled autocomplete? Check out the attached image

I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...

htmlcssreactjsmaterial-ui

Is it necessary to close the navigation drawer after selecting an item?

Currently, I'm working on a project for my University where I am trying to incorporate a feature that will automatically close the navigation drawer whenever any of its items are clicked. However, I am facing some challenges figuring out how to achiev ...

javascriptvue.jsvuetify.js

What is the best way to distinguish between a button click and a li click within the same li element

In my angular and css GUI, each line is represented as an li inside a ul with a span. The functionality includes a pop-up opening when clicking on the li background and another action occurring when pressing the button (as intended). The issue arises when ...

htmlangulartypescript

Save your canvas image as a file and attempt to force a download, only to be met with a failure to

Is there a way to save a canvas as an image file and allow users to choose the format (png or jpg) for download without saving the file on the server? Here's what I have tried: JavaScript Code: $.ajax( { type : "POST", url : "../php/downloa ...

phpajaxhtmlcanvasforce-download

The functionality of the button seems to be malfunctioning specifically in the Mac Firefox

My button isn't working in Mac Firefox only. Below is the code: <button class="col btn-change"><a href="/p/88" style="color: white;">Landscape</a></button> However, the following two codes are functioning correctly. In the fi ...

cssbootstrap-4

The fadein feature in Deps.Autorun is not functioning as expected in Meteor version 0.5.9

Here is the code I am currently working with: Template.jobFlash.helpers({ latest_job: function(){ if(Session.get("latestJob")!=""){ return JobsCollection.findOne({}, {sort: {'added_date': -1}}); } } }); Deps. ...

javascriptjquerynode.jsmeteor

What is the best way to save a parsed JSON value to a variable in Express?

I am currently utilizing the body-parser module to parse incoming JSON objects within a POST request. My goal is to extract and store a specific value from the JSON data into a variable for later database insertion. Below is a fragment of the code: var h ...

javascriptjsonexpress

Adding dots between page numbers when using ReactJS/Javascript Pagination can be achieved by implementing a specific method

I have created a pagination component using React JS. Currently, it only displays all the page numbers, but I want it to show dots when there are more than 8 total pages. Here's how I envision it: c. When total is less than 9 pages: Page 1 selecte ...

javascriptreactjs

Guide on integrating React with Node.js and HTML

I've tried various methods, searched on Google, and checked the official site, but nothing seems to work. The code only functions properly when I include it in the HTML file of node.js like this: <!DOCTYPE html> <html lang="en"& ...

javascripthtmlnode.jsreactjsexpress

Get rid of the add to cart message and modify the button that says "add to cart" on Woocommerce

How can I modify the shopping cart page to remove the "has been added to your cart" text and replace the quantity and add to cart button with a custom button (my image)? Here is an example of what I am trying to achieve: This is the current state of the p ...

phpcsswordpresswoocommercecart

Position the Close Button within the CSS Cookie Consent Popup in perfect alignment

Having trouble aligning the close X button in my cookie consent popup to the center? I added a margin-top to adjust it, but I'm looking for a better solution. <div class="alert cookiealert" > By using our website you agree to our C ...

htmlcsscookiesbootstrap-4cookieconsent

What is causing so many issues when this component is integrated? (the scope of issues will be detailed later on)

I have the following 3 components: news-feed.component user-activity-item.component user-activity-list.component Both user-activity components are located within a subdirectory of the news-feed component. Additionally, the user-activity-item is just a ...

htmlangularangular2-directivespure-css

Cloning Div repeatedly instead of the specified quantity

My JSON data contains four sections and I want to clone my html div based on the number of sections. For example, if there are 100 sections in my JSON, I would like the div to be cloned 100 times. Currently, my div is getting cloned with the JSON data app ...

javascriptjqueryjsonmethodsclone

Adding and adjusting the size of different DIV elements within a shared area

Looking to create a dynamic bar with the ability to add multiple child DIVs (similar to this: https://i.stack.imgur.com/tdWsq.jpg). Utilizing jQuery, jQuery UI, Bootstrap, and various plugins. The structure for the div (or span) system could be structured ...

javascriptjqueryhtmlresize

Error encountered in React Native packager due to naming conflict between "lodash" and "yeoman-generator" libraries

Issue Description Within my current project, I am utilizing "react-native": "0.36.0" along with the following dependencies: "lodash": "^4.15.0" "yeoman-generator": "^0.24.1" Upon using versions above "^3.10.1" for "lodash" and "0.21.2" for "yeoman-gene ...

javascriptnpmreact-nativejestjsreact-native-cli

Having Trouble Loading AWS Amplify React Web App on Safari Browser

Currently, I am following a tutorial on creating a React single-page application with AWS Amplify. The tutorial can be found at this link. After completing the first two modules successfully, I encountered an issue in Module Three that I am hoping to reso ...

javascriptreactjsamazon-web-servicesaws-amplifyaws-amplify-cli