Thursday 30th November, 2017

Experiment: SearchPane

Normally when I release new software for DataTables, I'll build it in a way that suits my own needs, generalising where I think it suitable, and then publish it and iterate from there. However, this time I'd like to take a slightly different approach and introduce a new plug-in for DataTables, called SearchPane, before including it in the DataTables extensions. This is both to see if there is interest in the features it provides and to request feedback for things that you would like to see modified / improved / added / removed / etc.

First things first - what is SearchPane? Quite simply it is a column filter interface for DataTables. It presents a list of values that can be found in a column, displaying them for an end user to be able to click, searching the table for matching data. It is a column OR based filter - i.e. adding multiple options will display the rows which match any of those data points.

Let's take a look at it in action:

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000

You can also see this example on its own and with a vertical display.

Initialisation

To be able to use SearchPane on your own pages, the first thing you'll need to do is include its CSS and Javascript on your page:

CSS
JS

Then simply add the searchPane option to your DataTable initialisation, which will enable SearchPane with its default options:

$('#myTable').DataTable( {
    searchPane: true
} )

Options

As with the existing extensions, SearchPane can be configured through a number of options. This initial release has only four options:

  • container - A DOM node, or function that returns a DOM node, which the search panes should be added to. This allows you to insert the panes anywhere in the document. Since the search panes take up more screen space than the majority of DataTables extensions, this can be quite useful.
  • columns - The columns that should have search panes shown. This is a column-selector, and any of those options can be used. Note also that the threshold option (below) can have an affect on what columns are shown.
  • insert - Defines if the search panes should be appended to (append) or prepended (prepend) the element defined by the container option. The default value is prepend.
  • threshold - SearchPane calculates the variance of the distribution of the data in the column and uses that to decide automatically if the search pane should be shown for that column or not. For example it is relatively pointless to show a pane for a column where every value is unique - the end user would be as well looking through the main table. The default for this is set to be 0.5, but it can be altered if required. A column with different values in every cell, will have a variance of 0.

Example

The following example shows SearchPane being initialised in a DataTable with a container and threshold specified:

$('#example').DataTable( {
    searchPane: {
        container: '.searchPanes',
        threshold: 0
    }
} );

API

When the data in the table is updated, you'll want the search panes to reflect this updated data - which can be done with the searchPane.rebuild() method - e.g.:

var table = $('#example').DataTable( {
    searchPane: true
} );

table.row.add( ... ).draw();
table.searchPane.rebuild();

Feedback

So what do you think? Is this something that should continue to be developed, and built into a full extension for DataTables? Please leave feedback in this forum thread so feedback can be combined together in a single location.

Also, the software is open source under the MIT license, please fork and provide pull requests with any changes you add.

Enjoy!