githab
/
bootstrap-table


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title data-zh="例子 &middot; Bootstrap Table" data-es="Ejemplos &middot; Bootstrap Tabla">Examples &middot; Bootstrap Table</title>
    <meta name="author" content="zhixin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="assets/bootstrap2.3/css/bootstrap.min.css">-->
    <!--<link rel="stylesheet" href="assets/bootstrap2.3/css/bootstrap-responsive.min.css">-->
    <link rel="stylesheet" href="assets/bulletin/bulletin.css">
    <link rel="stylesheet" href="../src/bootstrap-table.css">
    <link rel="stylesheet" href="assets/highlightjs/default.min.css">
    <link rel="stylesheet" href="docs.css">
    <!--<link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">-->
    <!--[if lt IE 9]>
    <script src="//wenzhixin.net.cn/js/html5shiv.js"></script>
    <script src="//wenzhixin.net.cn/js/respond.min.js"></script>
    <![endif]-->

    <script src="assets/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/bulletin/jquery.bulletin.js"></script>
    <!--<script src="assets/bootstrap2.3/js/bootstrap.min.js"></script>-->
    <script src="../docs/examples.js"></script>
</head>
<body>
<a class="sr-only" href="#content">Skip to main content</a>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse"
                    data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
                Bootstrap Table
            </a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li>
                    <a href="getting-started.html" data-zh="开始使用" data-es="Uso">Usage</a>
                </li>
                <li>
                    <a href="documentation.html" data-zh="文档" data-es="Documentación">Docs</a>
                </li>
                <li class="active">
                    <a href="examples.html" data-zh="例子" data-es="Demos">Demos</a>
                </li>
                <li>
                    <a href="extensions.html" data-zh="扩展" data-es="Extensiones">Extensions</a>
                </li>
                <li>
                    <a href="faq.html" data-zh="常见问题" data-es="FAQ">FAQ</a>
                </li>
                <!-- Localization -->
                <li id="locale" class="">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="blank.gif" class="flag flag-en">
                        <span class="language">English</span> <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="active" data-locale="en">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-en" alt="United States"> English
                            </a>
                        <li data-locale="zh">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-zh" alt="China"> 简体中文
                            </a>
                        </li>
                        <li data-locale="es">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-es" alt="Español"> Español
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- GitHub buttons: see http://ghbtns.com -->
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></li>
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe></li>
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="175" height="20"></iframe></li>
            </ul>
        </nav>
    </div>
</header>
<div class="bs-header" id="content">
    <div class="container">
        <h1>
            <span data-zh="例子" data-es="Ejemplos"o>Examples</span>
            <a class="edit-pull-request" href="https://github.com/wenzhixin/bootstrap-table/edit/master/docs/examples.html" title="Edit the docs">
                <i class="glyphicon glyphicon-edit"></i>
            </a>
        </h1>
        <p data-zh="使用Bootstrap Table的例子。" data-es="Ejemplos de bootstrap table.">The examples of bootstrap table.</p>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-3 span3">
            <div class="bs-sidebar" role="complementary">
                <ul class="nav bs-sidenav">
                    <li>Loading...</li>
                </ul>
            </div>
        </div>
        <div class="col-md-9 span9" role="main">
            <div class="page-header alert alert-info">
                <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
                <b data-zh="注意：" data-es="NOTA:">NOTE:</b> <span data-zh="Bootstrap Table 是基于 <a href='https://github.com/wenzhixin/bootstrap-table/blob/master/LICENSE'>The MIT License</a> 的开源项目，你可以任意的使用和修改这个插件。假如您觉得这个开源项目对你有帮助，麻烦给这个项目加颗星（<a href='http://github.com/wenzhixin/bootstrap-table'><b>Star</b></a>），您的支持是我最大的动力，谢谢。" data-es="Bootstrap Table está bajo la licencia de <a href='https://github.com/wenzhixin/bootstrap-table/blob/master/LICENSE'>The MIT License</a>. Es completamente gratis, además usted puede usarlo y modificarlo como desee. Si este plugin es útil para usted, puede <a href='http://github.com/wenzhixin/bootstrap-table'><b>Star</b></a> este repositorio, su apoyo es mi mayor motivación, gracias.">Bootstrap Table is licensed under the <a href="https://github.com/wenzhixin/bootstrap-table/blob/master/LICENSE">The MIT License</a>. Completely free, you can arbitrarily use and modify this plugin. If this plugin is useful to you, you can <a href="http://github.com/wenzhixin/bootstrap-table"><b>Star</b></a> this repo, your support is my biggest motive force, thanks.</span>
            </div>
            <div>
                <div>
                    <h2 data-zh="使用的API：" data-es="Usando el API:">Use API:</h2>
                    <ul>
                        <li><a href="data1.json">data1.json</a></li>
                        <li><a href="data2.json">data2.json</a></li>
                        <li><a href="data3.json">data3.json</a></li>
                        <li><a href="data4.json">data4.json</a></li>
                        <li><a href="/examples/bootstrap_table/data?offset=0&limit=10">/examples/bootstrap_table/data?offset=0&limit=10&search=test</a></li>
                    </ul>
                </div>
                <hr>
                <div>
                    <h2>AJAX:</h2>
                    <p>Use <code>url</code>, <code>method</code>, <code>cache</code>, <code>contentType</code>, <code>dataType</code>, <code>queryParams</code>, <code>queryParamsType</code>, <code>responseHandler</code> options to set the AJAX request and response params.</p>
                </div>
                <hr>

                <div class="page-header">
                    <h1 id="basic-table" data-zh="基本表格" data-es="Tabla básica">
                        Basic Table
                    </h1>
                    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-zh="使用弹出框" data-es="Ver modal">
                        Launch Modal
                    </button>
                </div>
                <p data-zh='不通过JavaScript的方式启动Bootstrap Table（使用<code>data-toggle="table"</code>）。' data-es='Use <code>data-toggle="table"</code> para activar bootstrap table sin Javascript.'>Use <code>data-toggle="table"</code> to activate bootstrap table without writing JavaScript.</p>
                <div class="bs-example">
                    <table data-toggle="table"
                           data-url="data1.json"
                           data-cache="false"
                           data-height="299">
                        <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>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only" data-zh="关闭" data-es="Cerrar">Close</span></button>
                                <h4 class="modal-title" id="myModalLabel" data-zh="基本表格" data-es="Tabla básica">Basic Table</h4>
                            </div>
                            <div class="modal-body">
                                <table id="modal-table"
                                       data-url="data1.json"
                                       data-cache="false"
                                       data-height="299">
                                    <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>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal" data-zh="取消" data-es="Cancelar">Cancel</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal" data-zh="确定" data-es="Aceptar">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="transform-table" data-zh="表格转换" data-es="Tabla transformada">Transform Table</h1>
                </div>
                <p data-zh="从已经存在、未被格式化的表格中转换为Bootstrap Table。" data-es="Transformar una tabla de una ya existente con formato html pero sin estilo CSS.">Transform table from an existing, unformatted html table.</p>
                <div class="bs-example">
                    <div id="transform-buttons" class="btn-group btn-default">
                        <button class="btn btn-default" id="transform">
                            <i class="glyphicon glyphicon-transfer"></i> <span data-zh="转换" data-es="Transformar" >Transform</span>
                        </button>
                        <button class="btn btn-default" id="destroy">
                            <i class="glyphicon glyphicon-trash"></i> <span data-zh="摧毁" data-es="Destruir">Destroy</span>
                        </button>
                    </div>
                    <table id="table-transform" data-toolbar="#transform-buttons">
                        <thead>
                        <tr>
                            <th>Item ID</th>
                            <th>Item Name</th>
                            <th>Item Price</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr id="tr_id_1" class="tr-class-1">
                            <td id="td_id_1" class="td-class-1">1</td>
                            <td>Item 1</td>
                            <td>$1</td>
                        </tr>
                        <tr id="tr_id_2" class="tr-class-2">
                            <td id="td_id_2" class="td-class-2">2</td>
                            <td>Item 2</td>
                            <td>$2</td>
                        </tr>
                        <tr id="tr_id_3" class="tr-class-3">
                            <td id="td_id_3" class="td-class-3">3</td>
                            <td>Item 3</td>
                            <td>$3</td>
                        </tr>
                        <tr id="tr_id_4" class="tr-class-4">
                            <td id="td_id_4" class="td-class-4">4</td>
                            <td>Item 4</td>
                            <td>$4</td>
                        </tr>
                        <tr id="tr_id_5" class="tr-class-5">
                            <td id="td_id_5" class="td-class-5">5</td>
                            <td>Item 5</td>
                            <td>$5</td>
                        </tr>
                        </tbody>
                    </table>
                    <script>
                        $(function () {
                            var $table = $('#table-transform');
                            $('#transform').click(function () {
                                $table.bootstrapTable();
                            });
                            $('#destroy').click(function () {
                                $table.bootstrapTable('destroy');
                            });
                        });
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="classes-table" data-zh="表格样式" data-es="Tabla con estilo">Table Style</h1>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="用<code>height</code>, <code>classes</code>, <code>striped</code>, <code>rowStyle</code> 属性和<code>class</code>, <code>width</code>, <code>cellStyle</code> 列属性设置 bootstrap table 的样式。"
                data-es="Use las opciones <code>height</code>, <code>classes</code>, <code>striped</code>, <code>rowStyle</code> y las opciones de columnas <code>class</code>, <code>width</code>, <code>cellStyle</code> para setear los estilos de bootstrap table.">Use <code>height</code>, <code>classes</code>, <code>striped</code>, <code>rowStyle</code> options and <code>class</code>, <code>width</code>, <code>cellStyle</code> column options to set the styles of bootstrap table.</p>
                <div class="bs-example">
                    <div>
                        <label><input id="hover" type="checkbox" checked> hover</label>
                        <label><input id="striped" type="checkbox"> striped</label>
                        <label><input id="condensed" type="checkbox"> condensed</label>
                    </div>
                    <table id="table-style" data-url="data1.json" data-height="400" data-row-style="rowStyle">
                        <thead>
                        <tr>
                            <th data-field="id" class="col-md-2">Item ID</th>
                            <th data-field="name" class="col-md-6">
                                <i class="glyphicon glyphicon-star"></i>
                                Item Name
                            </th>
                            <th data-field="price" class="col-md-4">
                                <i class="glyphicon glyphicon-heart"></i>
                                Item Price
                            </th>
                        </tr>
                        </thead>
                    </table>
                    <script>
                        $(function () {
                            $('#hover, #striped, #condensed').click(function () {
                                var classes = 'table';

                                if ($('#hover').prop('checked')) {
                                    classes += ' table-hover';
                                }
                                if ($('#condensed').prop('checked')) {
                                    classes += ' table-condensed';
                                }
                                $('#table-style').bootstrapTable('destroy')
                                    .bootstrapTable({
                                        classes: classes,
                                        striped: $('#striped').prop('checked')
                                    });
                            });
                        });

                        function rowStyle(row, index) {
                            var classes = ['active', 'success', 'info', 'warning', 'danger'];

                            if (index % 2 === 0 && index / 2 < classes.length) {
                                return {
                                    classes: classes[index / 2]
                                };
                            }
                            return {};
                        }
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="aligning-columns" data-zh="列对齐" data-es="Columnas alineadas">Aligning Columns</h1>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>align</code>, <code>halign</code> 和 <code>valign</code> 来设置列和表头的对齐方式。" data-es="Use las opciones <code>align</code>, <code>halign</code> y <code>valign</code> para setear el alineamiento de las columnas y el header.">Use <code>align</code>, <code>halign</code> and <code>valign</code> options to set the alignment of the columns and their header.</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299">
                        <thead>
                        <tr>
                            <th data-field="id" data-halign="right" data-align="center">Item ID</th>
                            <th data-field="name" data-halign="center" data-align="left">Item Name</th>
                            <th data-field="price" data-halign="left" data-align="right">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="sort-table" data-zh="表格排序" data-es="Tabla ordenada">Sort Table</h1>
                </div>
                <div class="page-header">
                    <h2 id="basic-sort-table" data-zh="基本排序" data-es="Básico">Basic</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>sortName</code>, <code>sortOrder</code>, <code>sortable</code> 属性和 <code>sortable</code>, <code>order</code> 列属性去设置表格的基本排序。" data-es="Use las opciones<code>sortName</code>, <code>sortOrder</code>, <code>sortable</code> y las opciones de columnas <code>sortable</code>, <code>order</code> para setear el ordenamiento básico de bootstrap table.">Use <code>sortName</code>, <code>sortOrder</code>, <code>sortable</code> options, and <code>sortable</code>, <code>order</code> column options to set the basic sort of bootstrap table.</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc">
                        <thead>
                            <tr>
                                <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
                                <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
                                <th data-field="price" data-sortable="true" data-sortable="true">Item Price</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            
                <div class="page-header">
                    <h2 id="custom-sort-table" data-zh="自定义排序" data-es="Personalizada">Custom</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>sorter</code>列属性来定义表格的自定义排序。" data-es="Use la opción de columna <code>sorter</code> para definir el ordenamiento personalizado de bootstrap table.">Use <code>sorter</code> column option to define the custom sort of bootstrap table.</p>
                <div class="bs-example">
                    <table id="table-custom-sort" data-url="data1.json" data-height="299" data-sort-name="price" data-sort-order="desc">
                        <thead>
                        <tr>
                            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
                            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
                            <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                    <script>
                        function priceSorter(a, b) {
                            a = +a.substring(1); // remove $
                            b = +b.substring(1);
                            if (a > b) return 1;
                            if (a < b) return -1;
                            return 0;
                        }
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="format-table" data-zh="格式化表格" data-es="Tabla con formato">Format Table</h1>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>formatter</code>列属性来格式化表格列显示。" data-es="Use la opción de columna <code>formatter</code> para formatear como se muestra la columna bootstrap table.">Use <code>formatter</code> column option to format the display of bootstrap table column.</p>
                <div class="bs-example">
                    <table id="table-format" data-url="data1.json" data-height="299">
                        <thead>
                        <tr>
                            <th data-field="id">Item ID</th>
                            <th data-field="name" data-formatter="nameFormatter">Item Name</th>
                            <th data-field="price" data-formatter="priceFormatter">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                    <script>
                        function nameFormatter(value, row) {
                            var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'

                            return '<i class="glyphicon ' + icon + '"></i> ' + value;
                        }

                        function priceFormatter(value) {
                            // 16777215 == ffffff in decimal
                            var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
                            return '<div  style="color: ' + color + '">' +
                                    '<i class="glyphicon glyphicon-usd"></i>' +
                                    value.substring(1) +
                                    '</div>';
                        }
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="hide-header-table" data-zh="隐藏表头" data-es="Tabla con Header oculto">Hide Header Table</h1>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>showHeader: false</code> 去隐藏表头。" data-es="Use la opción <code>showHeader: false</code> para ocultar el header de bootstrap table.">Use <code>showHeader: false</code> to hide the header of bootstrap table.</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299" data-show-header="false">
                        <thead>
                        <tr>
                            <th data-field="name">Item Name</th>
                            <th data-field="price">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="show-columns-table" data-zh="显示列选项" data-es="Ver columnas de las tabla">Show Columns Table</h1>
                </div>
                <div class="page-header">
                    <h2 id="basic-show-columns-table" data-zh="基本显示" data-es="Básico">Basic</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>showColumns</code>, <code>minimumCountColumns</code> 属性和 <code>visible</code>, <code>switchable</code> 列属性去显示列菜单用于切换。" data-es="Use las opciones <code>showColumns</code>, <code>minimumCountColumns</code> y las opciones de columna <code>visible</code>, <code>switchable</code> para mostrar el menu de columnas para mostrar u ocultar.">Use <code>showColumns</code>, <code>minimumCountColumns</code> options, and <code>visible</code>, <code>switchable</code> column options to show the columns menu list use to switch.</p>
                <div class="bs-example">
                    <table data-url="data3.json" data-height="299" data-show-columns="true" data-id-field="id">
                        <thead>
                        <tr>
                            <th data-field="state" data-radio="true"></th>
                            <th data-field="name" data-switchable="false">Name</th>
                            <th data-field="price">Price</th>
                            <th data-field="column1">Columns1</th>
                            <th data-field="column2" data-visible="false">Columns2</th>
                            <th data-field="column3" data-switchable="false">Columns3</th>
                            <th data-field="column4" data-visible="false">Columns4</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <div class="page-header">
                    <h2 id="large-columns-table" data-zh="超多列显示" data-es="Muchas columnas">Large Columns</h2>
                    <button class="btn btn-primary" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="Bootstrap table 支持超多列，会自动显示水平滚动条。" data-es="Bootstrap table soporta mucha cantidad de columnas, se mostrará automáticamente el scroll horizontal.">Bootstrap table support large columns, it will auto to show the horizontal scroll bar.</p>
                <div class="bs-example">
                    <table id="table-large-columns" data-height="400" data-show-columns="true"></table>
                    <script>
                        $(function () {
                            $('#large-columns-table').next().click(function () {
                                $(this).hide();
                                buildTable($('#table-large-columns'), 50, 50);
                            });
                        });
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div class="page-header">
                <h1 id="card-view" data-zh="名片（card）表格" data-es="Tabla de vista de tarjeta">Card View Table</h1>
                <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                    Start Example
                </button>
            </div>
            <p data-zh="使用<code>cardView: true</code>属性去显示名片（card）表格。" data-es="Use la opción <code>cardView: true</code> para mostrar la vista de tarjeta.">Use <code>cardView: true</code> option to show Card View.</p>
            <div class="bs-example">
                <table data-url="data4.json" data-height="299" data-card-view="true" data-response-handler="responseHandler">
                    <thead>
                    <tr>
                        <th data-field="name">Name</th>
                        <th data-field="license">License</th>
                        <th data-field="description">Description</th>
                        <th data-field="url">Url</th>
                    </tr>
                    </thead>
                </table>
                <script>
                    // client side
                    function responseHandler(res) {
                        return res.repos;
                    }

                    // server side
                    /*
                    function responseHandler(res) {
                        return {
                            rows: res.repos;
                            total: res.repos.length
                        }
                    }
                    */
                </script>
            </div>
            <div class="highlight"><pre><code class="language-html"></code></pre></div>

            <div>
                <div class="page-header">
                    <h1 id="table-select" data-zh="表格选择器" data-es="Tabla seleccionable">Table Select</h1>
                </div>

                <div class="page-header">
                    <h2 id="radio-table" data-zh="单选框" data-es="Radio">Radio</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>clickToSelect</code>, <code>selectItemName</code> 属性和 <code>radio</code> 列属性来显示单选框表格。" data-es="Use las opciones <code>clickToSelect</code>, <code>selectItemName</code> y las opción de columna <code>radio</code> para mostrar el Radio seleccionable en la tabla.">Use <code>clickToSelect</code>, <code>selectItemName</code> options and <code>radio</code> column option to show a radio select table.</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299" data-click-to-select="true" data-select-item-name="radioName">
                        <thead>
                            <tr>
                                <th data-field="state" data-radio="true"></th>
                                <th data-field="id" data-align="right">Item ID</th>
                                <th data-field="name" data-align="center">Item Name</th>
                                <th data-field="price" data-align="left">Item Price</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <div class="page-header">
                    <h2 id="checkbox-table" data-zh="复选框" data-es="Checkbox">Checkbox</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>clickToSelect</code> 属性和 <code>radio</code> 列属性来显示复选框表格。" data-es="Use la opción <code>clickToSelect</code> y la opción de columna <code>checkbox</code> para mostrar el Checkbox seleccionable en la tabla.">Use <code>clickToSelect</code> option and <code>checkbox</code> column option to show a checkbox select table.</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299" data-click-to-select="true">
                        <thead>
                            <tr>
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-field="id" data-align="right">Item ID</th>
                                <th data-field="name" data-align="center">Item Name</th>
                                <th data-field="price" data-align="">Item Price</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <div class="page-header">
                    <h2 id="disabled-checkbox-table" data-zh="禁用的复选框" data-es="Checkbox desahabilitado">Disabled Checkbox</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>checkboxHeader</code>, <code>checkboxEnable</code> 属性和 <code>radio</code> 列属性来禁用表格选择器。" data-es="Use las opciones <code>checkboxHeader</code>, <code>checkboxEnable</code> y la opción de columna <code>formatter</code> para desahabilitar el control seleccionado.">Use <code>checkboxHeader</code>, <code>checkboxEnable</code> options and <code>formatter</code> column option to disabled select input.</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299" data-click-to-select="true">
                        <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"
                                data-formatter="stateFormatter"></th>
                            <th data-field="id" data-align="right">Item ID</th>
                            <th data-field="name" data-align="center">Item Name</th>
                            <th data-field="price" data-align="">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                    <script>
                        function stateFormatter(value, row, index) {
                            if (index === 2) {
                                return {
                                    disabled: true
                                };
                            }
                            if (index === 5) {
                                return {
                                    disabled: true,
                                    checked: true
                                }
                            }
                            return value;
                        }
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <div class="page-header">
                    <h2 id="single-checkbox-table" data-zh="只能单选的复选框" data-es="Checkbox simple">Single Checkbox</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>singleSelect</code> 属性来允许表格只能选择一列。" data-es="Use la opción <code>singleSelect</code> para permitir solo un fila seleccionada a la vez..">Use <code>singleSelect</code> option to allow checkbox selecting only one row..</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299" data-click-to-select="true" data-single-select="true">
                        <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="id" data-align="right">Item ID</th>
                            <th data-field="name" data-align="center">Item Name</th>
                            <th data-field="price" data-align="">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="toolbar-table" data-zh="表格工具栏" data-es="Tabla con barra de herramientas">Table Toolbar</h1>
                </div>

                <div class="page-header">
                    <h2 id="basic-toolbar-table" data-zh="基本工具栏" data-es="Básico">Basic</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>search</code>, <code>showColumns</code>, <code>showRefresh</code>, <code>showToggle</code> 属性来显示基本的工具栏。" data-es="Use las opciones <code>search</code>, <code>showColumns</code>, <code>showRefresh</code>, <code>showToggle</code> para mostrar una barra de herramientas básica.">Use <code>search</code>, <code>showColumns</code>, <code>showRefresh</code>, <code>showToggle</code> options to show the basic toolbars.</p>
                <div class="bs-example">
                    <table data-url="data1.json" data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">
                        <thead>
                        <tr>
                            <th data-field="state" data-radio="true">Item ID</th>
                            <th data-field="id" data-align="right">Item ID</th>
                            <th data-field="name" data-align="center">Item Name</th>
                            <th data-field="price" data-align="left">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <div class="page-header">
                    <h2 id="custom-toolbar-table" data-zh="自定义工具栏" data-es="Personalizada">Custom</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>toolbar</code> 属性来自定义工具子。" data-es="Use la opción <code>toolbar</code> para definir la barra de herramientas personalizada.">Use <code>toolbar</code> option to define the custom toolbars.</p>
                <div class="bs-example">
                    <div id="custom-toolbar">
                        <div class="form-inline" role="form">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">@</div>
                                    <input class="form-control" type="email" placeholder="Enter email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="exampleInputPassword2">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Remember me
                                </label>
                            </div>
                            <button type="submit" class="btn btn-default">Sign in</button>
                        </div>
                    </div>
                    <table data-url="data1.json" data-height="299" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
                        <thead>
                        <tr>
                            <th data-field="id" data-align="right">Item ID</th>
                            <th data-field="name" data-align="center">Item Name</th>
                            <th data-field="price" data-align="">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="pagination-table" data-zh="分页" data-es="Tabla con paginación">Pagination Table</h1>
                </div>
                <p data-es="Use las opciones <code>pagination</code>, <code>sidePagination</code>, <code>pageNumber</code>, <code>pageSize</code>, <code>pageList</code> para setear las opciones de paginación.">Use <code>pagination</code>, <code>sidePagination</code>, <code>pageNumber</code>, <code>pageSize</code>, <code>pageList</code> options to set the pagination options.</p>

                <div class="page-header">
                    <h2 id="client-side-pagination-table" data-zh="客户的分页" data-es="Lado del cliente">Client Side</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <div class="form-inline">
                    <label>
                        I18n:
                        <select class="form-control" id="i18n">
                            <option value="da-DK">da-DK</option>
                            <option value="el-GR">el-GR</option>
                            <option value="en-US" selected="selected">en-US</option>
                            <option value="es-AR">es-AR</option>
                            <option value="fr-BE">fr-BE</option>
                            <option value="it-IT">it-IT</option>
                            <option value="nl-NL">nl-NL</option>
                            <option value="pt-BR">pt-BR</option>
                            <option value="ru-RU">ru-RU</option>
                            <option value="tr-TR">tr-TR</option>
                            <option value="vi-VN">vi-VN</option>
                            <option value="zh-CN">zh-CN</option>
                            <option value="zh-TW">zh-TW</option>
                        </select>
                        <a href="https://github.com/wenzhixin/bootstrap-table/tree/master/src/locale">Translate your language?</a>
                    </label>
                </div>
                <div class="bs-example">
                    <table id="table-pagination" data-url="data2.json" data-height="400" data-pagination="true" data-search="true">
                        <thead>
                            <tr>
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
                                <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
                                <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <div class="page-header">
                    <h2 id="server-side-pagination-table" data-zh="服务器端分页" data-es="Lado del servidor">Server Side</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>sidePagination: 'server'</code> 属性来定义分页是在服务器端。" data-es="Use la opción <code>sidePagination: 'server'</code> para definir la paginación del lado del servidor.">Use <code>sidePagination: 'server'</code> option to define the server side pagination of table.</p>
                <div class="bs-example">
                    <table data-url="/examples/bootstrap_table/data"
                           data-height="400"
                           data-side-pagination="server"
                           data-pagination="true"
                           data-page-list="[5, 10, 20, 50, 100, 200]"
                           data-search="true">
                        <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
                            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
                            <th data-field="price" data-sortable="true">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="table-events" data-zh="表格事件" data-es="Tabla con eventos">Table Events</h1>
                </div>

                <div class="page-header">
                    <h2 id="basic-events-table" data-zh="基本事件" data-es="Eventos básicos">Basic Events</h2>
                    <button class="btn btn-primary" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <div class="bs-example">
                    <div class="alert alert-success" id="events-result" data-es="Aquí se muestra el resultado del evento">
                        Here is the result of event.
                    </div>
                    <table id="events-table"
                           data-url="data2.json"
                           data-height="299"
                           data-search="true"
                           data-pagination="true"
                           data-show-columns="true">
                        <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="id" data-sortable="true">Item ID</th>
                            <th data-field="name" data-sortable="true">Item Name</th>
                            <th data-field="price" data-sortable="true">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                    <script>
                        $(function () {
                            $('#basic-events-table').next().click(function () {
                                $(this).hide();

                                var $result = $('#events-result');

                                $('#events-table').bootstrapTable({
                                    /*
                                    onAll: function (name, args) {
                                        console.log('Event: onAll, data: ', args);
                                    }
                                    onClickRow: function (row) {
                                        $result.text('Event: onClickRow, data: ' + JSON.stringify(row));
                                    },
                                    onDblClickRow: function (row) {
                                        $result.text('Event: onDblClickRow, data: ' + JSON.stringify(row));
                                    },
                                    onSort: function (name, order) {
                                        $result.text('Event: onSort, data: ' + name + ', ' + order);
                                    },
                                    onCheck: function (row) {
                                        $result.text('Event: onCheck, data: ' + JSON.stringify(row));
                                    },
                                    onUncheck: function (row) {
                                        $result.text('Event: onUncheck, data: ' + JSON.stringify(row));
                                    },
                                    onCheckAll: function () {
                                        $result.text('Event: onCheckAll');
                                    },
                                    onUncheckAll: function () {
                                        $result.text('Event: onUncheckAll');
                                    },
                                    onLoadSuccess: function (data) {
                                        $result.text('Event: onLoadSuccess, data: ' + data);
                                    },
                                    onLoadError: function (status) {
                                        $result.text('Event: onLoadError, data: ' + status);
                                    },
                                    onColumnSwitch: function (field, checked) {
                                        $result.text('Event: onSort, data: ' + field + ', ' + checked);
                                    },
                                    onPageChange: function (number, size) {
                                        $result.text('Event: onPageChange, data: ' + number + ', ' + size);
                                    },
                                    onSearch: function (text) {
                                        $result.text('Event: onSearch, data: ' + text);
                                    }
                                    */
                                }).on('all.bs.table', function (e, name, args) {
                                    console.log('Event:', name, ', data:', args);
                                }).on('click-row.bs.table', function (e, row, $element) {
                                    $result.text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
                                }).on('dbl-click-row.bs.table', function (e, row, $element) {
                                    $result.text('Event: dbl-click-row.bs.table, data: ' + JSON.stringify(row));
                                }).on('sort.bs.table', function (e, name, order) {
                                    $result.text('Event: sort.bs.table, data: ' + name + ', ' + order);
                                }).on('check.bs.table', function (e, row) {
                                    $result.text('Event: check.bs.table, data: ' + JSON.stringify(row));
                                }).on('uncheck.bs.table', function (e, row) {
                                    $result.text('Event: uncheck.bs.table, data: ' + JSON.stringify(row));
                                }).on('check-all.bs.table', function (e) {
                                    $result.text('Event: check-all.bs.table');
                                }).on('uncheck-all.bs.table', function (e) {
                                    $result.text('Event: uncheck-all.bs.table');
                                }).on('load-success.bs.table', function (e, data) {
                                    $result.text('Event: load-success.bs.table');
                                }).on('load-error.bs.table', function (e, status) {
                                    $result.text('Event: load-error.bs.table, data: ' + status);
                                }).on('column-switch.bs.table', function (e, field, checked) {
                                    $result.text('Event: column-switch.bs.table, data: ' +
                                        field + ', ' + checked);
                                }).on('page-change.bs.table', function (e, size, number) {
                                    $result.text('Event: page-change.bs.table, data: ' + number + ', ' + size);
                                }).on('search.bs.table', function (e, text) {
                                    $result.text('Event: search.bs.table, data: ' + text);
                                });
                            });
                        });
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>

                <div class="page-header">
                    <h2 id="column-events-table" data-zh="列事件" data-es="Eventos de columna">Column Events</h2>
                    <button class="btn btn-primary start-example" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="使用 <code>formatter</code>, <code>events</code> 列属性来自定义列事件。" data-es="Use las opciones de columna <code>formatter</code>, <code>events</code> para definiir los eventos.">Use <code>formatter</code>, <code>events</code> column option to define the custom events.</p>
                <div class="bs-example">
                    <table id="events-id2" data-url="data1.json" data-height="299" data-search="true">
                        <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="id" data-sortable="true">Item ID</th>
                            <th data-field="name" data-sortable="true">Item Name</th>
                            <th data-field="price" data-sortable="true">Item Price</th>
                            <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Item Operate</th>
                        </tr>
                        </thead>
                    </table>
                    <script>
                        function operateFormatter(value, row, index) {
                            return [
                                '<a class="like" href="javascript:void(0)" title="Like">',
                                    '<i class="glyphicon glyphicon-heart"></i>',
                                '</a>',
                                '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
                                    '<i class="glyphicon glyphicon-edit"></i>',
                                '</a>',
                                '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
                                    '<i class="glyphicon glyphicon-remove"></i>',
                                '</a>'
                            ].join('');
                        }

                        window.operateEvents = {
                            'click .like': function (e, value, row, index) {
                                alert('You click like icon, row: ' + JSON.stringify(row));
                                console.log(value, row, index);
                            },
                            'click .edit': function (e, value, row, index) {
                                alert('You click edit icon, row: ' + JSON.stringify(row));
                                console.log(value, row, index);
                            },
                            'click .remove': function (e, value, row, index) {
                                alert('You click remove icon, row: ' + JSON.stringify(row));
                                console.log(value, row, index);
                            }
                        };
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="table-methods" data-zh="表格方法" data-es="Métodos de la tabla">Table methods</h1>
                    <button class="btn btn-primary" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <p data-zh="方法的使用语法为: <code>$('#table').bootstrapTable('method', parameter);</code>。" data-es="Sintáxis para llamar a los métodos: <code>$('#table').bootstrapTable('method', parameter);</code>.">The calling method syntax: <code>$('#table').bootstrapTable('method', parameter);</code>.</p>
                <div class="bs-example">
                    <div class="btn-group">
                        <button class="btn btn-default" id="get-selections">
                            Get Selections
                        </button>
                        <button class="btn btn-default" id="get-data" data-method="getData">
                            Get Data
                        </button>
                        <button class="btn btn-default" id="load-data" data-method="load">
                            Load Data
                        </button>
                        <button class="btn btn-default" id="append-data" data-method="append">
                            Append Data
                        </button>
                        <button class="btn btn-default" id="remove-data" data-method="remove">
                            Remove Data
                        </button>
                        <button class="btn btn-default" id="update-row" data-method="updateRow">
                            Update Row
                        </button>
                        <button class="btn btn-default" id="merge-cells">
                            Merge Cells
                        </button>
                        <button class="btn btn-default" id="check-all" data-method="checkAll">
                            Check All
                        </button>
                        <button class="btn btn-default" id="uncheck-all" data-method="uncheckAll">
                            Uncheck All
                        </button>
                        <button class="btn btn-default" id="show-loading" data-method="showLoading">
                            Show Loading
                        </button>
                        <button class="btn btn-default" id="hide-loading" data-method="hideLoading">
                            Hide Loading
                        </button>
                        <button class="btn btn-default" id="refresh" data-method="refresh">
                            Refresh
                        </button>
                        <button class="btn btn-default" id="show-column" data-method="showColumn">
                            Show Column
                        </button>
                        <button class="btn btn-default" id="hide-column" data-method="hideColumn">
                            Hide Column
                        </button>
                    </div>
                    <table id="table-methods-table" data-height="299">
                        <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <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 () {
                            $('#table-methods').next().click(function () {
                                $(this).hide();

                                var id = 0,
                                    getRows = function () {
                                        var rows = [];

                                        for (var i = 0; i < 10; i++) {
                                            rows.push({
                                                id: id,
                                                name: 'test' + id,
                                                price: '$' + id
                                            });
                                            id++;
                                        }
                                        return rows;
                                    },
                                    // init table use data
                                    $table = $('#table-methods-table').bootstrapTable({
                                        data: getRows()
                                    });

                                $('#get-selections').click(function () {
                                    alert('Selected values: ' + JSON.stringify($table.bootstrapTable('getSelections')));
                                });
                                $('#get-data').click(function () {
                                    alert('current data: ' + JSON.stringify($table.bootstrapTable('getData')));
                                });
                                // This demonstrates utilizing the data-method attribute to use one 
                                //     jQuery handler to execute multiple methods. 
                                // ($this).data('method') retrieves the value of the data-method 
                                //     attribute of the object that was clicked which is then passed to 
                                //     the bootstrapTable function. 
                                // Only the load and append methods require a parameter                                 
                                $('#load-data, #append-data, #check-all, #uncheck-all, ' +
                                        '#show-loading, #hide-loading').click(function () {
                                    $table.bootstrapTable($(this).data('method'), getRows());
                                });
                                $('#refresh').click(function () {
                                    $table.bootstrapTable('refresh', {
                                        url: 'data1.json'
                                    });
                                });
                                $('#remove-data').click(function () {
                                    var selects = $table.bootstrapTable('getSelections');
                                        ids = $.map(selects, function (row) {
                                            return row.id;
                                        });

                                    $table.bootstrapTable('remove', {
                                        field: 'id',
                                        values: ids
                                    });
                                });
                                $('#update-row').click(function () {
                                    $table.bootstrapTable('updateRow', {
                                        index: 1,
                                        row: {
                                            name: 'test111111',
                                            price: '$111111'
                                        }
                                    });
                                });
                                $('#merge-cells').click(function () {
                                    $table.bootstrapTable('mergeCells', {
                                        index: 1,
                                        field: 'name',
                                        colspan: 2,
                                        rowspan: 3
                                    })
                                });
                                $('#show-column, #hide-column').click(function () {
                                    $table.bootstrapTable($(this).data('method'), 'id');
                                });
                            });
                        });
                    </script>
                </div>
                <div class="highlight"><pre><code class="language-html"></code></pre></div>
            </div>

            <div>
                <div class="page-header">
                    <h1 id="via-javascript-table" data-zh="通过JavaScript启用" data-es="Vía JavaScript">Via JavaScript</h1>
                    <button class="btn btn-primary" data-zh="开始使用例子" data-es="Ver ejemplo">
                        Start Example
                    </button>
                </div>
                <div class="bs-example">
                    <table id="table-javascript"></table>
                    <script>
                        $(function () {
                            $('#via-javascript-table').next().click(function () {
                                $(this).hide();

                                $('#table-javascript').bootstrapTable({
                                    method: 'get',
                                    url: 'data2.json',
                                    cache: false,
                                    height: 400,
                                    striped: true,
                                    pagination: true,
                                    pageSize: 50,
                                    pageList: [10, 25, 50, 100, 200],
                                    search: true,
                                    showColumns: true,
                                    showRefresh: true,
                                    minimumCountColumns: 2,
                                    clickToSelect: true,
                                    columns: [{
                                        field: 'state',
                                        checkbox: true
                                    }, {
                                        field: 'id',
                                        title: 'Item ID',
                                        align: 'right',
                                        valign: 'bottom',
                                        sortable: true
                                    }, {
                                        field: 'name',
                                        title: 'Item Name',
                                        align: 'center',
                                        valign: 'middle',
                                        sortable: true,
                                        formatter: nameFormatter
                                    }, {
                                        field: 'price',
                                        title: 'Item Price',
                                        align: 'left',
                                        valign: 'top',
                                        sortable: true,
                                        formatter: priceFormatter,
                                        sorter: priceSorter
                                    }, {
                                        field: 'operate',
                                        title: 'Item Operate',
                                        align: 'center',
                                        valign: 'middle',
                                        clickToSelect: false,
                                        formatter: operateFormatter,
                                        events: operateEvents
                                    }]
                                });
                            });
                        });
                    </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/jsfiddle-examples.md" data-es="Ejemplos en JSFiddle">JSFiddle Examples</a>
        </div>
    </div>
</div>

<!--<a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>-->

<footer class="bs-footer" role="contentinfo">
    <div class="container">
        <p>Copyright © 2012-2014, Bootstrap Table is licensed under the The MIT License. Coded by wenzhixin. </p>
        <ul class="footer-links">
            <li>Currently: v1.3.0</li>
            <li class="muted">·</li>
            <li><a href="http://wenzhixin.net.cn">My website</a></li>
            <li class="muted">·</li>
            <li><a href="http://repos.wenzhixin.net.cn">My repos</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/wenzhixin">Github (@wenzhixin)</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/wenzhixin/bootstrap-table/issues?state=open">Issues</a></li>
            <li class="muted">·</li>
            <li><a href="mailto:wenzhixin2010@gmail.com">Email</a></li>
        </ul>
    </div>
</footer>

<div class="goto-top">
    <i class="glyphicon glyphicon-plane"></i>
</div>

<div id="bulletin" class="bulletin">
    <ul>
        <li><a href="http://repos.wenzhixin.net.cn/">My Repositories - Show my repositories list.</a></li>
        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
        <li><a href="https://github.com/wenzhixin/bootstrap-show-password">Bootstrap Show Password - Show/hide password plugin for bootstrap.</a></li>
        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
    </ul>
    <div class="close"><a href="javascript:void(0)">×</a></div>
</div>

<script src="../src/bootstrap-table.js"></script>
<script src="common.js"></script>
<script src="//wenzhixin.net.cn/js/analytics.js"></script>
<script src="assets/highlightjs/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53c78e93678a7b4d"></script>
</body>
</html>