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

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

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

  • Load an XML file using jQuery Load Method.
  • Display it in HTML table.
  • The HTML table has paging.
  • With paging, the content will be shown in page by page manner.
  • This whole thing will be based on AJAX and there will be asynchronous operations.

The XML to Read with jQuery Load Method

Here you can use any XML file with any format.

For 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 its 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>&nbsp;&nbsp;&nbsp;";
                else {
                    ReturnValue = ReturnValue + "<a pn='";
                    ReturnValue = ReturnValue + (+PageNumber - 1) + "' class='" + ClassName + "'>Previous</a>&nbsp;&nbsp;&nbsp;";
                }
            }
            else
                ReturnValue = ReturnValue + "<span class='" + DisableClassName + "'>Previous</span>&nbsp;&nbsp;&nbsp;";
            if ((+PageNumber - 3) > 1)
                ReturnValue = ReturnValue + "<a pn='1' class='" + ClassName + "'>1</a>&nbsp;.....&nbsp;|&nbsp;";
            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>&nbsp;|&nbsp;";
                    }
                    else {
                        ReturnValue = ReturnValue + "<span style='font-weight:bold;'>" + i + "</span>&nbsp;|&nbsp;";
                    }
                }
            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>&nbsp;|&nbsp;";
                    }
                    else {
                        ReturnValue = ReturnValue + "<span style='font-weight:bold;'>" + i + "</span>&nbsp;|&nbsp;";
                    }
                }
            if ((+PageNumber + 3) < TotalPages) {
                ReturnValue = ReturnValue + ".....&nbsp;<a pn='";
                ReturnValue = ReturnValue + TotalPages + "' class='" + ClassName + "'>" + TotalPages + "</a>";
            }
            if (+PageNumber < TotalPages) {
                ReturnValue = ReturnValue + "&nbsp;&nbsp;&nbsp;<a pn='";
                ReturnValue = ReturnValue + (+PageNumber + 1) + "' class='" + ClassName + "'>Next</a>";
            }
            else
                ReturnValue = ReturnValue + "&nbsp;&nbsp;&nbsp;<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 thing 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.

You can see the demo or download the code using the below links:

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.