Fandom

Community Central

Comments2

Wikitable Filterable: The Filter for Long Tables

Sammylau September 16, 2013 User blog:Sammylau

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

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///
|}

Also on Fandom

Random Wiki