Displaying and Customizing Your Table

The display and generation of the HTML that encapsulates every Movable Type listing is facilitated by the <mtapp:listing> tag. This tag, when populated with the right data (see Implementing a Listing Mode Handler), will create the complex pagination controls for you.

The contents contained by the <mtapp:listing> tag is the table header and table data itself. That is all you need to worry about when displaying a table. Look at this complete example of an <mtapp:listing> tag as a reference for a three column table, with checkboxes for selecting rows.

This code sample below should be inserted into the listing template stub in place of the <mtapp:listing> tag found there.

<mtapp:listing type="entry" 
    default="No my objects could be found." 
    empty_message="No my objects could be found.">
    <mt:if name="__first__">
      <thead>
        <tr>
          <th class="cb"><input type="checkbox" id="select-all-checkbox"  
            name="id-head" value="all" class="select" /></th>
          <th>Column 1</th>
             <th>Column 2</th>
          <th>A Date</th>
        </tr>
      </thead>
      <tbody>
    </mt:if>
    <tr class="<mt:if name="__odd__">odd<mt:else>even</mt:if>">
      <td class="cb">
        <input type="checkbox" name="id" 
           value="<mt:var name="id">" class="select" />
      </td>
      <td><mt:var name="column1" remove_html="1"></td>
      <td><mt:var name="column2" remove_html="1"></td>
      <td><mt:var name="date" remove_html="1"></td>
    </tr>
</mtapp:listing>

Enabling Row Selection

If your table uses checkboxes to allow users to select multiple rows in the table, you will need to append the following javascript to the html > head of your page:

<mt:setvarblock name="html_head" append="1">
  <script type="text/javascript"><!--
    var tableSelect;
    function init() {
        tableSelect = new TC.TableSelect("entry-listing-table");
        tableSelect.rowSelect = true;
    }
    TC.attachLoadEvent(init);
  </script>
</mt:setvarblock>

Note: Make sure you change the value of “entry-listing-table” to point to the DOM ID of your table. The value of the DOM ID is generated programmatically and corresponds to the following pattern: <object type>-listing-table.