Wikia

Community Central

Comments2

Wikitable Filterable: The Filter for Long Tables

Sammylau September 16, 2013 User blog:Sammylau

For those you may know, MediaWiki package has already provided a "sortable" table function which the page viewer may sort column values by ascending or descending order. But somehow, you should expect a filter function to get some specific stuff from a long table. Here we are.

DemoEdit

A sample working example table is here: http://pad.wikia.com/wiki/User:Sammylau/FilterTable

SetupEdit

  • You have to be an admin of the wiki
  • Insert the code into the MediaWiki:Common.js page of your own wiki: (or extend it with proper syntax if you already using some plugins)
$(function(){
	importArticles({
		type: "script",
		articles: ["u:pad.wikia.com:MediaWiki:FilterTable.js"]
	});
});

UsageEdit

Just like the way you use the "sortable" class with tables. Turn into source code mode and modify your table header like this:

{|class="filterable"
|-
!Header Row 1
!Header Row 2
!Header Row 3
!Header Row 4
///Some table content inside///
|}

The filterable table will take the first row as your header column and finds distinct values in the column to make a list of filter options.

If some column is not suitable to put a filter there, do this:

{|class="filterable"
|-
!class="unfilterable"|Unique ID
!Header Row 2
!Header Row 3
!Header Row 4
///Some table content inside///
|}

So you have some unique IDs and filtering it isn't useful at all. You can turn off filter on that column by adding the unfilterable class.

NotesEdit

  • You might have multiple filterable tables in the same page. It works fine.
  • You can use filterable with sortable as a combo. However, you CANNOT have a column with both filtering and ordering functions. You have to turn off either one (or both) function in your code like this:
{|class="filterable sortable"
|-
!class="unfilterable"|Unique IDs
!class="unfilterable unsortable"|Name
!class="unsortable"|Type
!Damage Value  <!-- This line doesn't work! -->
///Some table content inside///
|}

Around Wikia's network

Random Wiki