Posted on August 9, 2020
The jQuery Datatables plugin library unlocks high levels of accessibility for data in simple HTML tables. It is able to give instant filtering, searching, ordering, and paging. It is free to use and can be forked from GitHub. Their documentation has examples for loading data with API or other plug-in interfaces. The library can be brought in with three lines and then setup is complete:
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
Define how the table will be structured on the page:
Initialize the table:
Then the table will be ready for the end user:
This Pie of a Pie (exploding pie chart) example was used as the basis for the chart used in the final code. A couple changes were made for the values to fit the datasource for this dashboard. On the backend, the data text file was converted to build the arrays for the datasource. These values were passed from the model to the view using C# as the code behind. The model had a custom function that formatted and returned the data for the chart.
Here is our finished product:
Combining two free open source jQuery libraries created a very simple end-user friendly dashboard to deliver the data needed to make decisions for the business.