Paging mechanism using XML+XSLT

Get the WebProNews Newsletter:

[ Business]

XSLT works pretty good to transform XML documents, but the things are getting much better when we are able to pass arguments to the XSL. This article will show how arguments can be passed without server side logic involved.

Almost every web project has a part where a large list of items needs to be shown on the user’s browser. Imagine that we have a list with thousands of items, we do not want to show them on one web page, but rather have a navigation bar to scroll between different pages of the list. The goal is clear and there are plenty of ideas how to accomplish that generating dynamic pages with JSP, PHP, and ASP for example. But how about a pure XML+XSLT solution, where there is no logic on the server to generate the dynamic content, but all happens on the user’s browser.

1. The XML

The XML (mylist.xml) is pretty simple. It has a list of items. Every item has element1 and element2 children. The idea is that the items to be many, but for simplicity the example has only 10 and the goal is to show them by 3 on one page having “Prev” and “Next” links to navigate. Click on driver.html (IE only) for a working example.

<?xml version="1.0"?>
&nbsp <item>
&nbsp&nbsp <element1>item 1 - element 1</element1>
&nbsp&nbsp <element2>item 1 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 2 - element 1</element1>
&nbsp&nbsp <element2>item 2 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 3 - element 1</element1>
&nbsp&nbsp <element2>item 3 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 4 - element 1</element1>
&nbsp&nbsp <element2>item 4 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 5 - element 1</element1>
&nbsp&nbsp <element2>item 5 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 6 - element 1</element1>
&nbsp&nbsp <element2>item 6 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 7 - element 1</element1>
&nbsp&nbsp <element2>item 7 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 8 - element 1</element1>
&nbsp&nbsp <element2>item 8 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 9 - element 1</element1>
&nbsp&nbsp <element2>item 9 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 10 - element 1</element1>
&nbsp&nbsp <element2>item 10 - element 2</element2>
&nbsp </item>

2. The controller XML

The main question is how to pass arguments to XSL that will be used for the transforming of our original mylist.xml. The answer is that we create a very simple XML. It has elements and attributes that can be treated as arguments when parsed from the XSL. We are going to have 3 arguments:

  • the index of the first item that is going to be shown
  • the number of items per page
  • the name of the original XML document containing all items
  • We call this a controller XML:

    <?xml version="1.0"?>
    &nbsp <xml-doc-name start="1" limit="3">mylist.xml</xml-doc-name>

    3. The XSL

    First, the XSL matches the /xml-controller/xml-doc-name element (line 4) from the controller XML to grab all arguments (lines 5-7).

    Second, it loads the original XML document (lines 9-10) using the document XSL function. The interesting part (line 10) is that it uses XPath expression to select only elements that have position greater or equal than the start variable and less or equal than the end variable. This part is essential of implementing the paging mechanism.

    The rest (lines 12-38) generates the HTML and shows the elements in a table. Lines 18-20 generate the “Prev” link if necessary and line 23 generates the “Next” link. Lines 30-35 generate all elements that have matched our criteria at line 10.

    4. The JavaScript

    Remember that our goal was everything to happen on the user’s browser (no server side logic), so finally, we need an HTML page that has JavaScript, which drives the XSLT transformation.

    We assume that the XML and XSL documents are in the same folder where this page is, so the JavaScript gets the portion of the URL up to the page name (lines 10-12). This part will be used later when we load the XML document with the document XSL function, otherwise we will get an “Access Denied”.

    We parse the URL this page is loaded from and get all arguments (lines 15-17), which we will use to build the controller XML that is being processed by the XSL.

    We build the controller XML (lines 20-24), then load it (lines 27-29), load the XSL (lines 32-34), and proceed with the transformation (line 37).

    Notice that this JavaScript uses the Microsoft.XMLDOM object, which makes it work only under Internet Explorer. However with a small change you can make it work under Netscape as well.

    5. Conclusion

    This example does not use server side logic, which is interesting, but makes the whole XML to be loaded from the browser first and then only a part of it shown. Although this is not a good practice, it gives the idea of passing arguments to an XSL via a very simple XML that we called a controller.

    All source codes are available for download: mylist.xml, mylist.xsl, and driver.html (IE only)

    My name is Stanimir Stanev. I am working as Senior Java Developer for
    CEO Consulting in Austin Texas. The last 4 years I am working on several
    Java projects at IBM that are part of self-monitoring systems.


    Paging mechanism using XML+XSLT
    About Stanimir Stanev
    My name is Stanimir Stanev. I am working as Senior Java Developer for CEO Consulting in Austin Texas. The last 4 years I am working on several Java projects at IBM that are part of self-monitoring systems.

    www.stanev.com WebProNews Writer
    Top Rated White Papers and Resources
    • http://www.ahmbay.com ahmet

      Thanks for this article, but i need paging in php xml comp.

    • Suprakash Khuntia

      Hi Stanev,

      I created the files as suggested in your post and tried to execute it. But I am getting the following error.

      Webpage error details

      User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8)
      Timestamp: Wed, 25 Apr 2012 04:14:04 UTC

      Message: Number parameter expected.

      Line: 33
      Char: 5
      Code: 0
      URI: file:///C:/Test/driver.html

      The xml file is mylist.xml

      item 1 – element 1
      item 1 – element 2

      item 2 – element 1
      item 2 – element 2

      item 3 – element 1
      item 3 – element 2

      item 4 – element 1
      item 4 – element 2

      item 5 – element 1
      item 5 – element 2

      item 6 – element 1
      item 6 – element 2

      item 7 – element 1
      item 7 – element 2

      item 8 – element 1
      item 8 – element 2

      item 9 – element 1
      item 9 – element 2

      item 10 – element 1
      item 10 – element 2

      XSLT file is mylist.xslt

      = $start and position() ‘<= $end]”/>

      dynamic XML+XSL example

      = 1″>


      Element 1
      Element 2

      html file is : driver.html

      Paging mechanism using XML+XSLT

      url_root = this.document.location.href
      alert(“url_root is : ” + url_root);
      page_name = url_root.split(“/”).pop().split(“?”)[0];
      url_root = url_root.substring(0, url_root.indexOf(page_name));

      var args=getURLArguments(document.location.href);
      var start = args[‘start’] ? args[‘start’] : 1;
      var limit = args[‘limit’] ? args[‘limit’] : 3;

      xml_text = ”;
      xml_text += ”;
      xml_text += ‘ ‘ + url_root + ‘c:/Test/mylist.xml';
      xml_text += ”;
      var xml = new ActiveXObject(“Microsoft.XMLDOM”);

      var xsl = new ActiveXObject(“Microsoft.XMLDOM”);
      xsl.async = false;


      function getURLArguments(url) {
      alert(“URL is :” +url);
      var args = {};
      query_str = url.substring(url.indexOf(‘?’) + 1);
      var args_arr = query_str.split(‘&’);
      for(var i = 0; i < args_arr.length; i++) {
      var arg_arr = args_arr[i].split('=');
      args[arg_arr[0]] = unescape(arg_arr[1]);
      return args;


    • Join for Access to Our Exclusive Web Tools
    • Sidebar Top
    • Sidebar Middle
    • Sign Up For The Free Newsletter
    • Sidebar Bottom