The CompHound Mongoose DataTable

I continued working on the CompHound component tracker project. My previous to-do list included the following steps:

• Implement a datatable view
• Post the server live to Heroku
• Add a View and Data API viewing component
• Reroute the comphound.net domain to it

I worked on the first of them in the past few days.

The solution was actually very easy:

• Hooking up the mongoose-datatable
• Implementing a row clicked event handler

Hooking up the mongoose-datatable

Viewing a database obviously requires a datatable.

The datatable retrieves a subset of database records required for the current view, known as pagination.

Happily, DataTables provides a suitable plug-in for jQuery.

Before realising that, I struggled a bit to display the database in a table.

Once I had that up and running, the need for a real scalable server side mongo database table view became apparent.

That was quite easily achieved by plugging in the mongoose-datatable.

Integrating that, looking at and learning from various samples of using it prompted several important improvements:

• 0.0.7 implemented config.json server configuration
• 0.0.8 improved config.json server configuration
• 0.0.9 check db connection before launching web server
• 0.0.10 mongoose datatable is up and running
• 0.0.11 cleanup and smaller datatable font size

The resulting datatable looks like this:

Implementing a row clicked event handler

Once I can view and navigate the database records, each of them displaying a component instance, I wish to select a specific occurrence to explore it further and display it graphically.

Ergo, a row selection handler is required.

This turned out to be really simple as well, and happily completely disconnected from the datatable implementation.

Based on the StackOverflow answers to jQuery – click event on elements with in a table and getting element values, I simply added the following snippet to index.js:

$(document).ready(function() {
  $("div#datatable_wrapper > table#datatable > tbody > tr > td")
    .live('click', function() {
      alert("You clicked my <td>: " + $(this).html()
       + "... My TR is: " + $(this).parent("tr").html());
    }
  );
});

This specifies a very strict path to the td element, including its entire list of parent elements, leaving none out, and not allowing any intermediate levels.

A more lenient and equally valid way would be to just use the path div#datatable_wrapper tbody td.

Here is the result of clicking a row now:

CompHound Road Map

The next steps on the CompHound project will include:

• Deploying the server live to Heroku
• Adding the View and Data API viewing component
• Rerouting the nice new comphound.net domain to it

The current versions discussed above are the CompHoundWeb 0.0.12 node.js mongodb web server, CompHoundRvt 2016.0.0.2 C# REST API client populating it, and the (placeholder) landing page CompHound.github.io 0.0.1.