Test REST Server
In order to properly evaluate DataTables against our “good enough” criteria, I set up a test REST server that returned “real” JSON data. The server contains a list of over 10,000 objects.

While the data is real, the response time is not. The test REST server pre-fetches all real data from back-end services, then cache’s that data internally in order to eliminate server response time in the evaluation. While real server calls are measured in 10ths of seconds, my test REST server’s average response time is 3ms for any given page of 50 objects.

DataTables
- Home: http://datatables.net/
- Examples: http://www.datatables.net/examples/
- Tests: https://github.com/DataTables/DataTables/tree/master/media/unit_testing
- Params: http://datatables.net/ref (125 params supported)
- Themes: http://datatables.net/styling/themes/ui-darkness

I created a test html file which creates a DataTables table and loads 50 objects at a time from the REST end-point mentioned above. Remember, it’s a cache’d list.

1) Performance is #1

• performance is outstanding
• 50 records: desktop, round-trip is 3ms, iPad3 is about .3s – .5s
• 500 records: desktop, round-trip is 15ms, iPad3 is about 1s
• Like SlikGrid, DataTables implements Virtual Rendering with its bDeferRender parameter Rendered rows/cells are retained for 1-page scrolling
• I like how it handles the scroll bar on an iPad3. With no addl coding, it auto hides the bar, and lets the table take over the available space. Further, when scrolling, I like how it uses the iPad3′s “thin” scroll bar. Finally, it uses the device’s fast swipe gesture to continue to scroll the list even after you’ve quit touching; obviously it stops after a second or two …just as you’d expect.

2) Device requirements: performance and functionality will be determined by low-powered, ICS-based tablets, not older Honeycomb devices, nor smart phones

• As noted above, performance on an iPad3 is outstanding
• Performance on a Honeycomb smart phone (Galaxy S2 on T-Mobile) is acceptable (but not part of our required criteria)

3) Table paging and navigation will be performed by next, prev, first, last, and #’s links

• DataTables supports both paging-via-navigation-controls, and paging-via-scrollbar

4) The table will load 1 “page” of data at a time, if the rows don’t “fit” the vertical table size, users may scroll to see the rest of the page

• DataTables will load 1 “page” of data at a time
• If the fetched rows don’t “fit” the vertical table size, users may scroll to see the rest of the page
• The table can be sized such that it grows as needed to accommodate all rows

5) The table will not cache previous requests (to protect mobile devices; and if #1 is met, no need)

• DataTables by default does not cache previous requests
• DataTables can be set up to pre-fetch addl pages as needed

6) All paging, filtering, sorting will be performed by the back-end; none in the client

• DataTables supports paging, filtering, and sorting in both the UI and the back-end

7) We will filter on only string data originating from the server for now

• DataTables has made some effort to support sorting and filtering on representations of the data other than what’s displayed (Enums vs their string implementation; dates; etc.) However, I believe this is for client-side processing only, and is not part of ajax-based solutions.

8) Code size should not exceed 200K (minified and gzip’d); the smaller the better

• File size: 68K minified / 20K gzip’d. This is outstanding !!
• With addl plugins (FixedColumns, Scroller, etc.), + 20K minified / 6K gzip’d

9) We will only select a mature, well supported Table widget. We will not make our own.

• DataTables is currently in version 1.9.2
• and has been developed now for 4 years, since 2008
• has over 10,000 threads in its on-line forums
• backed by a suite of 2800 unit tests
• provides over 130 pre-built examples

10) Theming Support :

• DataTables supports JQuery ThemeRoller classes
• DataTables allows users to specify what class names to associate with HTML elements
• DataTables can render its add-on widgets (nav bar, search field, etc.) in HTML-provided div’s

11) Table must by stylable to may our particular look and feel

• With DataTables liberal handling of class names (user-definable globals hold class names), I believe it can be styled to match our needs
• DataTables provides a Column Renderer which is passed the backing row Object and the property value …giving the renderer the opportunity to display addl fields in each cell
• DataTables permits row expansion showing more details about a row Object

12) Row selection (single select for now; multi-select for future)

• DataTables supports single selection via row-selection or checkboxes
• DataTables supports multi-select across page boundries (sending selections to server)

13) Links / Actions – in-row actions for now; likely top-of list actions for future

• DataTables supports any buttons you need to place in a row
• If requested, DataTables will add unique IDs to each row in a paged table
• DataTables also supports custom events which code can bind to

14) Editing: no in-cell editing for now

• With its Editor plugin, DataTables does support in-cell editing if desired

15) Alternate Views: no “View As…” alternate views for now

• DataTables does not directly support alternate views for its tables

16) No conclusion on table width handling. However, most people would like to see columns shrink until it’s ridiculous, then hide low-priority columns altogether

• DataTables supports a dynamic width for its tables
• Columns resize when the table resizes
• Data within the cells re-wraps unto addl lines as needed (IOW, row height is not fixed when paginating via the navigation bar)
• Uncertain if DataTables could auto-show/hide low priority columns based on table width

17) The table needs to support a distribution-friendly license

• DataTables is dual licensed under the GPL v2 license or a BSD (3-point) license
• I’m no lawyer, but I suspect the BSD license is sufficient

Notable Params — 125 params exist!!

sServerMethod    - HTTP method to use GET | POST
bAutoWidth       - enable auto col width calculation; disable if col widths are in aoColumns
bProcessing      - show a "processing request" message
bPaginate        - enable pagination
sPaginationType  - style of pagination buttons/links; two_buttons
bLengthChange    - show the page size combo; requires bPaginate
aLengthMenu      - [[values], [display]]: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
iDisplayLength   - size of a page
bFilter          - show the search box; to remove box but keep filter ability, use sDom
bRegEx           - interpret search string as a regEx expression
bSmart           - use DataTable's smart filtering methods to match words at any point in the data
bJQueryUI        - enable JQuery UI ThemeRoller support; affects visibility of prev/next links
bInfo            - Show status bar details about the current table data; 1 to 10 of 100 (# filtered)
bScrollInfinite  - Pagination by using only the scroll bar
iScrollLoadGap   - Amount of scrolling left to go before pre-fetching the next page
bScrollCollapse  - Controls if the table's viewport should be shrunk on the last page
sScrollX         - Specify horizontal scrolling; blank = disabled
sScrollY         - Specify vertical scrolling
bSort            - Enable sorting; individual cols can be disabled /w bSortable option on each col "bSortClasses"
bStateSave       - Enable state saving; uses cookies
bDeferRender     - Only draw those rows that are visible; draw addl as needed
bServerSide      - filter, sort, page on server; must be used with sAjaxSource
sAjaxSource      - URL: /rest/service/endpoint
aoColumns        - Define column model
fnServerParams   - Define any addl data to send with page request
sDom             - Tell DataTables in what div's to render it search, msgs, & nav bar widgets
fnRender         - Rendering function used to draw cell contents