CANCELED - Tables - They're Not Just For Layout Anymore

by Matthew Orstad | at MinneBar 13 | 3:00 – 3:50 in Florida | View Schedule

DataTables is a free (MIT licensed) plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

With only a single line of code you can turn your boring old HTML table(s) into a magical widget with pagination, instant search and multi-column ordering.

Maybe you've been looking at AngularJS, Backbone, Ember, or some other JavaScript framework but they seem like overkill for what you want to do. Perhaps you've looked at the existing grid components and found them lacking. Or maybe you're just looking to take your existing tables up a notch without a lot of extra effort.

The best code is the code you don't have to write and DataTables is highly configurable (with it's own API and a wide variety of extensions including Editor, TableTools, FixedColumns and more) and adding the feature you want is often as simple as just enabling the correct config option.

  • Reorder columns
  • Show/Hide Columns
  • Save state (including search, ordering, filtering, etc) across browser sessions/pages
  • Excel in your browser
  • "Freeze" left most columns in place
  • Fix in place the header/footer/left/right columns
  • Keyboard cell navigation
  • Autofill allowing click and drag over cells, filling in information and incrementing numbers as needed
  • A virtual renderer to speed up display of large datasets
  • Copy/Export CSV, XLS, PDF to the system clipboard
  • Make your data responsive and available across multiple devices and screen sizes

If you're looking for rapid application development, DataTables supports almost any data source (including DOM, Javascript, Ajax and server-side processing). The plug-in itself is language agnostic however so you can use it with any server side language you want. Getting your data into DataTables can be as simple as:

SerializeJSON(qMyAwesomeQueryObject) We will cover Web SQL (old busted) for legacy browser and device support, IndexedDB (new hotness) for newer and evergreen browsers, as well as all the shims that will make working with them all easier. We will also cover syncing to traditional relational databases such as MySQL, as well as NoSQL with an emphasis on CouchDB.

DataTables is easy on the eyes too. The out of the box CSS is gorgeous but it's easily theme-able with your favorite CSS framework, including jQuery UI, Bootstrap, and Foundation.

DataTables comes batteries included, is fully internationalisable, and it's backed by a suite of over 2900+ unit tests with commercial support available.

Attendees Will Learn

  • Quickly get DataTables up and running
  • Properly configure DataTables to get the features you want with the least amount of coding required
  • Fix and prevent the most common gotchas
  • Sync to backend databases
  • Relational (MySQL)
  • NoSQL (CouchDB)
  • Customize the look and feel to match your existing CSS or CSS framework (Bootstrap, Foundation, etc)
  • Allow inline and batch editing of your data, including on touch screen devices
  • Perform multi-column advanced server side search with rich search input controls (datepickers, spinners, and other widgets)
  • Get your data into DataTables without rewriting your SQL code
  • Advanced search and filter options
  • RedQueryBuilder, a UI JavaScript component that will build your SQL for you
  • Materialized views, when your users just have to join all the tables
  • Walk out with a git repository full of examples and a slidedeck full of (hidden) notes as well as pretty pictures
  • If you know jQuery and want to make your tables sing then this session is for you.

I've even got some tips for making all the magic work back on ancient browsers like creaky old Internet Explorer 6/7 (don't worry, jQuery does most of the heavy lifting here too).


Matthew Orstad

This person hasn't yet added a bio.