Read XML file with jQuery Load Method and display it in a HTML Table

Read XML file with jQuery Load Method and display it in a HTML Table

We all know that the jQuery Load method can be used to read an XML file, but developers often ask how to display this XML file to a HTML table. Therefore I decided to write a detailed tutorial that will:

  • Load an XML file using jQuery Load Method.
  • Display it in a HTML table.
  • The HTML table has pagination system.
  • Due to this pagination system the XML data will be shown in page by page manner.
  • This whole thing will be based on AJAX.

The XML to Read with jQuery Load Method

Note: The XML reading method that I will use will support any XML file with any format.

In this example I am taking an XML file that contains detail of 25 products.

This XML file is given below:

<?xml version="1.0" encoding="utf-8" ?>
<NewDataSet>
  <Product>
    <ProductID>77</ProductID>
    <ProductName>Original Frankfurter grüne Soße</ProductName>
    <SupplierID>12</SupplierID>
    <CategoryID>2</CategoryID>
    <QuantityPerUnit>12 boxes</QuantityPerUnit>
    <UnitPrice>13.0000</UnitPrice>
    <UnitsInStock>32</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>15</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>76</ProductID>
    <ProductName>Lakkalikööri</ProductName>
    <SupplierID>23</SupplierID>
    <CategoryID>1</CategoryID>
    <QuantityPerUnit>500 ml</QuantityPerUnit>
    <UnitPrice>18.0000</UnitPrice>
    <UnitsInStock>57</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>20</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>75</ProductID>
    <ProductName>Rhönbräu Klosterbier</ProductName>
    <SupplierID>12</SupplierID>
    <CategoryID>1</CategoryID>
    <QuantityPerUnit>24 - 0.5 l bottles</QuantityPerUnit>
    <UnitPrice>7.7500</UnitPrice>
    <UnitsInStock>125</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>25</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>74</ProductID>
    <ProductName>Longlife Tofu</ProductName>
    <SupplierID>4</SupplierID>
    <CategoryID>7</CategoryID>
    <QuantityPerUnit>5 kg pkg.</QuantityPerUnit>
    <UnitPrice>10.0000</UnitPrice>
    <UnitsInStock>4</UnitsInStock>
    <UnitsOnOrder>20</UnitsOnOrder>
    <ReorderLevel>5</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>73</ProductID>
    <ProductName>Röd Kaviar</ProductName>
    <SupplierID>17</SupplierID>
    <CategoryID>8</CategoryID>
    <QuantityPerUnit>24 - 150 g jars</QuantityPerUnit>
    <UnitPrice>15.0000</UnitPrice>
    <UnitsInStock>101</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>5</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>72</ProductID>
    <ProductName>Mozzarella di Giovanni</ProductName>
    <SupplierID>14</SupplierID>
    <CategoryID>4</CategoryID>
    <QuantityPerUnit>24 - 200 g pkgs.</QuantityPerUnit>
    <UnitPrice>34.8000</UnitPrice>
    <UnitsInStock>14</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>0</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>71</ProductID>
    <ProductName>Flotemysost</ProductName>
    <SupplierID>15</SupplierID>
    <CategoryID>4</CategoryID>
    <QuantityPerUnit>10 - 500 g pkgs.</QuantityPerUnit>
    <UnitPrice>21.5000</UnitPrice>
    <UnitsInStock>26</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>0</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>70</ProductID>
    <ProductName>Outback Lager</ProductName>
    <SupplierID>7</SupplierID>
    <CategoryID>1</CategoryID>
    <QuantityPerUnit>24 - 355 ml bottles</QuantityPerUnit>
    <UnitPrice>15.0000</UnitPrice>
    <UnitsInStock>15</UnitsInStock>
    <UnitsOnOrder>10</UnitsOnOrder>
    <ReorderLevel>30</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>69</ProductID>
    <ProductName>Gudbrandsdalsost</ProductName>
    <SupplierID>15</SupplierID>
    <CategoryID>4</CategoryID>
    <QuantityPerUnit>10 kg pkg.</QuantityPerUnit>
    <UnitPrice>36.0000</UnitPrice>
    <UnitsInStock>26</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>15</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>68</ProductID>
    <ProductName>Scottish Longbreads</ProductName>
    <SupplierID>8</SupplierID>
    <CategoryID>3</CategoryID>
    <QuantityPerUnit>10 boxes x 8 pieces</QuantityPerUnit>
    <UnitPrice>12.5000</UnitPrice>
    <UnitsInStock>6</UnitsInStock>
    <UnitsOnOrder>10</UnitsOnOrder>
    <ReorderLevel>15</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>67</ProductID>
    <ProductName>Laughing Lumberjack Lager</ProductName>
    <SupplierID>16</SupplierID>
    <CategoryID>1</CategoryID>
    <QuantityPerUnit>24 - 12 oz bottles</QuantityPerUnit>
    <UnitPrice>14.0000</UnitPrice>
    <UnitsInStock>52</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>10</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>66</ProductID>
    <ProductName>Louisiana Hot Spiced Okra</ProductName>
    <SupplierID>2</SupplierID>
    <CategoryID>2</CategoryID>
    <QuantityPerUnit>24 - 8 oz jars</QuantityPerUnit>
    <UnitPrice>17.0000</UnitPrice>
    <UnitsInStock>4</UnitsInStock>
    <UnitsOnOrder>100</UnitsOnOrder>
    <ReorderLevel>20</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>65</ProductID>
    <ProductName>Louisiana Fiery Hot Pepper Sauce</ProductName>
    <SupplierID>2</SupplierID>
    <CategoryID>2</CategoryID>
    <QuantityPerUnit>32 - 8 oz bottles</QuantityPerUnit>
    <UnitPrice>21.0500</UnitPrice>
    <UnitsInStock>76</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>0</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>64</ProductID>
    <ProductName>Wimmers gute Semmelknödel</ProductName>
    <SupplierID>12</SupplierID>
    <CategoryID>5</CategoryID>
    <QuantityPerUnit>20 bags x 4 pieces</QuantityPerUnit>
    <UnitPrice>33.2500</UnitPrice>
    <UnitsInStock>22</UnitsInStock>
    <UnitsOnOrder>80</UnitsOnOrder>
    <ReorderLevel>30</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>63</ProductID>
    <ProductName>Vegie-spread</ProductName>
    <SupplierID>7</SupplierID>
    <CategoryID>2</CategoryID>
    <QuantityPerUnit>15 - 625 g jars</QuantityPerUnit>
    <UnitPrice>43.9000</UnitPrice>
    <UnitsInStock>24</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>5</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>62</ProductID>
    <ProductName>Tarte au sucre</ProductName>
    <SupplierID>29</SupplierID>
    <CategoryID>3</CategoryID>
    <QuantityPerUnit>48 pies</QuantityPerUnit>
    <UnitPrice>49.3000</UnitPrice>
    <UnitsInStock>17</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>0</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>61</ProductID>
    <ProductName>Sirop d'érable</ProductName>
    <SupplierID>29</SupplierID>
    <CategoryID>2</CategoryID>
    <QuantityPerUnit>24 - 500 ml bottles</QuantityPerUnit>
    <UnitPrice>28.5000</UnitPrice>
    <UnitsInStock>113</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>25</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>60</ProductID>
    <ProductName>Camembert Pierrot</ProductName>
    <SupplierID>28</SupplierID>
    <CategoryID>4</CategoryID>
    <QuantityPerUnit>15 - 300 g rounds</QuantityPerUnit>
    <UnitPrice>34.0000</UnitPrice>
    <UnitsInStock>19</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>0</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>59</ProductID>
    <ProductName>Raclette Courdavault</ProductName>
    <SupplierID>28</SupplierID>
    <CategoryID>4</CategoryID>
    <QuantityPerUnit>5 kg pkg.</QuantityPerUnit>
    <UnitPrice>55.0000</UnitPrice>
    <UnitsInStock>79</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>0</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>58</ProductID>
    <ProductName>Escargots de Bourgogne</ProductName>
    <SupplierID>27</SupplierID>
    <CategoryID>8</CategoryID>
    <QuantityPerUnit>24 pieces</QuantityPerUnit>
    <UnitPrice>13.2500</UnitPrice>
    <UnitsInStock>62</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>20</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>57</ProductID>
    <ProductName>Ravioli Angelo</ProductName>
    <SupplierID>26</SupplierID>
    <CategoryID>5</CategoryID>
    <QuantityPerUnit>24 - 250 g pkgs.</QuantityPerUnit>
    <UnitPrice>19.5000</UnitPrice>
    <UnitsInStock>36</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>20</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>56</ProductID>
    <ProductName>Gnocchi di nonna Alice</ProductName>
    <SupplierID>26</SupplierID>
    <CategoryID>5</CategoryID>
    <QuantityPerUnit>24 - 250 g pkgs.</QuantityPerUnit>
    <UnitPrice>38.0000</UnitPrice>
    <UnitsInStock>21</UnitsInStock>
    <UnitsOnOrder>10</UnitsOnOrder>
    <ReorderLevel>30</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>55</ProductID>
    <ProductName>Pâté chinois</ProductName>
    <SupplierID>25</SupplierID>
    <CategoryID>6</CategoryID>
    <QuantityPerUnit>24 boxes x 2 pies</QuantityPerUnit>
    <UnitPrice>24.0000</UnitPrice>
    <UnitsInStock>115</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>20</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>54</ProductID>
    <ProductName>Tourtière</ProductName>
    <SupplierID>25</SupplierID>
    <CategoryID>6</CategoryID>
    <QuantityPerUnit>16 pies</QuantityPerUnit>
    <UnitPrice>7.4500</UnitPrice>
    <UnitsInStock>21</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>10</ReorderLevel>
    <Discontinued>false</Discontinued>
  </Product>
  <Product>
    <ProductID>53</ProductID>
    <ProductName>Perth Pasties</ProductName>
    <SupplierID>24</SupplierID>
    <CategoryID>6</CategoryID>
    <QuantityPerUnit>48 pieces</QuantityPerUnit>
    <UnitPrice>32.8000</UnitPrice>
    <UnitsInStock>0</UnitsInStock>
    <UnitsOnOrder>0</UnitsOnOrder>
    <ReorderLevel>0</ReorderLevel>
    <Discontinued>true</Discontinued>
  </Product>
  <Product1>
    <Total>77</Total>
  </Product1>
</NewDataSet>
I would also suggest you to take a look on jQuery Load tutorial to understand it’s syntax and implementation.

Let us now start building the codes.

The HTML Page

Here I will read the XML file from the HTML page using jQuery .load() method.

You can use any web page for the matter (.aspx, .cshtml, .php, etc).

Add the following controls in your page:

<button id="loadButton">Try</button>
<div id="tempDiv" style="display:none"></div>
<div id="resultDiv"></div>
<div id="pagingDiv"></div>
<img id="loadingImg" src="loading.gif" />
  • On the loadButton click, the XML file will be read and shown inside the tempDiv.
  • I will then convert the content of tempDiv to HTML Table and shown it inside the resultDiv.
  • The pagingDiv will contain the page links for navigation from one page to another.
  • The loadingImg will show a loading image during AJAX call.
Also add the following CSS to your page
<style>
    #loadingImg {
        display: none;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
 
    table {
        background-color: purple;
    }
 
        table tr th {
            background-color: #CCC;
            text-transform: capitalize;
        }
 
    #resultDiv {
        overflow: auto;
    }
 
    #pagingDiv {
        padding: 15px 0;
    }
 
        #pagingDiv .myDisableClass {
            background-color: #4CAF50;
        }
 
        #pagingDiv .myClass {
            background-color: #ebbebe;
        }
 
        #pagingDiv a, #pagingDiv span {
            display: inline-block;
            padding: 0px 9px;
            margin-right: 4px;
            border-radius: 3px;
            border: solid 1px #c0c0c0;
            background: #e9e9e9;
            box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
            font-size: .875em;
            font-weight: bold;
            text-decoration: none;
            color: #717171;
            text-shadow: 0px 1px 0px rgba(255,255,255, 1);
        }
 
            #pagingDiv a:hover {
                cursor: pointer;
                background: #fefefe;
                background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
                background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
            }
 
            #pagingDiv a.active {
                border: none;
                background: #616161;
                box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
                color: #f0f0f0;
                text-shadow: 0px 0px 3px rgba(0,0,0, .5);
            }
 
        #pagingDiv span {
            color: #f0f0f0;
            background: #616161;
        }
</style>

The jQuery Code

Now moving to the jQuery code where the reading and converting will take place. So in your page add the following lines of code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#reset").click(function (e) {
            location.reload();
        });
 
        $("#loadButton").click(function (e) {
            $("#tempDiv").load("products.xml", function (response, status, xhr) {
                if (status != "error") {
                    /*Hiding the loading image*/
                    $("#loadingImg").hide();
                    /*End*/
 
                    DisplayXML(1);
                }
            });
 
            /*Showing the loading image*/
            $("#loadingImg").show();
            /*End*/
 
        });
 
        function DisplayXML(pageNo) {
            var xmlDoc = $.parseXML($("#tempDiv").html());
            var xml = $(xmlDoc);
            var nodeName = xml.find("*").eq(1)[0].nodeName;
            var nodes = xml.find(nodeName);
 
            var pageSize = 5;
            totalRecords = nodes.length;
 
            /*Table Header*/
            var table = $("<table>");
            var tr = $("<tr>");
            $.each($(nodes[0]).find("*"), function (index, value) {
                var th = $("<th>");
                th.append(value.nodeName);
                tr.append(th);
            });
            table.append(tr);
            /*End*/
 
            /*Table Data*/
            for (i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ; i++) {
                var tr = $("<tr>");
                var child = $(nodes[i]).find("*");
 
                $.each(child, function (index, value) {
                    var td = $("<td>");
                    td.append($(value).text());
                    tr.append(td);
                });
 
                table.append(tr);
            }
            /*End*/
 
            $("#resultDiv").html(table);
 
            /*Paging*/
            var result = Paging(pageNo, 5, totalRecords, "myClass", "myDisableClass");
            $("#pagingDiv").html(result)
            /*Paging*/
        }
 
        $("#pagingDiv").on("click", "a", function () {
            DisplayXML($(this).attr("pn"));
        });
 
        function Paging(PageNumber, PageSize, TotalRecords, ClassName, DisableClassName) {
            var ReturnValue = "";
 
            var TotalPages = Math.ceil(TotalRecords / PageSize);
            if (+PageNumber > 1) {
                if (+PageNumber == 2)
                    ReturnValue = ReturnValue + "<a pn='" + (+PageNumber - 1) + "' class='" + ClassName + "'>Previous</a>   ";
                else {
                    ReturnValue = ReturnValue + "<a pn='";
                    ReturnValue = ReturnValue + (+PageNumber - 1) + "' class='" + ClassName + "'>Previous</a>   ";
                }
            }
            else
                ReturnValue = ReturnValue + "<span class='" + DisableClassName + "'>Previous</span>   ";
            if ((+PageNumber - 3) > 1)
                ReturnValue = ReturnValue + "<a pn='1' class='" + ClassName + "'>1</a> ..... | ";
            for (var i = +PageNumber - 3; i <= +PageNumber; i++)
                if (i >= 1) {
                    if (+PageNumber != i) {
                        ReturnValue = ReturnValue + "<a pn='";
                        ReturnValue = ReturnValue + i + "' class='" + ClassName + "'>" + i + "</a> | ";
                    }
                    else {
                        ReturnValue = ReturnValue + "<span style='font-weight:bold;'>" + i + "</span> | ";
                    }
                }
            for (var i = +PageNumber + 1; i <= +PageNumber + 3; i++)
                if (i <= TotalPages) {
                    if (+PageNumber != i) {
                        ReturnValue = ReturnValue + "<a pn='";
                        ReturnValue = ReturnValue + i + "' class='" + ClassName + "'>" + i + "</a> | ";
                    }
                    else {
                        ReturnValue = ReturnValue + "<span style='font-weight:bold;'>" + i + "</span> | ";
                    }
                }
            if ((+PageNumber + 3) < TotalPages) {
                ReturnValue = ReturnValue + "..... <a pn='";
                ReturnValue = ReturnValue + TotalPages + "' class='" + ClassName + "'>" + TotalPages + "</a>";
            }
            if (+PageNumber < TotalPages) {
                ReturnValue = ReturnValue + "   <a pn='";
                ReturnValue = ReturnValue + (+PageNumber + 1) + "' class='" + ClassName + "'>Next</a>";
            }
            else
                ReturnValue = ReturnValue + "   <span class='" + DisableClassName + "'>Next</span>";
 
            return (ReturnValue);
        }
 
    });
</script>

Explanation:

  • The click event of the button first loads the XML file and shows it inside the tempDiv. This div remains hidden all the time.
  • Inside the Callback function I check if status is not error. Then I am hiding the loading image and calling the DisplayXML() Function.
DisplayXML() Function

This function is the brain of my code which does the XML to HTML conversion and then displays it. It takes pageNo as its parameter because it shows the XML in page by page manner.

I loop through all the nodes of the XML file and append them to a table. The appending is done through jQuery Append method.
The Paging() function creates the Pagination links using jQuery Pagination, and helps user to read the XML in page by page manner.

Download the codes using the below link:

DOWNLOAD

< Previous
Next >

SHARE THIS ARTICLE

  • linkedin
  • reddit

Related Tutorials:

ASP.NET Web Forms – Sorting GridView with jQuery Load method with no page postback
jquery parent jQuery Parent Method – .parent() complete usage guide with codes
javascript promise Learn JavaScript Promise method in easiest way
yogihosting

ABOUT THE AUTHOR

I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate