{"id":76995,"date":"2014-04-28T14:27:43","date_gmt":"2014-04-28T18:27:43","guid":{"rendered":"http:\/\/www.bu.edu\/tech\/?page_id=76995"},"modified":"2023-04-04T12:56:21","modified_gmt":"2023-04-04T16:56:21","slug":"sortable-searchable-tables","status":"publish","type":"page","link":"https:\/\/www.bu.edu\/tech\/services\/cccs\/websites\/www\/wordpress\/how-to\/sortable-searchable-tables\/","title":{"rendered":"Sortable &#038; Searchable Tables"},"content":{"rendered":"<ul>\n<li><a href=\"#sortable\">How to Make Sortable Tables<\/a>\n<ul>\n<li><a href=\"#example-sortable\">Example Sortable Table<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#searchable\">How to Make Searchable and Sortable Tables<\/a>\n<ul>\n<li><a href=\"#example-searchable\">Example Searchable and Sortable Table<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><a name=\"sortable\" id=\"sortable\"><\/a>How to Make Sortable Tables<\/h3>\n<p><strong>&lt;table class=&#8221;sortable&#8221;&gt;<\/strong><\/p>\n<p>Adding the &#8220;sortable&#8221; class to a <strong>&lt;<\/strong>table<strong>&gt;<\/strong> element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column&#8217;s value. Tables must use &lt;thead&gt; and &lt;th&gt; tags for sortable functionality to work. The &lt;th&gt; tag defines a header cell in an HTML table. An HTML table has two kinds of cells:<\/p>\n<ul>\n<li>Header cells &#8211; contains header information (created with the &lt;th&gt; element)<\/li>\n<li>Standard cells &#8211; contains data (created with the &lt;td&gt; element)<\/li>\n<\/ul>\n<p>You will need to build or edit the table with the heading codes in the\u00a0 WordPress Admin Text\/HTML View rather than the Visual view in order to add the class to the table element and add table heading elements.\u00a0 For instance, to make the example table of the 2012 Gold Medal Divers below, the beginning of the HTML table code is:<\/p>\n<pre><strong>&lt;table class=\"sortable\"&gt;<\/strong>\r\n<strong> &lt;thead&gt;<\/strong>\r\n<strong>   &lt;tr&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Athlete<strong>&lt;\/th&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Age<strong>&lt;\/th&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Country<strong>&lt;\/th&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Gold Medals<strong>&lt;\/th&gt;<\/strong>\r\n<strong>  &lt;\/tr&gt;<\/strong>\r\n<strong> &lt;\/thead&gt;<\/strong>\r\n<strong>  &lt;tbody&gt;<\/strong>\r\n<strong>  &lt;tr&gt;<\/strong>\r\n<strong>   &lt;td&gt;<\/strong>David Boudia<strong>&lt;\/td&gt;<\/strong>\r\n<strong>   &lt;td&gt;<\/strong>23<strong>&lt;\/td&gt;<\/strong>\r\n<strong>   &lt;td&gt;<\/strong>United States<strong>&lt;\/td&gt;<\/strong>\r\n<strong>   &lt;td&gt;<\/strong>1<strong>&lt;\/td&gt;<\/strong>\r\n<strong>  &lt;\/tr&gt;<\/strong>\r\n<strong>  &lt;\/tbody&gt;<\/strong>\r\n<strong>&lt;\/table&gt;<\/strong>\r\n(repeat the row within the tbody tag for each table row needed.)<\/pre>\n<p>&nbsp;<\/p>\n<h4><a name=\"example-sortable\"><\/a>Example sortable table&#8211;click on any of the header cells of this table to sort by that column:<\/h4>\n<h3 aria-hidden=\"true\">2012 Gold Medal Olympic Divers<\/h3>\n<p><!-- This h3 is not included in the accessibility tree and therefore ignored by the rule --><\/p>\n<table class=\"sortable\">\n<thead>\n<tr style=\"background-color: #ebebeb;\">\n<th>Athlete<\/th>\n<th>Age<\/th>\n<th>Country<\/th>\n<th>Gold Medals<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>David Boudia<\/td>\n<td>23<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Chen Ruolin<\/td>\n<td>19<\/td>\n<td>China<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>He Zi<\/td>\n<td>21<\/td>\n<td>China<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Qin Kai<\/td>\n<td>26<\/td>\n<td>China<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Wu Minxia<\/td>\n<td>26<\/td>\n<td>China<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Ilya Zakharov<\/td>\n<td>21<\/td>\n<td>Russia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Cao Yuan<\/td>\n<td>17<\/td>\n<td>China<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Luo Yutong<\/td>\n<td>26<\/td>\n<td>China<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Wang Hao<\/td>\n<td>19<\/td>\n<td>China<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Zhang Yanquan<\/td>\n<td>18<\/td>\n<td>China<\/td>\n<td>1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><a name=\"searchable\" id=\"searchable\"><\/a>How to Make Searchable and Sortable Tables<\/h3>\n<p><strong>&lt;table class=&#8221;searchable sortable&#8221;&gt;<\/strong><\/p>\n<p>Adding the &#8220;searchable sortable&#8221; class to a table tag also adds a search box to the table header. As the user types in the search box, table rows that do not have values matching the search input will be hidden. The rest of the code would be similar to the sortable table. Tables must use &lt;thead&gt; and &lt;th&gt; tags for sortable and searchable functionality to work. The &lt;th&gt; tag defines a header cell in an HTML table. An HTML table has two kinds of cells:<\/p>\n<ul>\n<li>Header cells &#8211; contains header information (created with the &lt;th&gt; element)<\/li>\n<li>Standard cells &#8211; contains data (created with the &lt;td&gt; element)<\/li>\n<\/ul>\n<p>For instance, to make the example table of the 2012 Gold Medal Swimmers below, the beginning of the HTML table code is:<\/p>\n<pre><strong>&lt;table class=\"searchable sortable\"&gt;<\/strong>\r\n<strong> &lt;thead&gt;<\/strong>\r\n<strong>   &lt;tr&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Athlete<strong>&lt;\/th&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Age<strong>&lt;\/th&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Country<strong>&lt;\/th&gt;<\/strong>\r\n<strong>     &lt;th&gt;<\/strong>Gold Medals<strong>&lt;\/th&gt;<\/strong>\r\n<strong>  &lt;\/tr&gt;<\/strong>\r\n<strong> &lt;\/thead&gt;<\/strong>\r\n<strong> &lt;tbody&gt;<\/strong>\r\n<strong>   &lt;tr&gt;<\/strong>\r\n<strong>    &lt;td&gt;<\/strong>Michael Phelps<strong>&lt;\/td&gt;<\/strong>\r\n<strong>    &lt;td&gt;<\/strong>27<strong>&lt;\/td&gt;<\/strong>\r\n<strong>    &lt;td&gt;<\/strong>United States<strong>&lt;\/td&gt;<\/strong>\r\n<strong>    &lt;td&gt;<\/strong>4<strong>&lt;\/td&gt;<\/strong>\r\n<strong>   &lt;\/tr&gt;<\/strong>\r\n<strong>  &lt;\/tbody&gt;<\/strong>\r\n<strong>&lt;\/table&gt;<\/strong>\r\n(repeat the row within the tbody tag for each table row needed.)<\/pre>\n<h4><a name=\"example-searchable\"><\/a>Example searchable and sortable table&#8211;enter &#8220;China&#8221; in the search box to search:<\/h4>\n<p><!-- No content is needed here. A subsection may start immediately at the beginning of a section. --><\/p>\n<h3 aria-hidden=\"true\">2012 Gold Medal Olympic Swimmers\/h3><br \/>\n<!-- This h3 is not included in the accessibility tree and therefore ignored by the rule --><\/p>\n<table class=\"searchable sortable\">\n<thead>\n<tr style=\"background-color: #ebebeb;\">\n<th class=\"header\">Athlete<\/th>\n<th class=\"header\">Age<\/th>\n<th class=\"header\">Country<\/th>\n<th class=\"header\">Gold Medals<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Michael Phelps<\/td>\n<td>27<\/td>\n<td>United States<\/td>\n<td>4<\/td>\n<\/tr>\n<tr>\n<td>Alicia Coutts<\/td>\n<td>24<\/td>\n<td>Australia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Missy Franklin<\/td>\n<td>17<\/td>\n<td>United States<\/td>\n<td>4<\/td>\n<\/tr>\n<tr>\n<td>Ryan Lochte<\/td>\n<td>27<\/td>\n<td>United States<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Allison Schmitt<\/td>\n<td>22<\/td>\n<td>United States<\/td>\n<td>3<\/td>\n<\/tr>\n<tr>\n<td>Sun Yang<\/td>\n<td>20<\/td>\n<td>China<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Nathan Adrian<\/td>\n<td>23<\/td>\n<td>United States<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Yannick Agnel<\/td>\n<td>20<\/td>\n<td>France<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Brittany Elmslie<\/td>\n<td>18<\/td>\n<td>Australia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Matt Grevers<\/td>\n<td>27<\/td>\n<td>United States<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Cullen Jones<\/td>\n<td>28<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Ranomi Kromowidjojo<\/td>\n<td>21<\/td>\n<td>Netherlands<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Camille Muffat<\/td>\n<td>22<\/td>\n<td>France<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Mel Schlanger<\/td>\n<td>25<\/td>\n<td>Australia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Emily Seebohm<\/td>\n<td>20<\/td>\n<td>Australia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Rebecca Soni<\/td>\n<td>25<\/td>\n<td>United States<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Dana Vollmer<\/td>\n<td>24<\/td>\n<td>United States<\/td>\n<td>3<\/td>\n<\/tr>\n<tr>\n<td>Ricky Berens<\/td>\n<td>24<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Brendan Hansen<\/td>\n<td>30<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Jessica Hardy<\/td>\n<td>25<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Chad le Clos<\/td>\n<td>20<\/td>\n<td>South Africa<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Cl\u00e9ment Lefert<\/td>\n<td>24<\/td>\n<td>France<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Amaury Leveaux<\/td>\n<td>26<\/td>\n<td>France<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Oussama Mellouli<\/td>\n<td>28<\/td>\n<td>Tunisia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Jeremy Stravius<\/td>\n<td>24<\/td>\n<td>France<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Nick Thoman<\/td>\n<td>26<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Ye Shiwen<\/td>\n<td>16<\/td>\n<td>China<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Alyssa Anderson<\/td>\n<td>21<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Alain Bernard<\/td>\n<td>29<\/td>\n<td>France<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Rachel Bootsma<\/td>\n<td>18<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Cate Campbell<\/td>\n<td>20<\/td>\n<td>Australia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Tyler Clary<\/td>\n<td>23<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Claire Donahue<\/td>\n<td>23<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Conor Dwyer<\/td>\n<td>23<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Fabien Gilot<\/td>\n<td>28<\/td>\n<td>France<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>D\u00e1niel Gyurta<\/td>\n<td>23<\/td>\n<td>Hungary<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Charlie Houchin<\/td>\n<td>24<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Jiao Liuyang<\/td>\n<td>22<\/td>\n<td>China<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Yolane Kukla<\/td>\n<td>16<\/td>\n<td>Australia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Breeja Larson<\/td>\n<td>20<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Katie Ledecky<\/td>\n<td>15<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Libby Lenton-Trickett<\/td>\n<td>27<\/td>\n<td>Australia<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Florent Manaudou<\/td>\n<td>21<\/td>\n<td>France<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Tyler McGill<\/td>\n<td>24<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Matt McLean<\/td>\n<td>24<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Ruta Meilutyte<\/td>\n<td>15<\/td>\n<td>Lithuania<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Lauren Perdue<\/td>\n<td>21<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>\u00c9va Risztov<\/td>\n<td>26<\/td>\n<td>Hungary<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Eric Shanteau<\/td>\n<td>28<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Davis Tarwater<\/td>\n<td>28<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Cameron van<br \/>\nder Burgh<\/td>\n<td>24<\/td>\n<td>South Africa<\/td>\n<td>1<\/td>\n<\/tr>\n<tr>\n<td>Shannon Vreeland<\/td>\n<td>20<\/td>\n<td>United States<\/td>\n<td>1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>How to Make Sortable Tables Example Sortable Table How to Make Searchable and Sortable Tables Example Searchable and Sortable Table How to Make Sortable Tables &lt;table class=&#8221;sortable&#8221;&gt; Adding the &#8220;sortable&#8221; class to a &lt;table&gt; element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column&#8217;s value&#8230;.<\/p>\n","protected":false},"author":1303,"featured_media":0,"parent":304,"menu_order":19,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/76995"}],"collection":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/users\/1303"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/comments?post=76995"}],"version-history":[{"count":7,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/76995\/revisions"}],"predecessor-version":[{"id":144751,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/76995\/revisions\/144751"}],"up":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/304"}],"wp:attachment":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/media?parent=76995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}