Add Load Data Table example.

docs/examples.html

@@ -64,6 +64,7 @@
                     <li><a href="#radio-table">Radio Table</a></li>
                     <li><a href="#checkbox-table">Checkbox Table</a></li>
                     <li><a href="#pagination-table">Pagination Table</a></li>
+                    <li><a href="#load-data-table">Load Data Table</a></li>
                 </ul>
             </div>
         </div>
@@ -92,8 +93,12 @@
                 </div>
                 <div class="bs-example">
                     <div class="btn-group btn-default">
-                        <button class="btn btn-success" id="transform">Transform</button>
-                        <button class="btn btn-danger" id="destroy">Destroy</button>
+                        <button class="btn btn-default" id="transform">
+                            <i class="glyphicon glyphicon-transfer"></i> Transform
+                        </button>
+                        <button class="btn btn-default" id="destroy">
+                            <i class="glyphicon glyphicon-trash"></i> Destroy
+                        </button>
                     </div>
                     <table id="table-transform" data-url="data1.json" data-height="246">
                         <thead>
@@ -257,6 +262,58 @@
                 <div class="highlight"><pre><code class="language-html"></code></pre></div>
             </div>
 
+            <div>
+                <div class="page-header">
+                    <h1 id="load-data-table">Load Data Table</h1>
+                </div>
+                <div class="bs-example">
+                    <div class="btn-group btn-default">
+                        <button class="btn btn-default" id="load-data" data-method="load">
+                            <i class="glyphicon glyphicon-refresh"></i> Load Data
+                        </button>
+                        <button class="btn btn-default" id="append-data" data-method="append">
+                            <i class="glyphicon glyphicon-plusglyphicon glyphicon-plus"></i> Append Data
+                        </button>
+                    </div>
+                    <table id="table-large-data" data-height="246">
+                        <thead>
+                        <tr>
+                            <th data-field="id">Item ID</th>
+                            <th data-field="name">Item Name</th>
+                            <th data-field="price">Item Price</th>
+                        </tr>
+                        </thead>
+                    </table>
+                    <script>
+                        $(function() {
+                            var id = 0,
+                                getRows = function() {
+                                    var rows = [];
+
+                                    for (var i = 0; i < 5; i++) {
+                                        rows.push({
+                                            id: id,
+                                            name: 'test' + id,
+                                            price: '$' + id
+                                        });
+                                        id++;
+                                    }
+                                    return rows;
+                                },
+                                // init table use data
+                                $table = $('#table-large-data').bootstrapTable({
+                                    data: getRows()
+                                });
+
+                            $('#load-data, #append-data').click(function() {
+                                $table.bootstrapTable($(this).data('method'), getRows());
+                            });
+                        });
+                    </script>
+                </div>
+                <div class="highlight"><pre><code class="language-html"></code></pre></div>
+            </div>
+
             <hr>
             <a href="https://github.com/wenzhixin/bootstrap-table/blob/master/docs/docs.js">More examples use JavaScript</a>
         </div>

docs/examples.js

@@ -7,6 +7,7 @@ $(function() {
 
         $.each(sources, function(i, text) {
             if (!$.trim(text)) {
+                i > 0  && codes.push('');
                 return;
             }
             if (!spaces) {