Sort a table data based on name and display using javascript ajax

javascript sort table by column
html table sort column header
ajax sort table
bootstrap table sort
javascript sort array of objects
html sort table without javascript
javascript sort table multiple columns
jquery sort table without plugin

Whenever the page is loading, the data from ShipmentDetails.xml must be loaded and displayed in sorted order.

ShipmentDetails.xml
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<shipment>
    <name>Charles</name>
    <shipmentId>46789056</shipmentId>
    <source>India</source>
    <destination>North America</destination>
    <startDate>05/06/2017</startDate>
    <deliveredDate>26/06/2017</deliveredDate>
</shipment>

<shipment>
    <name>Aryan</name>
    <shipmentId>46789696</shipmentId>
    <source>Delhi</source>
    <destination>Greece</destination>
    <startDate>09/06/2017</startDate>
    <deliveredDate>30/06/2017</deliveredDate>
</shipment>

<shipment>
    <name>Edward</name>
    <shipmentId>98767894</shipmentId>
    <source>Pune</source>
    <destination>Italy</destination>
    <startDate>25/06/2017</startDate>
    <deliveredDate>05/07/2017</deliveredDate>
</shipment>

    <shipment>
    <name>Aster</name>
    <shipmentId>88950075</shipmentId>
    <source>Italy</source>
    <destination>California</destination>
    <startDate>25/08/2017</startDate>
    <deliveredDate>06/09/2017</deliveredDate>
</shipment>

<shipment>
    <name>Malika</name>
    <shipmentId>88950075</shipmentId>
    <source>Japan</source>
    <destination>China</destination>
    <startDate>25/07/2017</startDate>
    <deliveredDate>29/07/2017</deliveredDate>
</shipment>

<shipment>
    <name>Vikrant</name>
    <shipmentId>98765240</shipmentId>
    <source>New york</source>
    <destination>Chennai</destination>
    <startDate>03/07/2017</startDate>
    <deliveredDate>10/07/2017</deliveredDate>
</shipment>

</catalog>

This is the below code I have used to load the data:-

function loadDataAndShowMessage() {
  var xhttp;

  if(window.XMLHttpRequest){
    xhttp = new XMLHttpRequest();
  }
  else{
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }



  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "ShipmentDetails.xml", true);
  xhttp.send();

}

function myFunction(xml) {
  var count = 0;
  var strTable = "<table border='1' id='resultTable'><thead><tr><th>Name</th><th>ShipmentId</th><th>Source</th><th>Destination</th><th>Start Date</th><th>Delivered Date</th></tr</thead><tbody>";
  var xmlDoc = xml.responseXML;
  var x = xmlDoc.getElementsByTagName("shipment");
  //var enteredText = document.getElementById("name").value;
  for (var i = 0; i < x.length; i++) {
    var name = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var shipmentId = x[i].getElementsByTagName("shipmentId")[0].childNodes[0].nodeValue;
    var source = x[i].getElementsByTagName("source")[0].childNodes[0].nodeValue;
    var destination = x[i].getElementsByTagName("destination")[0].childNodes[0].nodeValue;
    var startDate = x[i].getElementsByTagName("startDate")[0].childNodes[0].nodeValue;
    var delDate = x[i].getElementsByTagName("deliveredDate")[0].childNodes[0].nodeValue;
    strTable += "<tr><td id=\"name\">" + name + "</td>"+"<td>" + shipmentId + "</td><td>"
    + source + "</td><td>" + destination + "</td><td>"
    + startDate + "</td><td>" + delDate + "</td></tr>";

  }
  document.getElementById("result").innerHTML = strTable + "</tbody></table>";

}


   Create a file named index.html
Create a file named script.js
The xml file name should be ShipmentDetails.xml.
Get the details about the shipments from the xml file using AJAX and sort them based on name in ascending order.
Sorted Details should be displayed in tabular form when the page is loaded.

Sample Screenshot 1: Whenever the page is loading, the data from ShipmentDetails.xml must be loaded and displayed in sorted order.

Your updated myFunction

function myFunction(xml) {
  var count = 0;
  var strTable = "<table border='1' id='resultTable'><thead><tr><th>Name</th><th>ShipmentId</th><th>Source</th><th>Destination</th><th>Start Date</th><th>Delivered Date</th></tr</thead><tbody>";
  var xmlDoc = xml.responseXML;
  var x = xmlDoc.getElementsByTagName("shipment");

  //convert HTMLCollection to an array and run sort method on it
  x = Array.from(x);
  x.sort(function(a, b) {
    var textA = a.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var textB = b.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    if (textA < textB) return -1;
    if (textA > textB) return 1;
    return 0;
  });

  //var enteredText = document.getElementById("name").value;
  for (var i = 0; i < x.length; i++) {
    var name = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var shipmentId = x[i].getElementsByTagName("shipmentId")[0].childNodes[0].nodeValue;
    var source = x[i].getElementsByTagName("source")[0].childNodes[0].nodeValue;
    var destination = x[i].getElementsByTagName("destination")[0].childNodes[0].nodeValue;
    var startDate = x[i].getElementsByTagName("startDate")[0].childNodes[0].nodeValue;
    var delDate = x[i].getElementsByTagName("deliveredDate")[0].childNodes[0].nodeValue;
    strTable += "<tr><td id=\"name\">" + name + "</td>"+"<td>" + shipmentId + "</td><td>"
    + source + "</td><td>" + destination + "</td><td>"
    + startDate + "</td><td>" + delDate + "</td></tr>";

  }
  document.getElementById("result").innerHTML = strTable + "</tbody></table>";

}

Sorting the table by clicking header with AJAX, You can either use PHP or AJAX to get the sorted data. In this tutorial, I am displaying the employee's list and attach click event on the table column Database name */ $con = mysqli_connect($host, $user, $password  Sorting the Table by clicking Header with AJAX. With sorting the list it is easier for the user to locate items in a sorted list than unsorted. It rearranges the data in specific order (ascending or descending). You can either use PHP or AJAX to get the sorted data. I am using AJAX to sort the list in this tutorial.

i think you first need to sort the array

x.sort(function(a, b) {
 var textA = a.getElementsByTagName("name")[0].childNodes[0].nodeValue;
 var textB = b.getElementsByTagName("name")[0].childNodes[0].nodeValue;
 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});

then loop over it , hope this helps

How To Sort a Table, Learn how to sort an HTML table, using JavaScript. Click the button to sort the table alphabetically, based on customer name: Sort. Name, Country. Berglunds  Sort Table by Clicking the Headers. Click the headers to sort the table. Click "Name" to sort by names, and "Country" to sort by country. The first time you click, the sorting direction is ascending (A to Z). Click again, and the sorting direction will be descending (Z to A):

I first converted the xml to json and then used sort method of arrays and used the localeCompare function to compare them with, the json format also helps more to build up the template easier with template literals

// you no longer need ActiveXObject
function loadDataAndShowMessage() {
  var xhr = new XMLHttpRequest
  xhr.onload = () => myFunction(xhr.responseXML)
  xhr.open('GET', getUrl())
  xhr.send()
}

function xml2obj(node) {
  const obj = {}
  for (const child of node.children)
    obj[child.nodeName] = child.textContent
  return obj
}

function saferHTML(templateData) {
  let tpl = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    const arg = arguments[i]

    // Escape special characters in the substitution.
    tpl += arg.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;")

    // Don't escape special characters in the template.
    tpl += templateData[i];
  }
  return tpl;
}

function myFunction(xml) {
  // converts a nodeList to an array with spread (...)
  const shipments = [...xml.getElementsByTagName('shipment')]
    .map(xml2obj)
    .sort((a, b) => a.name.localeCompare(b.name))
    .map(shipment => saferHTML`<tr>
      <td class=name>${shipment.name}</td>
      <td>${shipment.shipmentId}</td>
      <td>${shipment.destination}</td>
      <td>${shipment.deliveredDate}</td>
    </tr>`)
    .join('')

  document.getElementById('result').innerHTML = `
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
          <th>Destionation</th>
          <th>Delivery</th>
        </tr>
      </thead>
      <tbody>
        ${shipments}
      </tbody>
    </table>
  `
}

loadDataAndShowMessage()


// Dummy fn sense there is nowhere to get the data
function getUrl() {
return URL.createObjectURL(new Blob([`<?xml version="1.0" encoding="UTF-8"?><catalog><shipment><name>Charles</name><shipmentId>46789056</shipmentId><source>India</source><destination>North America</destination><startDate>05/06/2017</startDate><deliveredDate>26/06/2017</deliveredDate></shipment><shipment><name>Aryan</name><shipmentId>46789696</shipmentId><source>Delhi</source><destination>Greece</destination><startDate>09/06/2017</startDate><deliveredDate>30/06/2017</deliveredDate></shipment><shipment><name>Edward</name><shipmentId>98767894</shipmentId><source>Pune</source><destination>Italy</destination><startDate>25/06/2017</startDate><deliveredDate>05/07/2017</deliveredDate></shipment><shipment><name>Aster</name><shipmentId>88950075</shipmentId><source>Italy</source><destination>California</destination><startDate>25/08/2017</startDate><deliveredDate>06/09/2017</deliveredDate></shipment><shipment><name>Malika</name><shipmentId>88950075</shipmentId><source>Japan</source><destination>China</destination><startDate>25/07/2017</startDate><deliveredDate>29/07/2017</deliveredDate></shipment><shipment><name>Vikrant</name><shipmentId>98765240</shipmentId><source>New york</source><destination>Chennai</destination><startDate>03/07/2017</startDate><deliveredDate>10/07/2017</deliveredDate></shipment></catalog>`]))
}
<div id="result">

Default ordering (sorting), Using the order initialisation parameter, you can set the table to display the data in exactly inner array is the column to order on, and the second is 'asc' (​ascending ordering) or 'desc' Serge Baldwin, Data Coordinator, Singapore, 64, 2012/04/09, $138,575 Javascript; HTML; CSS; Ajax; Server-side script; Comments. The ajax.dataSrc (i.e. data source) option is used to tell DataTables where the data array is in the JSON structure. ajax.dataSrc is typically given as a string indicating that location in Javascript object notation - i.e. simply set it to be the name of the property where the array is!

Ajax Jquery Column Sort with PHP & MySql, If you looking for video tutorial on Ajax Column Sort in ascending or decending order with PHP Duration: 15:13 Posted: Aug 27, 2016 Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Ajax Jquery Column Sort with PHP MySql, If you want to learn how make html table column sort in ascending as front end and as a Duration: 15:13 Posted: Aug 27, 2016 Sorting an HTML table with JavaScript. any attributes assigned to any part of the table (css class names and etc) is the pure JS for sorting table data. I

Working with jQuery DataTables, It can directly work on an HTML table or we can specify data as an array while initialization. Or it can work on data coming from an Ajax source. We could now create a custom sort function for the "color" column, to make sure it sorts based on the "dec" attribute instead. Or, we could just tell dynatable to sort the "color" column based on the "name" attribute directly in our table with data-dynatable-sorts: