(function ($) { $.widget( "ui.table", { options: { name: "table", default_controls: [{ id: 'previous', icon: 'ui-icon-arrowthick-1-w' }, { id: 'next', icon: 'ui-icon-arrowthick-1-e' }] }, _create: function () {}, _init: function () { // création de la barre de navigation var chaine = "<ul id='" + this.options.name + "_navBar' style='list-style:none;'>"; for (var i = 0; i < this.options.default_controls.length; i++) { chaine += this._getControl( this.options.default_controls[i]['id'], this.options.default_controls[i]['icon']); } chaine += "</ul><div style='clear:both;'> </div>"; chaine += "<table id='" + this.options.name + "_table'></table>"; this.element.append(chaine); this._createHeader(); this.getValues(); }, _setOption: function (key, value) { this.options[key] = value; }, _getControl: function (id, icon) { var chaine = "<li class='ui-state-default ui-corner-all' id='" + this.options.name + '_' + id + "' style='float:left;margin-right:2px;text-decoration: none;'> + " < span class = 'ui-widget ui-corner-all ui-icon ui-button " + icon + "' title = '" + id + "' > < /span></li > "; return chaine; }, _createHeader: function(){ var chaine = '<tr>'; var cols = this.options.provider.getHeader(); for ( var i = 0; i < cols.length; i++) { chaine += '<th>'+cols[i]+'</th>'; } chaine += '</tr>'; $('#'+this.options.name+" _table ").append(chaine); }, getValues: function() { var chaine = ''; var vals = this.options.provider.getData(); for ( var i = 0; i < vals.length; i++) { chaine += '<tr>'; for ( var j = 0; j < vals[i].length; j++) { chaine += '<td>'+vals[i][j]+'</td>'; } chaine += '</tr>'; } $('#'+this.options.name+" _table ").append(chaine); } }); $.extend($.ui.table, {}); })(jQuery); var DataProvider = function(){ } DataProvider.prototype.getHeader = function(){ return ['col1','col2','col3','col4']; } DataProvider.prototype.getData = function(){ return [ ['val1','val2','val3','val4'], ['val5','val6','val7','val8'] ]; } // ------------------------------------------------------------------------------------------- $(document).ready(function() { var provider = new DataProvider(); $('#test').html('test1'); $('#table').table({ name : 'TestTable', provider : provider }); $('#test').html('test2'); });