{"id":985,"date":"2011-01-15T15:04:13","date_gmt":"2011-01-15T20:04:13","guid":{"rendered":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=985"},"modified":"2011-01-15T15:04:13","modified_gmt":"2011-01-15T20:04:13","slug":"a-jquery-table-sorter-parser-for-german-vocabulary-lists","status":"publish","type":"post","link":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=985","title":{"rendered":"A jQuery Table Sorter Parser For German Vocabulary Lists"},"content":{"rendered":"

I still plan to go on vacation in April. I will be spending a week in Berlin. I am putting a lot more effort into learning German in order to prepare for my trip. I have been studying German for over a year, but not very intensely. I have created a custom help file for my notes on the German language. Many of the pages in this help file are HTML tables of vocabulary lists with the German and English words in columns. As I add words and rows to the list, the alphabetical order may be lost. Fortunately there is a plugin for jQuery<\/a> which allows you to sort a HTML table in alphabetical order. I have been using the tablesorter<\/a> plugin to sort my tables without a page refresh or server side code.<\/p>\n

The only problem with that solution is the definite articles. I usually include the definite article before the nouns because you need to know the gender of a German noun. For example, Katze<\/strong> is a feminine noun so I place it in the Deutsch table column as die Katze<\/strong> so I will remember the noun’s gender. Unfortunately, that causes Katze to appear below every other masculine and neuter noun. A neuter noun requires the definite article das<\/strong> which comes before die<\/strong> when sorted in alphabetical order. So das Schwein<\/strong> (the pig) appears before die Katze<\/strong> (the cat) even though K<\/strong> words should be listed before S<\/strong> words. I could have solved this problem by placing the definite article after the word: Katze, die<\/strong> but that looks awkward. What I really wanted was to sort the column based on the second word.<\/p>\n

Fortunately, you can create a custom parser for the tablesorter plugin which sorts the column based on the logic you provide in your code. I was able to write a custom parser that replaces the definite and indefinite articles in the table cell with empty strings so they do not affect the sort order. I can add to my logic to handle additional requirements like disregarding possessive pronouns when sorting the column,  mein Vater<\/strong>.<\/p>\n

\n
\n
   1:<\/span> \/\/ add parser through the tablesorter addParser method <\/span><\/pre>\n
   2:<\/span> $.tablesorter.addParser({ <\/pre>\n
   3:<\/span>     \/\/ set a unique id <\/span><\/pre>\n
   4:<\/span>     id: 'Deutsch'<\/span>, <\/pre>\n
   5:<\/span>     is<\/span>: function<\/span>(s) { <\/pre>\n
   6:<\/span>         \/\/ return false so this parser is not auto detected <\/span><\/pre>\n
   7:<\/span>         return<\/span> false<\/span>; <\/pre>\n
   8:<\/span>     }, <\/pre>\n
   9:<\/span>     format: function<\/span>(s) { <\/pre>\n
  10:<\/span>         \/\/ format your data for normalization <\/span><\/pre>\n
  11:<\/span>         return<\/span> s.toLowerCase().replace(\/die \/,''<\/span>).replace(\/der \/,''<\/span>).replace(\/das \/,''<\/span>); <\/pre>\n
  12:<\/span>     }, <\/pre>\n
  13:<\/span>     \/\/ set type, either numeric or text <\/span><\/pre>\n
  14:<\/span>     type: 'text'<\/span><\/pre>\n
  15:<\/span> }); <\/pre>\n
  16:<\/span>  <\/pre>\n
  17:<\/span> $(function<\/span>() { <\/pre>\n
  18:<\/span>     $("table"<\/span>).tablesorter({ <\/pre>\n
  19:<\/span>             sortList: [[0,0],[1,0]],  <\/pre>\n
  20:<\/span>         headers: { <\/pre>\n
  21:<\/span>             0: { <\/pre>\n
  22:<\/span>                 sorter:'Deutsch'<\/span><\/pre>\n
  23:<\/span>             }         <\/pre>\n
  24:<\/span>         } <\/pre>\n
  25:<\/span>     }); <\/pre>\n
  26:<\/span> });   <\/pre>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
I still plan to go on vacation in April. I will be spending a week in Berlin. I am putting a lot more effort into learning German in order to prepare for my trip. I have been studying German for … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[338,112],"tags":[551,28,550,549],"_links":{"self":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/985"}],"collection":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=985"}],"version-history":[{"count":0,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/985\/revisions"}],"wp:attachment":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=985"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}