Update all examples.

docs/_i18n/en/examples/align.md

@@ -2,4 +2,4 @@
 
 Use `align`, `halign` and `valign` options to set the alignment of the columns and their header. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/17/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/17/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/basic.md

@@ -6,16 +6,16 @@
 
 Transform table from an existing, unformatted html table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/11/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/11/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Table from data
 
 Transform table from an existing data. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/13/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/13/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Table from url
 
 Transform table from an url. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/14/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/14/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/card-view.md

@@ -2,4 +2,4 @@
 
 Use `cardView: true` option to show Card View. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/27/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/27/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/columns.md

@@ -6,10 +6,10 @@
 
 Use `showColumns`, `minimumCountColumns` options, and `visible`, `switchable` column options to show the columns menu list use to switch. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/24/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/24/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Large Columns
 
 Bootstrap table support large columns, it will auto to show the horizontal scroll bar. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="350" src="http://jsfiddle.net/wenyi/e3nk137y/26/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="350" data-src="http://jsfiddle.net/wenyi/e3nk137y/26/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/events.md

@@ -6,11 +6,11 @@
 
 Table events. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="500" src="http://jsfiddle.net/wenyi/e3nk137y/36/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" data-src="http://jsfiddle.net/wenyi/e3nk137y/36/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Column Events
 
 Use `formatter`, `events` column option to define the custom events. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="500" src="http://jsfiddle.net/wenyi/e3nk137y/39/embedded/html,js,css,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" data-src="http://jsfiddle.net/wenyi/e3nk137y/39/embedded/html,js,css,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 

docs/_i18n/en/examples/format.md

@@ -2,4 +2,4 @@
 
 Use `formatter` column option to format the display of bootstrap table column. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/21/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/21/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/hide-header.md

@@ -2,4 +2,4 @@
 
 Use `showHeader: false` to hide the header of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/22/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/22/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/methods.md

@@ -6,7 +6,7 @@
 
 The table header does not adjust automatically, We need to call `resetView` method. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/40/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/40/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 <!--

docs/_i18n/en/examples/pagination.md

@@ -6,14 +6,14 @@
 
 The default side pagination of table is `client`. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="400" src="http://jsfiddle.net/wenyi/e3nk137y/42/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="400" data-src="http://jsfiddle.net/wenyi/e3nk137y/42/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 ## Server Side
 
 Use sidePagination: `server` option to define the server side pagination of table. _by [@mikepenz](https://github.com/mikepenz)_
 
-<iframe width="100%" height="400" src="http://jsfiddle.net/4r6g4cfu/3/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="400" data-src="http://jsfiddle.net/4r6g4cfu/3/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 Here's the server-side code.
 https://gist.github.com/mikepenz/06df1204cbb65b874cb5

docs/_i18n/en/examples/select.md

@@ -6,22 +6,22 @@
 
 Use `clickToSelect`, `selectItemName` options and `radio` column option to show a radio select table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/29/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/29/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Checkbox Select
 
 Use `clickToSelect` option and `checkbox` column option to show a checkbox select table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/30/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/30/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Disabled Checkbox
 
 Use `checkboxHeader`, `checkboxEnable` options and `formatter` column option to disabled select input. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/31/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/31/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Single Checkbox
 
 Use `singleSelect` option to allow checkbox selecting only one row. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/32/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/32/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/sort.md

@@ -6,10 +6,10 @@
 
 Use `sortName`, `sortOrder`, `sortable` options, and `sortable`, `order` column options to set the basic sort of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/18/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/18/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Custom Sort
 
 Use `sorter` column option to define the custom sort of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/19/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/19/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/style.md

@@ -6,16 +6,16 @@
 
 Use `height, classes, striped` options and `class, width` column options to set the styles of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/15/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/15/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## RowStyle
 
 Use `rowStyle` option to set the row style of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/16/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/16/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## CellStyle
 
 Use `cellStyle` column option to set the cell style of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/30sx4h3t/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/30sx4h3t/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/examples/toolbar.md

@@ -6,10 +6,10 @@
 
 Use `search`, `showColumns`, `showRefresh`, `showToggle` options to show the basic toolbars. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/33/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/33/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Custom Toolbar
 
 Use `toolbar` option to define the custom toolbars. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/34/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/34/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/en/extensions/editable.md

@@ -25,4 +25,4 @@ Use Plugin:
 
 ## Editable Examples
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/28/embedded/html,js,resources,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/28/embedded/html,js,resources,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/align.md

@@ -2,4 +2,4 @@
 
 Use `align`, `halign` and `valign` options to set the alignment of the columns and their header. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/17/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/17/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/basic.md

@@ -6,16 +6,16 @@
 
 Transform table from an existing, unformatted html table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/11/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/11/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Table from data
 
 Transform table from an existing data. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/13/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/13/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Table from url
 
 Transform table from an url. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/14/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/14/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/card-view.md

@@ -2,4 +2,4 @@
 
 Use `cardView: true` option to show Card View. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/27/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/27/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/columns.md

@@ -6,10 +6,10 @@
 
 Use `showColumns`, `minimumCountColumns` options, and `visible`, `switchable` column options to show the columns menu list use to switch. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/24/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/24/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Large Columns
 
 Bootstrap table support large columns, it will auto to show the horizontal scroll bar. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="350" src="http://jsfiddle.net/wenyi/e3nk137y/26/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="350" data-src="http://jsfiddle.net/wenyi/e3nk137y/26/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/events.md

@@ -6,11 +6,11 @@
 
 Table events. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="500" src="http://jsfiddle.net/wenyi/e3nk137y/36/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" data-src="http://jsfiddle.net/wenyi/e3nk137y/36/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Column Events
 
 Use `formatter`, `events` column option to define the custom events. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="500" src="http://jsfiddle.net/wenyi/e3nk137y/39/embedded/html,js,css,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" data-src="http://jsfiddle.net/wenyi/e3nk137y/39/embedded/html,js,css,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 

docs/_i18n/fr/examples/format.md

@@ -2,4 +2,4 @@
 
 Use `formatter` column option to format the display of bootstrap table column. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/21/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/21/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/hide-header.md

@@ -2,4 +2,4 @@
 
 Use `showHeader: false` to hide the header of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/22/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/22/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/methods.md

@@ -6,7 +6,7 @@
 
 The table header does not adjust automatically, We need to call `resetView` method. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/40/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/40/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 <!--

docs/_i18n/fr/examples/pagination.md

@@ -6,14 +6,14 @@
 
 The default side pagination of table is `client`. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="400" src="http://jsfiddle.net/wenyi/e3nk137y/42/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="400" data-src="http://jsfiddle.net/wenyi/e3nk137y/42/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 ## Server Side
 
 Use sidePagination: `server` option to define the server side pagination of table. _by [@mikepenz](https://github.com/mikepenz)_
 
-<iframe width="100%" height="400" src="http://jsfiddle.net/4r6g4cfu/3/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="400" data-src="http://jsfiddle.net/4r6g4cfu/3/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 Here's the server-side code.
 https://gist.github.com/mikepenz/06df1204cbb65b874cb5

docs/_i18n/fr/examples/select.md

@@ -6,22 +6,22 @@
 
 Use `clickToSelect`, `selectItemName` options and `radio` column option to show a radio select table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/29/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/29/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Checkbox Select
 
 Use `clickToSelect` option and `checkbox` column option to show a checkbox select table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/30/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/30/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Disabled Checkbox
 
 Use `checkboxHeader`, `checkboxEnable` options and `formatter` column option to disabled select input. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/31/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/31/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Single Checkbox
 
 Use `singleSelect` option to allow checkbox selecting only one row. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/32/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/32/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/sort.md

@@ -6,10 +6,10 @@
 
 Use `sortName`, `sortOrder`, `sortable` options, and `sortable`, `order` column options to set the basic sort of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/18/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/18/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Custom Sort
 
 Use `sorter` column option to define the custom sort of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/19/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/19/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/style.md

@@ -6,16 +6,16 @@
 
 Use `height, classes, striped` options and `class, width` column options to set the styles of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/15/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/15/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## RowStyle
 
 Use `rowStyle` option to set the row style of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/16/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/16/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## CellStyle
 
 Use `cellStyle` column option to set the cell style of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/30sx4h3t/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/30sx4h3t/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/examples/toolbar.md

@@ -6,10 +6,10 @@
 
 Use `search`, `showColumns`, `showRefresh`, `showToggle` options to show the basic toolbars. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/33/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/33/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Custom Toolbar
 
 Use `toolbar` option to define the custom toolbars. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/34/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/34/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/fr/extensions/editable.md

@@ -25,4 +25,4 @@ Use Plugin:
 
 ## Editable Examples
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/28/embedded/html,js,resources,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/28/embedded/html,js,resources,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/align.md

@@ -2,4 +2,4 @@
 
 Use `align`, `halign` and `valign` options to set the alignment of the columns and their header. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/17/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/17/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/basic.md

@@ -6,16 +6,16 @@
 
 Transform table from an existing, unformatted html table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/11/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/11/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Table from data
 
 Transform table from an existing data. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/13/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/13/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Table from url
 
 Transform table from an url. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/14/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/14/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/card-view.md

@@ -2,4 +2,4 @@
 
 Use `cardView: true` option to show Card View. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/27/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/27/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/columns.md

@@ -6,10 +6,10 @@
 
 Use `showColumns`, `minimumCountColumns` options, and `visible`, `switchable` column options to show the columns menu list use to switch. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/24/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/24/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Large Columns
 
 Bootstrap table support large columns, it will auto to show the horizontal scroll bar. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="350" src="http://jsfiddle.net/wenyi/e3nk137y/26/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="350" data-src="http://jsfiddle.net/wenyi/e3nk137y/26/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/events.md

@@ -6,11 +6,11 @@
 
 Table events. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="500" src="http://jsfiddle.net/wenyi/e3nk137y/36/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" data-src="http://jsfiddle.net/wenyi/e3nk137y/36/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Column Events
 
 Use `formatter`, `events` column option to define the custom events. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="500" src="http://jsfiddle.net/wenyi/e3nk137y/39/embedded/html,js,css,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" data-src="http://jsfiddle.net/wenyi/e3nk137y/39/embedded/html,js,css,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 

docs/_i18n/zh-cn/examples/format.md

@@ -2,4 +2,4 @@
 
 Use `formatter` column option to format the display of bootstrap table column. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/21/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/21/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/hide-header.md

@@ -2,4 +2,4 @@
 
 Use `showHeader: false` to hide the header of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/22/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/22/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/methods.md

@@ -6,7 +6,7 @@
 
 The table header does not adjust automatically, We need to call `resetView` method. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/40/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/40/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 <!--

docs/_i18n/zh-cn/examples/pagination.md

@@ -6,14 +6,14 @@
 
 The default side pagination of table is `client`. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="400" src="http://jsfiddle.net/wenyi/e3nk137y/42/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="400" data-src="http://jsfiddle.net/wenyi/e3nk137y/42/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 ## Server Side
 
 Use sidePagination: `server` option to define the server side pagination of table. _by [@mikepenz](https://github.com/mikepenz)_
 
-<iframe width="100%" height="400" src="http://jsfiddle.net/4r6g4cfu/3/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="400" data-src="http://jsfiddle.net/4r6g4cfu/3/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 Here's the server-side code.
 https://gist.github.com/mikepenz/06df1204cbb65b874cb5

docs/_i18n/zh-cn/examples/select.md

@@ -6,22 +6,22 @@
 
 Use `clickToSelect`, `selectItemName` options and `radio` column option to show a radio select table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/29/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/29/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Checkbox Select
 
 Use `clickToSelect` option and `checkbox` column option to show a checkbox select table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/30/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/30/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Disabled Checkbox
 
 Use `checkboxHeader`, `checkboxEnable` options and `formatter` column option to disabled select input. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/31/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/31/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Single Checkbox
 
 Use `singleSelect` option to allow checkbox selecting only one row. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/32/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/32/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/sort.md

@@ -6,10 +6,10 @@
 
 Use `sortName`, `sortOrder`, `sortable` options, and `sortable`, `order` column options to set the basic sort of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/18/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/18/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Custom Sort
 
 Use `sorter` column option to define the custom sort of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/19/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/19/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/style.md

@@ -6,16 +6,16 @@
 
 Use `height, classes, striped` options and `class, width` column options to set the styles of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/15/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/15/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## RowStyle
 
 Use `rowStyle` option to set the row style of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/16/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/16/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## CellStyle
 
 Use `cellStyle` column option to set the cell style of bootstrap table. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/30sx4h3t/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/30sx4h3t/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/examples/toolbar.md

@@ -6,10 +6,10 @@
 
 Use `search`, `showColumns`, `showRefresh`, `showToggle` options to show the basic toolbars. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/33/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/33/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Custom Toolbar
 
 Use `toolbar` option to define the custom toolbars. _by [@wenzhixin](https://github.com/wenzhixin)_
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/34/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/34/embedded/html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_i18n/zh-cn/extensions/editable.md

@@ -25,4 +25,4 @@ Use Plugin:
 
 ## Editable Examples
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/wenyi/e3nk137y/28/embedded/html,js,resources,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" data-src="http://jsfiddle.net/wenyi/e3nk137y/28/embedded/html,js,resources,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/assets/css/style.css

@@ -9,4 +9,12 @@
     font-size: 16px;
     font-weight: normal;
     line-height: 39px;
+}
+.examples-parent {
+    position: relative;
+}
+.examples-button {
+    position: absolute;
+    left: 20px;
+    top: 20px;
 }

docs/assets/js/common.js

@@ -20,4 +20,15 @@ $(function () {
             $('.language').text($(this).text());
         }
     });
+
+    // examples
+    $('iframe[data-src]').each(function () {
+        $(this).wrap('<div class="examples-parent"></div>').parent()
+            .append('<button class="examples-button btn btn-primary btn-lg"><i class="glyphicon glyphicon-fire"></i> Start Example</button>');
+    });
+    $(document).on('click', 'button.examples-button', function () {
+        var $iframe = $(this).prev();
+        $iframe.attr('src', $iframe.data('src'));
+        $(this).remove();
+    });
 });