Tag Archives: javascript

JavaScript Table Sort Library jDynamicSorter

jDynamicSorter is a new repository I have added to my GitHub account. The JavaScript library dynamically sorts Twitter Bootstrap row based tables simply using its custom HTML attributes.

What’s nice about this project?

  • Simple, easy to understand and commented source code
  • No unnecessary formatting of data using custom attributes. You simply specify what type of data is in each column and the library takes care of the rest.
  • The header sort UI is updated alongside the sorting process
  • Handles columns where each column div is wrapped in an HTML “A” link
  • Handles date sorting with any type of separator such as “/” or “-” and one or two digit days/months

Getting Started

To get started simply include jDynamicSorter.js, jDynamicSorter.css and the /img folder into your existing JQuery + Twitter Bootstrap project. You may want to apply other CSS attributes to your table as seen in the example project base.css. Next create a row based table with the required class, data-type and data-desc attributes as shown in the example jDynamicSorter-Example.html.

Possible Future Enhancements

  • Ability to have multiple tables on a single page
  • Handle additional date formats
  • Animations
  • Further simplify the code

View a live demo here.

Here is a screenshot:

jDynamicSorter screenshot

Javascript Pie Chart Project FlotPieChart

FlotPieChart is a new repository I have added to my GitHub account. The project shows how to build a customizable Javascript pie chart based off the Flot Chart library. The pie chart has been assigned custom styles, hover logic and click event logic. It is a nice sample project for those getting familiar with Flot charts and want to dive into some customizable features. This project also uses JQuery & Bootstrap. Here is a look:

FlotPieChart screenshot

Javascript Maps Project Tabbed-JVectorMap

Tabbed-JVectorMap is a new repository I have added to my GitHub account. The project consists of a single webpage which features five JVectorMap based Javascript maps each contained within their own tab. Several different map types have been used, styles have been modified, custom action functions have been created and some zoom tricks have been utilized. The maps contain markers that signify the offices of a firm, with the number of employees listed per office. Hovering on the markers shows the office details and clicking on the markers redirects the user to a new webpage (you must insert the URLs in the Javascript file to control the redirection). It is a nice sample project for those getting familiar with JVectorMap and want to dive into some customizable features. This project also uses JQuery & Bootstrap. Here is a look: