<s:data_table>

p>Used for data tables and includes optional search bar, pagination, and footer button group. Some pertinent notes regarding data tables are:

  • Tables should always include `<thead>` and `<tbody>` tags, as it helps determine things such as total number of columns, and header columns.
  • If `has_search` attribute is set to 1, a new row will be added to the table just after the opening `<thead>` tag with the search box.
  • Syrus will go through all `<th>` tags within the last row of the `<thead>`, and replace them with the contents of the `[[data_table.th]]` HTML snippet found within the tags.txt file.
    • Within the `<th>` columns you may place a `has_sort="1"` attribute, and if present, the sort ascending / descending links will be placed within the header column. Look at the tags.txt file, and you will see how this works.
    • If the `has_sort="1"` attribute is present, you may add an optional `alias="xxx"` attribute where `xxx` is the name of the column to sort by and is replaced as the `~col_alias~` merge field you will see in the tags.txt file. If not present, this defaults to the lowercase with underscores version of the column name.
  • You may place `<s:button_group> ... </s:button_group>` tags anywhere within the `<s:data_table< tag. If present, they will be removed, and the contents will be placed in the bottom left corner of the table inside a footer row. If pagination is being used, the footer row will consist of the button group on the left side, and the pagination links on the right side of the row.

The `<s:data_table>` tag tag supports the following attributes:

Attribute Required Description
id No Unique id of the table element. Defaults to "tblMain".
has_search No Can be either 0 or 1, and if set to 1, a search box will be placed at the top right corner of the table. Defaults to 0.
search_href No If `has_search` is 1, this is where the search button links to, generally a Javascript call.
search_label No If `has_search` is 1, the place holder of the search box. Defaults to "Search".
total_rows No Used for pagination, and the total number of rows available in the full result set.
rows_per_page No Used for pagination, and the number of rows displayed per page. Defaults to 25.
current_page No Used for pagination, and the current page being displayed. Defaults to 1.
max_items No Used for pagination, and is the maximum number of page items to display within the pagination links, not including the prev / next items. Defaults to 10.
pgn_href No Used for pagination, and is the `href` of each page item link. The text "page=X" will be appended to this href, where X is the page number of the item.
sort_href No Used within sorting array links within header columns (see below), and is the location those links will point to, generally a Javascript call.


Example HTML


<s:data_table has_search="1" total_rows="384" current_page="3" rows_per_page="25">

<s:button_group>
    <s:button href="#" label="Delete Checked Rows">
</s:button_group>
<thead><tr>
    <th has_sort="1">Date</th>
    <th>Full Name</th>
    <th has_sort="1">Amount</th>
    <th>Manage</th>
</tr></thead>

<tbody><tr>
    <td>Mar 21, 2021 at 14:22</td>
    <td>John Smith</td>
    <td>$29.95</td>
    <td align="center"><s:button href="#" label="Manage"></td>
</tr><tr>
    <td>Mar 24, 2021 at 09:53</td>
    <td>Mike Jacobs</td>
    <td>$53.95</td>
    <td align="center"><s:button href="#" label="Manage"></td>
</tr>
</tbody></s:data_table>

Example Output:
Date Full Name Amount Manage
Mar 21, 2021 at 14:22 John Smith $29.95 Manage
Mar 24, 2021 at 09:53 Mike Jacobs $53.95 Manage
Delete Checked Rows 51 - 75 of 384