This sample uses data about US-Newspapers and their endorsements in the presedential elections. It was collected by Noah Veltman, he described the process on his homepage. Data available on GitHub.

This example is intentionally complex - just to illustrate the flexibility Datatables provides to customize and filter its output. Knowledge of JS will be beneficial to understand it.

  • JSON-Datasource: in this example the data is provided as a JSON-Object. This has performance-advantages when rendering the table, as Datatables can fetch the required portion of data (according to pagination etc.) and then just render that small amount of data.
  • yadcf-Filtering
    • Notice the “Party”-Filter which uses data from a column that is not shown in the table. As the column is not visible, the filter needs to be rendered in a separate container.
    • This filter also uses a custom filter-function that translates the internal values “D”, “R” and “O” to their legible equivalents.
  • The “Endorsed”-Column uses a custom event-handler for the “CreatedCell”-event to assign a background-color based on the party.
  • The “Source(s)”-column uses a custom Render-Function that checks if the data is a URL (in which case an HTML-Anchor is generated) or just a verbal reference/explanation which is then shown.
  • try to search for a word like “Chronicle”. As you type, the list will be reduced to all matching records and - thanks to the “mark”-Option, the matching strings will be highlighted.
  • minor usability-detail: the “Source(s)”-Column is excluded from searches
Controls used on this page: Dyalog: ScriptStyle JavaScript: DataTable Base HTML: div