Creating a dynamic table

The AJAX Table widget extends the functionality of the standard XDIME 2 table. You can load the widget contents with AJAX requests, and defer loading until the user requests it. In addition, the body of the table can be divided into pages with a fixed number of rows.

Visual appearance

The data is presented in a form of a typical table. Initially, headers and a first set of rows are shown.

User interactions

The user can display a new set of data by a single row, or by pages. Each page contains predefined number of rows. The provided controls allow the user to navigate within and across the table.

XDIME 2 elements

The widget:table element defines the AJAX Table widget. It has the same attributes as the standard XDIME 2 table element. The content of the table can be downloaded from an external source. The widget:load element must be placed within widget:tbody. The optional cached-pages-count attribute may be used to control the number of cached pages.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:table</title>
  </head>
  <body>
    <widget:table>
      <thead>
        <tr>
          <th>Code</th>
          <th>Country name</th>
        </tr>
      </thead>
      <widget:tbody id="tbody" style="mcs-table-rows-per-page:10; color: #fff;">
        <widget:load src="http://localhost:8080/mcs/projects/client-app/service/table" when="onload"/>
        <tr style="background-color:#fff">
          <td>--</td>
          <td>Loading, please wait...</td>
        </tr>
      </widget:tbody>
    </widget:table>
    <div>
      <widget:button action="tbody#first-page">&lt;&lt;&lt;</widget:button>
      <widget:button action="tbody#previous-page">&lt;&lt;</widget:button>
      <widget:button action="tbody#previous-row">&lt;</widget:button> From <widget:display
        property="tbody#start-row-number"/> to <widget:display property="tbody#end-row-number"/> of
      <widget:display property="tbody#rows-count"/>
      <widget:button action="tbody#next-row">&gt;</widget:button>
      <widget:button action="tbody#next-page">&gt;&gt;</widget:button>
      <widget:button action="tbody#last-page">&gt;&gt;&gt;</widget:button>
    </div>
  </body>
</html>

The requesting URL may have some optional query parameters. mcs-start defines an initial row. If it is not set, loading will start from the first row. mcs-count specifies the total number of rows to download. All available rows are loaded by default. Both parameters range from 1 to 2^31-1.

The following request will download content of 20 rows, starting from row 5.

service/table?mcs-start=5&mcs-count=20

The update of the content must be enclosed by the response:tbody element. The optional total-rows-count attribute specifies the total number of rows in the table.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
  <response:head>
    <response:link rel="mcs:theme" href="/themes/main.mthm"/>
  </response:head>
  <response:body>
    <response:tbody total-rows-count="202">
      <tr style="background-color:#000">
        <td style="border: 1px solid #442">AD</td>
        <td style="border: 1px solid #442">ANDORRA</td>
      </tr>
      <tr style="background-color:#111">
        <td style="border: 1px solid #442">AE</td>
        <td style="border: 1px solid #442">UNITED ARAB EMIRATES</td>
      </tr>
    </response:tbody>
  </response:body>
</response:response>

You may specify an error message which will be displayed if there is no content to download.

<response:error>Information could not be retrieved.</response:error>

Styling the widget

The mcs-table-rows-per-page property specifies the number of rows displayed on a single page of the table. Only rows from the table body are taken into account; header and footer are omitted. When it is set to 'infinite', all rows will be shown.

Non-client fallback

If the content of the table is defined directly on a XDIME page, everything will be shown at once. If the load action is used, the widget will be ignored.