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 .

file using . Display it in a HTML table.

table. The HTML table has pagination system.

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>

jQuery Load tutorial to understand it’s syntax and implementation. I would also suggest you to take a look ontutorial 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 .

click, the XML file will be read and shown inside the . I will then convert the content of tempDiv to HTML Table and shown it inside the resultDiv .

to HTML Table and shown it inside the . The pagingDiv will contain the page links for navigation from one page to another.

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.

event of the button first loads the file and shows it inside the . This 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.

table . The appending is done through jQuery Append method. I loop through all the nodes of the XML file and append them to a. The appending is done throughmethod.

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