Monday, September 10, 2012



This project aims to explain how to create a jQuery plug-in (minimum jQuery version is 1.4.2).

By the way, I'm going to use this example to build a table filler which loads JSON data from a remote and local resource and puts the data into the table as they are retrieved.

Soon I'll start a new jQuery plug-in project based upon this one to handle pagination!

What you need is:

  • jQuery 1.4.2+
  • a browser: Firefox 3+ or Chrome 7+ or Safari (I do not have a Mac so...) - never tested on IE and I will not!


What is it about?

Actually I'm always facing with jQuery plug-in to fill data into table a handle pagination. I tried many of them, but none fits my needs. So I decided to write my own, starting at the very beginning. First a jQuery plug-in which loads data and puts them into the table!

To look at the complete source with comments, have a look at my github project!

The code (partial)

I'll show you step by step how I did it.

Startup for the jQuery plug-in mechanism

(function($) {

    var settings = {
        data: null,
        dataUrl: '',
        loader: false,
        tableInstance: null,
        headersSize: 0,
        columnsSize: 0,
        emptyDataMessage: 'No data found'

    var methods = {};

    $.fn.tableFiller = function( method ) {
        if ( methods[method] ) {
            return methods[ method ].apply( this, arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.tableFiller' );


As you can see the code is pretty much self explained.
I have a variable where I put all my settings, an object called methods where I'm going to declare all my methods, and the final part is where I extend jQuery to enable my plug-in.

The methods

        init : function(options) {
            if (options) {
                $.extend(settings, options);

            settings.tableInstance = this;

            if ( != null) {
            } else {
        analyzeData: function (data) {
            if (data && data.headers) {
            settings.headersSize = $('thead tr th',settings.tableInstance).size();

            if (data && data.rows) {
            } else {
        loadData: function(uri) {
                url: uri,
                success: function (response, textStatus, xhr) {
                    if (response && {
                error: function (xhr, textStatus, errorThrown) {
        fillTable: function (rows) {
            $('tbody', settings.tableInstance).remove();

            if (rows.length > 0) {
                for (var rowIndex in rows) {
                    $('tbody', settings.tableInstance).append('');
                    var row = rows[rowIndex];
                    for (var columnsIndex in row) {
                        var columns = row[columnsIndex];
                        for (var ind in columns) {
                            $('tbody tr:last', settings.tableInstance).append('' + columns[ind] + '');
            } else {
        buildHeader: function(headers) {
            $('thead', settings.tableInstance).remove();
            $("thead", settings.tableInstance).append('');
            for (var headerIndex in headers) {
                $('thead tr:first', settings.tableInstance).append('' + headers[headerIndex] + '');
        handleNoDataFound: function() {
            $('tbody', settings.tableInstance).remove();
            $('tbody', settings.tableInstance).append('' + settings.emptyDataMessage + '');
        handleLoadDataError: function(msg) {
Error while loading data - ' + textStatus + '
'); }

Think about the init as a costructor, where I handle options.
Based on what is in the options I load data from a remote source (dataUrl) or just fill in the table with the data (data).

Those methods are contained inside the methods variable.

An HTML page to test it


        -{}- jQuery plug-in | Table-filler




Why am I sharing this?

I'm sure I'll need that sooner or later!

Hope, it helps!

Ciao, Foogaro

1 comment: