Grid (data table)

As part of a new UI library, I have put together a full-featured data table (grid) using DataTables
(a table plug-in for jQuery) in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Grid supports the following features:

• Instant result filtering.
• Sorting (single or multiple columns).
• Pagination with page length option.
• Table data summary information.
• Loading message.
• Remember (cookie) state of table (sorting, paging, etc.).
• Internationalization (i18n) support.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Future Proof
  • Simple Implementation

The Demo

The Markup

Just a basic table, with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can take advantage of this full-featured Grid by simply setting a table's class attribute to "tableGrid" and setting the desired optional custom data attributes. The custom data attributes are optional, so the table could simple just have the class attribute and work with the default features enabled.

That sounds like a DRY solution to me (see UI Manifesto).

<table class="tableGrid"
    data-allowFilter="true"
    data-allowPaging="true"
    data-pagingType="full"
    data-pagingSizeOptions="[[10, 25, 50, -1], [10, 25, 50, 'All']]"
    data-pagingSizeDefaultOption="10"
    data-allowSort="true"
    data-sortDefault="[[2, 'asc']]"
    data-showSummaryInformation="true"
    data-showLoadingMessage="true"
    data-rememberState="false"
    data-i18nLoadingMessage="Loading..."
    data-i18nPageSizeTitleAndMenu="Items per page: _MENU_"
    data-i18nNoResultsMessage="There are no items to display."
    data-i18nNoResultsMessage="There are no items to display."
    data-i18nResultsInformation="Showing _START_ to _END_ of _TOTAL_ items"
    data-i18nNoResultsInformation="Showing 0 to 0 of 0 items"
    data-i18nResultsFilteredInformation="<br />(filtered from _MAX_ total items)"
    data-i18nFilterTitle="Filter: "
    data-i18nPaginateFirstLinkText="«"
    data-i18nPaginatePreviousLinkText="‹"
    data-i18nPaginateNextLinkText="›"
    data-i18nPaginateLastLinkText="»">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>State</th>
            <th>Zip Code</th>
        </tr>
    </thead>
    <tbody>
        Rows...
    </tbody>
</table>

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup, CSS, and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• DataTables
  (table plug-in for jQuery)
  Thank you Allan Jardine!