Fix #57: Initialize table data from HTML.

docs/examples.html

@@ -158,22 +158,50 @@
                             <i class="glyphicon glyphicon-trash"></i> Destroy
                         </button>
                     </div>
-                    <table id="table-transform" data-url="data1.json" data-height="299" data-toolbar="#transform-buttons">
+                    <table id="table-transform" data-toolbar="#transform-buttons">
                         <thead>
-                            <tr>
-                                <th data-field="id">Item ID</th>
-                                <th data-field="name">Item Name</th>
-                                <th data-field="price">Item Price</th>
-                            </tr>
+                        <tr>
+                            <th data-field="id">Item ID</th>
+                            <th data-field="name">Item Name</th>
+                            <th data-field="price">Item Price</th>
+                        </tr>
                         </thead>
+                        <tbody>
+                        <tr>
+                            <td>1</td>
+                            <td>test1</td>
+                            <td>$1</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>test2</td>
+                            <td>$2</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>test3</td>
+                            <td>$3</td>
+                        </tr>
+                        <tr>
+                            <td>4</td>
+                            <td>test4</td>
+                            <td>$4</td>
+                        </tr>
+                        <tr>
+                            <td>5</td>
+                            <td>test5</td>
+                            <td>$5</td>
+                        </tr>
+                        </tbody>
                     </table>
                     <script>
                         $(function() {
+                            var $table = $('#table-transform');
                             $('#transform').click(function() {
-                                $('#table-transform').bootstrapTable();
+                                $table.bootstrapTable();
                             });
                             $('#destroy').click(function() {
-                                $('#table-transform').bootstrapTable('destroy');
+                                $table.bootstrapTable('destroy');
                             });
                         });
                     </script>

src/bootstrap-table.js

@@ -151,6 +151,7 @@
 
     BootstrapTable.prototype.init = function () {
         this.initContainer();
+        this.initTable();
         this.initHeader();
         this.initData();
         this.initToolbar();
@@ -185,11 +186,10 @@
         }
     };
 
-    BootstrapTable.prototype.initHeader = function () {
+    BootstrapTable.prototype.initTable = function () {
         var that = this,
             columns = [],
-            visibleColumns = [],
-            html = [];
+            data = [];
 
         this.$header = this.$el.find('thead');
         if (!this.$header.length) {
@@ -200,9 +200,9 @@
         }
         this.$header.find('th').each(function () {
             var column = $.extend({}, {
-                    title: $(this).html(),
-                    'class': $(this).attr('class')
-                }, $(this).data());
+                title: $(this).html(),
+                'class': $(this).attr('class')
+            }, $(this).data());
 
             columns.push(column);
         });
@@ -211,6 +211,21 @@
             that.options.columns[i] = $.extend({}, BootstrapTable.COLUMN_DEFAULTS, column);
         });
 
+        this.$el.find('tbody tr').each(function () {
+            var row = {};
+            $(this).find('td').each(function (i) {
+                row[that.options.columns[i].field] = $(this).html();
+            });
+            data.push(row);
+        });
+        this.options.data = data;
+    };
+
+    BootstrapTable.prototype.initHeader = function () {
+        var that = this,
+            visibleColumns = [],
+            html = [];
+
         this.header = {
             fields: [],
             styles: [],
@@ -996,7 +1011,8 @@
         $(this.options.toolbar).insertBefore(this.$el);
         this.$container.next().remove();
         this.$container.remove();
-        this.$el.html(this.$el_.html());
+        this.$el.html(this.$el_.html())
+            .attr('class', this.$el_.attr('class') || ''); // reset the class
     };
 
     BootstrapTable.prototype.showLoading = function () {