Implementing localization

The KingTable widget requires an utility to implement client side localization, which, for example, is used to display proper names of buttons (refresh, page number, results per page, etc.).

Currently the KingTable supports these two libraries:

• I.js
• i18n-js

The first should be used only if advanced features like parsing of dates, support for currencies, etc., are not needed in other parts of the application. The second should be used if advanced localization features are required in other parts of the application.

The KingTable widget itself only requires support for scoped translations (see examples below).

Example with i18n-js

This example shows how to implement localization using i18n-js. First, load the i18n-js library, in the desired way, for example:

  <script src="scripts/libs/i18n.js"></script>
  <script>
    I18n.defaultLocale = "en";
    I18n.locale = "en";
  </script>

Then, make sure that its translations object is extended with the required texts (and cultures):

_.extend(I18n.translations, {
  
  "en": {
    "voc": {
      "Page": "Page",
      "of": "of",
      "Results": "Results",
      "ResultsPerPage": "Results per page",
      "Filters": "Filters",
      "NextPage": "Next",
      "PrevPage": "Previous",
      "FirstPage": "First",
      "LastPage": "Last",
      "Refresh": "Refresh",
      "NoResults": "There are no documents to display.",
      "ErrorLoadingContents": "An error occurred while loading contents.",
      "GoToDetailsLink": "Go to details",
      "AdvancedFilters": "Advanced filters"
    }
  }
});

Example with I.js

This example shows how to implement localization using I.js. First, load the i.js library, in the desired way, for example:

  <script src="scripts/libs/i.js"></script>

Then, make sure that its regional object is extended with the required texts (and cultures):

_.extend(I.regional, {
  
  "en": {
    "voc": {
      "Page": "Page",
      "of": "of",
      "Results": "Results",
      "ResultsPerPage": "Results per page",
      "Filters": "Filters",
      "NextPage": "Next",
      "PrevPage": "Previous",
      "FirstPage": "First",
      "LastPage": "Last",
      "Refresh": "Refresh",
      "NoResults": "There are no documents to display.",
      "ErrorLoadingContents": "An error occurred while loading contents.",
      "GoToDetailsLink": "Go to details",
      "AdvancedFilters": "Advanced filters"
    }
  }
});

Please refer to the live demo and to the source code, to see a working example using I.js.

Note about non-latin characters

The KingTable widget includes a String.compare JavaScript function, that supports sorting of most latin characters. I apologize for people using non-latin alphabets, but currently I am totally ignorant about non-latin characters. For example, I don't know any asian alphabet and I have no idea how they should be sorted. On the positive side, I will soon add the possibility to implement them.

    compare: function (a, b, order, options) {
      order = _.isNumber(order) ? order : (/^asc/i.test(order) ? 1 : -1);
      if (a && !b) return order;
      if (!a && b) return -order;
      if (!a && !b) return 0;
      if (a == b) return 0;

      var def = {
          characters: "AÁÀÂÄÃĀĂĄÃÅÆBCĆÇDEÈÉÊËĘFGHIÌÍÎÏJKLŁMNÑŃOÒÓÔÕÖØPQRSŚŠTUÙÚÛÜVWYÝŸZŹŻŽąàáâãäåæbcçćdeęèéêëfghiìíîïjklłmnñńoòóôõöøpqrsśštuùúûüvwyýÿzźżž",
          caseSensitive: false