AJAX filtering for profile listings

— GOALS —

In CiviHR, the "Staff Directory" is implemented as a profile-listing. We want to make the staff directory more polished, intuitive, and responsive.

— STEPS —

Step 1. Proof-of-concept: Create a static web page with a <TABLE> that looks like the attached screenshot. Add jQuery DataTables. Implement full-text searching, filtering, and pagination. Share/discuss.

(To make the static page, you might use "civix generate:module org.civicrm.datatabledemo ; civix generate:page DataTableDemo civicrm/data-table-demo", then copy-paste markup from the staff directory into the DataTableDemo.tpl.)

Step 2. New-page: Add a new path, "civicrm/profile/table", which behaves like "civicrm/profile", but with two key differences: it returns all records (or up to 1500 records), and it uses the jQuery DataTables (from the mockup) for searching, filtering, and pagination.

(This will probably require making a subclass of CRM_Profile_Page_Listings and a new Smarty template.)

Step 3. hrstaffdir: Change the menu entry for the staff directory to use "civicrm/profile/table" instead of "civicrm/profile"

— ORIGINAL DESCRIPTION —

Filter profile listings using column header widgets instead of “Search Criteria” box. (DISCUSS: How to allow CiviHR to present header filters while old installs have search-box) (DISCUSS: With more people in Civi community about implications for other search screens – e.g. using a datagrid library that will be useful elsewhere)