@@ -14,6 +14,9 @@ div.moo-table table { margin: 0; border-spacing: 0; text-align: left; + padding: 0; + border-collapse: collapse; + border-spacing:0; } div.moo-table table thead th { css/moodatatable.css @@ -9,14 +9,13 @@ var MooDataTable = new Class({ url: 'post.php', method: 'get', perPage: 15, - headerCaptions: [], - headerIds: [], + // headers: [], width: 500 }, initialize: function(el, options) { this.setOptions(options); - this.el = $type(el) === 'string' ? $(el) : el; + this.el = $(el); this.pages = 0; this.createElements(); }, @@ -42,19 +41,21 @@ var MooDataTable = new Class({ }, createHeaders: function() { - var headerCaptions = this.options.headerCaptions; - var headerIds = this.options.headerIds; var headerTr = this.tableHead.getChildren("tr")[0]; // Create the column headers - headerCaptions.each(function(header, index){ - var headerTd = new Element('th', {id: headerIds[index]}); - headerTd.set('html', headerCaptions[index]); + this.options.headers.each(function(header, index){ + var headerTd = new Element('th', { + id: header['id'] + }); + headerTd.set('html', header['caption']); // add the click event for column re-ordering - headerTd.addEvent("click", function(arg1){ - this.reorder(arg1.get('id')); - }.bind(this, headerTd)); + if(header['sortable']) { + headerTd.addEvent("click", function(arg1){ + this.reorder(arg1.get('id')); + }.bind(this, headerTd)); + } this.headersEl.push(headerTd); headerTd.inject(headerTr); }, this); @@ -65,7 +66,7 @@ var MooDataTable = new Class({ // set the sort order to DESC, it will be inverted to ASC by default on first call... this.sortOrder = "DESC"; - this.reorder(headerIds[0]); + this.reorder(this.options.headers[0]['id']); }, reorder: function(id) { @@ -299,7 +300,6 @@ var MooDataTable = new Class({ pageClicked: function(page) { - if($type(page) === "string") { if(page === "next" && this.page < this.pages) { this.requestData(this.page + 1); src/moodatatable.js @@ -11,8 +11,11 @@ <script type="text/javascript" charset="utf-8"> window.addEvent('domready', function(){ myMooTable = new MooDataTable('myTable', { - headerIds: ['id', 'name', 'email'], - headerCaptions: ['ID', 'Name', 'Email'] + headers: [ + {id: "id", caption: "ID", sortable: true}, + {id: "name", caption: "Name", sortable: true}, + {id: "email", caption: "Email", sortable: false} + ] }); }); </script> test.html 4639d9b87beef6e100fce58c0e455ed35020627b Jean-Nicolas Jolivet silvertab@videotron.ca http://github.com/SilverTab/moodatatable/commit/2c07dc87dc3857e13f03e6270eae58e4cb45b458 2c07dc87dc3857e13f03e6270eae58e4cb45b458 2008-10-17T13:14:44-07:00 2008-10-17T13:14:44-07:00 Merged the header options, fixed a CSS bug in IE a91cba2c7947ddf1354f7e41afd3ac0d41275b22 Jean-Nicolas Jolivet silvertab@videotron.ca