Skip to content

Working modes

Roberto Prevato edited this page Jan 30, 2016 · 13 revisions

Modes

The jQuery-KingTable implements two working modes:

  • fixed
  • normal

Fixed mode

A fixed table is displaying a collection that doesn't require server side pagination, but may still benefit from client side pagination. When working on applications, it commonly happens to deal with collections that are not meant to grow over time, and they have a small size. For example, a table of categories in a e-commerce website to sell clothes, or a table of user roles in most applications. In these cases, it makes sense to return whole collections to the client. There are two ways to define a fixed KingTable:

  • instantiating a KingTable with url from where to fetch a collection; then code the server side to return an array of items
  • instantiating a KingTable passing a data option with an instance of array: in this case, it is assumed that the collection is fixed
var table = new $.KingTable({
  data: [{...},{...},{...}]
});
//or... code the server side to return an array of items
var table = new $.KingTable({
  url: "/api/categories",
  fixed: true
});

Fixed tables perform search and pagination on the client side; but normal tables don`t do anything about sorting and filtering. This is not a decision of the plugin, but a necessity given by the task itself:

  • the purpose of server side pagination is to deal with collections that are too big, to be sent from server to client
  • when paginating, the page number depends upon the total amount of possible results (given the filters) and upon the order (e.g. order by "something")
  • therefore, when paginating server side, sorting and filtering must happen server side, too
  • on the other hand, when paginating client side (because some collections allow it), filtering and ordering must happen on the client side, in order to benefit from absence of ajax calls and to offer the best user experience

The KingTable widget offers out of the box sort and search functionalities, and a structure to define filtering functions. Please refer to implementing custom filters page, for information about how to implement filtering functions on the client side.

Normal mode

A normal table is one displaying a collection that requires server side pagination, since it is meant to grow over time. This is true in most cases, for example tables of products and customers in a e-commerce website.

var table = new $.KingTable({
  url: "/api/profiles"
});

When receiving an AJAX response, it expects the following structure, if results are paginated server side:

{
  subset: [array],// array of items that respect the given filters
  total: [number] // the total count of items that respect the given filters; excluding the pagination: for example 13000
}

For information about handling of fast growing collections, refer to the dedicate page.

Collection modes

The KingTable widget supports both optimized and simple collections, where:

  • an optimized collection is an array of arrays, where the first array contains the names of the properties, and all the others contain the object values.
[
  [
    "red",
    "hue",
    "hsvSaturation",
    "hslSaturation",
    "hsvValue",
    "hslLight",
    "green",
    "blue",
    "name",
    "color"
  ],
  [
    "0%",
    "217\u00b0",
    "100%",
    "100%",
    "73%",
    "37%",
    "28%",
    "73%",
    "Absolute Zero",
    "#0048BA"
  ],
  //...
  • a simple collection is an array of objects, with properties and values.
[
  {
    "color": "#0048BA",
    "red": "0%",
    "hue": "217\u00b0",
    "name": "Absolute Zero",
    "blue": "73%",
    "hsvSaturation": "100%",
    "green": "28%",
    "hsvValue": "73%",
    "hslSaturation": "100%",
    "hslLight": "37%"
  },
  {
    "color": "#B0BF1A",
    "red": "69%",
    "hue": "65\u00b0",
    "name": "Acid green",
    "blue": "10%",
    "hsvSaturation": "86%",
    "green": "75%",
    "hsvValue": "75%",
    "hslSaturation": "76%",
    "hslLight": "43%"
  },
  //...

Clone this wiki locally