The JavaScript blog.


jquery ui chrome galleries tables

Dynatable, nanoGallery, jQuery Audit

Posted on .



Dynatable (GitHub: JangoSteve / jquery-dynatable, License: AGPL or commercial) by Steve Schwartz is a library for displaying JSON data as friendly and efficient HTML tables. It provides a framework for searching, sorting, and filtering data. It uses jQuery, and can be invoked with $.dynatableSetup.

Dynatable can convert plain HTML tables into JSON. The properties for the JSON can be camelCase, but other styles are supported, including dashed and underscore. This is set with the table.defaultColumnIdStyle option.

JSON can also be fetched from a server. In this case you can use the dataset option:

  dataset: {
    ajax: true,
    ajaxUrl: '/dynatable-ajax.json',
    ajaxOnLoad: true,
    records: []

It expects a corresponding skeleton table node, with thead and tbody.

The documentation is thorough and includes examples for each of these things, and the other features provided by the library.


Nobody's sent me a jQuery gallery for a while. nanoGALLERY (GitHub: Kris-B / nanoGALLERY, License: CC BY-NC 3.0) by Christophe Brisbois supports Flickr and Google+, and supports responsive layouts. You can get a gallery going with a Google account like this:

  kind: 'picasa',
  userID: 'you@example.com'

It comes with CSS, but you can theme it. It displays a gallery navigator using folders, so it could scale up quite well to a large collection.

Documentation for the main options and expected markup can be found in the project's readme file.

jQuery Audit

jQuery Audit (GitHub: zertosh / jquery-audit, License: MIT) by Andres Suarez is a Chrome Developer Tools extension for auditing jQuery. It adds a sidebar (under Elements) that includes details of delegated events and internal data.

The documentation has explanations of the main features, and instructions on how to use the extension properly. For example, you can dig into bound functions for event handlers which can be bound differently based on the library.


jquery ui plugins services tables sponsored-content

jQuery Roundup: spy-js, yadcf

Posted on .

Note: You can send your plugins and articles in for review through our contact form.



spy-js, created by Artem Govorov, is a commercial tool that aims to make JavaScript instrumentation better. You can use it to trace, debug, and profile code that would otherwise be difficult to work with.

Although tools like Chrome DevTools are excellent, the advantage of spy-js is it can work with any browser. It also allows performance between browsers to be compared more easily.

spy-js in action.

There's a free beta which you can download from spy-js.com, and issues are being tracked on GitHub. The documentation is also on GitHub, at spy-js/spy-js. The project isn't open source, but the author intends to keep it free while he collects beta feedback.

For more information, take a look at spy-js.com and @SpyDashJs on Twitter.


Yet Another DataTables Column Filter (GitHub: vedmack / yadcf, License: GPL2/BSD, jQuery: yadcf) by Daniel Reznick is a plugin for DataTables that adds filtering components. It can filter based on a select, or the jQuery UI Autocomplete widget. It also parses different data types, like delimited plain text and HTML elements.

    { column_number: 0 },
    { column_number: 1, filter_container_id: 'external_filter_container' },
    { column_number: 2, data:['Yes', 'No'], filter_default_label: 'Select Yes/No' },
    { column_number: 3, text_data_delimiter: ',', enable_auto_complete: true },
    { column_number: 4, column_data_type: 'html', html_data_type: 'text', filter_default_label: 'Select tag' }]);

It also works perfectly well with multiple tables on a page. For more examples, check out the yadcf showcase and the project's readme.


frameworks libraries node browser tables

Luc, z.js, Tabler

Posted on .


Luc (GitHub: pllee / luc, License: MIT, npm: luc) by Patrick Lorian Lee is a framework written in ECMAScript 5 designed to work with browsers and Node. It includes classes for working with arrays, dates, functions, events, and some high-level architectural tools.

For example, this is the composition API, which allows functionality to be added to classes while respecting the inheritance chain:

var C = Luc.define({  
  $compositions: {
    defaults: Luc.compositionEnums.EventEmitter,
    methods: ['emit']

var c = new C();

typeof c.emit  
typeof c.on  

Classes can be created with Luc.define:

var C = Luc.define({  
  init: function() {
    Luc.Array.each(this.items, this.logItems)

  logItems: function(item) {

var c = new C({items: [1,2,3]});  
var d = new C({items: 'A'});  
var e = new C();  

The array functions can be found under Luc.Array -- it has the kinds of methods you might be familiar with from libraries like Underscore. The method signatures are similar as far as I can tell: Luc.Array.findFirst([1,2,3, {}], {});.

Luc's source has JSDoc-style comments, a Grunt build script, and unit tests. It has no dependencies and is currently around 650 lines of code.


z.js (Source: z.js, License: MIT) is a tool for turning text into a binary code that uses zero width non-breaking spaces. That means you can create invisible messages that work in most modern browsers (including IE8+). It can even apply a password to the message so potential snoops must go through an extra level of misdirection.

There's even an ASCII mode where tabs and spaces are used instead of UTF8.


I really loathe making tables, yet almost every project seems to need them. I inevitably end up creating or finding a table generator that can turn data into suitable HTML tables. Tabler (GitHub: BrandwatchLtd / tabler, License: MIT) by Steve Mason is an AMD-friendly, Mocha-tested library for building dynamic tables. It takes an array then generates tables based on a "spec" -- a definition of the headers and properties to include in the output.
Usage looks like this:

var table = tabler.create([  
    {field: 'name', name: 'Name'},
    {field: 'apples', name: '# Apples'},
    {field: 'bananas', name: '# Bananas'}

    {name: 'Steve', apples: 2, bananas: 4},
    {name: 'Graham', apples: 1, bananas: 6},
    {name: 'Dan', apples: 9, bananas: 2},
    {name: 'Jon', apples: 5, bananas: 6}


jquery plugins responsive tables columns

jQuery Roundup: jquery.columns, stackable.js

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


jquery.columns (License: MIT) by Cedric Ruiz extends the $.css method to support viewport-percentage lengths, basically making it a lot easier to work with responsive grids.

The plugin provides a $.columns method, but passing sizes with vw units to $.css will work as well.

There's a demo here: jquery.columns demo.


stacktable.js (GitHub: johnpolacek / stacktable.js, License: MIT/GPL) by John Polacek is a plugin for stacking tables on small screens. It's designed to work in responsive layouts by using media queries.

To make tables fit smaller screens, this plugin stacks each column vertically in order. The headers will be placed in the correct order as well. Behind the scenes, tables are actually replaced with the stacked version -- by passing a specific class name to the plugin responsive layouts can be supported.


jquery html5 plugins history pjax tables

jQuery Roundup: Joconut, jQuery Table Sort, jQuery.pushevent

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


Joconut (License: MIT) by Vadim Demedes is an alternative implementation of Chris Wanstrath's pjax plugin. Joconut is about 1K smaller (I compared them both gzipped and minified myself), and it also loads JavaScript and CSS automatically.

Adding Joconut to a page will cause requests to the current host to load using $.ajax. To maintain history, it uses history.pushState, and degrades to onhashchange. Several internal events can be bound to, which is useful for things like error handling:

$.joconut.on('error', function() {
  alert('Error while loading new page!');

Stupid jQuery Table Sort

Stupid jQuery Table Sort (GitHub: joequery / Stupid-Table-Plugin, License: MIT) by Joseph McCullough is a simple table sorting plugin based around Array.prototype.sort:

As long as you understand basic JavaScript sorting, you can make this plugin do as much or as little as you want.

Callbacks can be supplied for custom sorting based on type. In Joseph's example, he's set a th class of type-date, then passed in a date callback:

  'date': function(a,b) {


jQuery.pushevent (License: GPL) by "yeikos" helps manage the order events will be fired. This example causes the order of the events to be swapped:

$('button').on('click.first', function() {
}).on('click.second', function() {

The author also sent in two more plugins: