Monday, September 10, 2012


jquery.table.filler

jquery.table.filler

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!

Github

https://github.com/foogaro/jquery.table.filler


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, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.tableFiller' );
        }
    };

})(jQuery);


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;
            $(settings.tableInstance).show();

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

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

            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 {
                methods.handleNoDataFound();
            }
        },
        buildHeader: function(headers) {
            $('thead', settings.tableInstance).remove();
            $(settings.tableInstance).prepend('');
            $("thead", settings.tableInstance).append('');
            for (var headerIndex in headers) {
                $('thead tr:first', settings.tableInstance).append('' + headers[headerIndex] + '');
            }
        },
        handleNoDataFound: function() {
            $('tbody', settings.tableInstance).remove();
            $(settings.tableInstance).append('');
            $('tbody', settings.tableInstance).append('' + settings.emptyDataMessage + '');
        },
        handleLoadDataError: function(msg) {
            alert(msg);
            $("#tableFillerErrorMessage").empty();
            $("#tableFillerErrorMessage").remove();
            $(settings.tableInstance).hide();
            $("body").append('
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


    

        
        -{foogaro.com}- 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: