githab
/
bootstrap-table


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018
							<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.">
<meta name="keywords" content="table, bootstrap, bootstrap plugin, bootstrap resources, bootstrap table, jQuery plugin">
<meta name="author" content="Zhixin Wen, and Bootstrap table contributors">

<title>
  
    Documentation &middot; Bootstrap Table
  
</title>

<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">
<link href="../assets/css/sidenav.css?v=1.13.0" rel="stylesheet">
<link href="../assets/css/style.css?v=1.13.0&m=2" rel="stylesheet">
<link href="../assets/css/ads.css?m=3" rel="stylesheet">

<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="apple-touch-icon" href="../favicon.png">
<link rel="icon" href="../favicon.png">

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-36708951-1', 'wenzhixin.net.cn');
  ga('send', 'pageview');
</script>

<script type="text/javascript">
  if (window!=top) // 判断当前的window对象是否是top对象
    top.location.href = window.location.href; // 如果不是，将top对象的网址自动导向被嵌入网页的网址
</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<!-- 将此标记放置在 head 中，或放置在结束 body 标记之前，并使其紧邻此标记。 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

  </head>
  <body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" 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 href="../home/" class="navbar-brand">Bootstrap Table</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li >
                    <a href="../getting-started/">Getting started</a>
                </li>
                <li  class="active">
                    <a href="../documentation/">Documentation</a>
                </li>
                <li class="dropdown" >
                    <a href="javascript:" data-toggle="dropdown">
                        Examples
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="http://issues.wenzhixin.net.cn/bootstrap-table/" target="_blank">Examples</a></li>
                        <li><a href="https://github.com/wenzhixin/bootstrap-table/issues/1765">jsFiddle Examples</a></li>
                    </ul>
                </li>
                <li >
                    <a href="../extensions/">Extensions</a>
                </li>
                <li >
                    <a href="../donate/">Donate</a>
                </li>
                <li >
                    <a href="../faq/">FAQ</a>
                </li>
                <li>
                    <a href="https://github.com/wenzhixin/bootstrap-table" target="_blank">GitHub</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- Localization -->
                <li>
                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="language">English</span> <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        
                        <li data-language="en">
                            <a href="javascript:void(0)">
                                English
                            </a>
                        </li>
                        
                        <li data-language="zh-cn">
                            <a href="javascript:void(0)">
                                简体中文
                            </a>
                        </li>
                        
                        <li data-language="es">
                            <a href="javascript:void(0)">
                                Español
                            </a>
                        </li>
                        
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>


    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h1>Documentation</h1>
            <div>The documentation contains Table Properties, Column Properties, Events, Methods, and much more.</div>
          </div>
          <div class="col-md-4">
            <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DE27Y&placement=bootstrap-tablewenzhixinnetcn" id="_carbonads_js"></script>

          </div>
        </div>
      </div>
    </div>

    <div class="bs-docs-social">
    If you like bootstrap table: 
    <ul class="bs-docs-social-buttons">
        <li>
            <iframe class="github-btn"
                    src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=watch&count=true"
                    width="100" height="20" title="Star on GitHub"></iframe>
        </li>
        <li>
            <iframe class="github-btn"
                    src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=fork&count=true"
                    width="102" height="20" title="Fork on GitHub"></iframe>
        </li>
        <li>
            <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=wenzhixin&type=follow&count=true"
                    width="175" height="20" title="Follow on GitHub"></iframe>
        </li>
        <!--<li>-->
            <!-- https://about.twitter.com/resources/buttons#tweet -->
            <!--<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://wenzhixin.net.cn/p/bootstrap-table" data-via="BootstrapTable" data-related="BootstrapTable">Tweet</a>-->
        <!--</li>-->
        <!--<li>-->
             <!--将此标记放置在你希望显示+1 按钮的位置。 -->
            <!--<div class="g-plusone" data-annotation="inline" data-width="120"></div>-->
        <!--</li>-->
        <!--<li>-->
            <!--<div>QQ group:  103558783</div>-->
        <!--</li>-->
    </ul>
    Questions/Helps: 
    <ul class="bs-docs-social-buttons">
        <li>
            <a class="help-btn" href="http://stackoverflow.com/questions/tagged/bootstrap-table">StackOverflow</a>
        </li>
        <li>
            <a class="help-btn" href="http://segmentfault.com/t/bootstrap-table">SegmentFault</a>
        </li>
    </ul>
</div>


    <hr>

    <div class="container bs-docs-container">

      <div class="row">
        <div class="col-md-9"
             role="main"
             data-toggle="sidenav"
             data-container="#sidenav"
             data-hs="h1,h2"
             data-smart-id="true"
             data-bottom=".bs-docs-footer">
          <h1>Table options <a href="https://github.com/wenzhixin/bootstrap-table/blob/develop/docs/_i18n/en/documentation/table-options.md"></a></h1>

<p><hr></p>

<p>The table options are defined in <code>jQuery.fn.bootstrapTable.defaults</code>.</p>

<table class="table"
       id="t"
       data-search="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-mobile-responsive="true">
    <thead>
    <tr>
        <th>Name</th>
        <th>Attribute</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>-</td>
        <td>data-toggle</td>
        <td>String</td>
        <td>'table'</td>
        <td>Activate bootstrap table without writing JavaScript.</td>
    </tr>
    <tr>
        <td>classes</td>
        <td>data-classes</td>
        <td>String</td>
        <td>'table table-hover'</td>
        <td>The class name of table. By default, the table is bordered, you can add 'table-no-bordered' to remove table-bordered style.</td>
    </tr>
    <tr>
        <td>sortClass</td>
        <td>data-sort-class</td>
        <td>String</td>
        <td>undefined</td>
        <td>The class name of the td elements which are sorted.</td>
    </tr>
    <tr>
        <td>height</td>
        <td>data-height</td>
        <td>Number</td>
        <td>undefined</td>
        <td>The height of table.</td>
    </tr>
    <tr>
        <td>undefinedText</td>
        <td>data-undefined-text</td>
        <td>String</td>
        <td>'-'</td>
        <td>Defines the default undefined text.</td>
    </tr>
    <tr>
        <td>striped</td>
        <td>data-striped</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to stripe the rows.</td>
    </tr>
    <tr>
        <td>sortName</td>
        <td>data-sort-name</td>
        <td>String</td>
        <td>undefined</td>
        <td>Defines which column will be sorted.</td>
    </tr>
    <tr>
        <td>sortOrder</td>
        <td>data-sort-order</td>
        <td>String</td>
        <td>'asc'</td>
        <td>Defines the column sort order, can only be 'asc' or 'desc'.</td>
    </tr>
    <tr>
        <td>sortStable</td>
        <td>data-sort-stable</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to get a stable sorting. We will add <code>_position</code> property to the row.</td>
    </tr>
    <tr>
        <td>rememberOrder</td>
        <td>data-remember-order</td>
        <td>Boolean</td>
        <td>false</td>
        <td>Set <code>true</code> remember the order for each column.</td>
    </tr>
    <tr>
        <td>iconsPrefix</td>
        <td>data-icons-prefix</td>
        <td>String</td>
        <td>'glyphicon'</td>
        <td>Defines icon set name ('glyphicon' or 'fa' for FontAwesome). By default 'glyphicon' is used. </td>
    </tr>
    <tr>
        <td>iconSize</td>
        <td>data-icon-size</td>
        <td>String</td>
        <td>undefined</td>
        <td>Defines icon size: <ul><li>undefined => btn</li><li>xs => btn-xs</li><li>sm => btn-sm</li><li>lg => btn-lg</li></ul>
        </td>
    </tr>
    <tr>
        <td>buttonsClass</td>
        <td>data-buttons-class</td>
        <td>String</td>
        <td>'default'</td>
        <td>Defines the Bootstrap class (added after 'btn-') of table buttons: EX: 'primary', 'danger', 'warning'...</td>
    </tr>
    <tr>
        <td>icons</td>
        <td>data-icons</td>
        <td>Object</td>
        <td>{<br/>
        &nbsp;&nbsp;<i>paginationSwitchDown:</i> 'glyphicon-collapse-down icon-chevron-down',<br/>
        &nbsp;&nbsp;<i>paginationSwitchUp:</i> 'glyphicon-collapse-up icon-chevron-up',<br/>
        &nbsp;&nbsp;<i>refresh:</i> 'glyphicon-refresh icon-refresh',<br/>
        &nbsp;&nbsp;<i>toggle:</i> 'glyphicon-list-alt icon-list-alt',<br/>
        &nbsp;&nbsp;<i>columns:</i> 'glyphicon-th icon-th',<br/>
        &nbsp;&nbsp;<i>detailOpen:</i> 'glyphicon-plus icon-plus',<br/>
        &nbsp;&nbsp;<i>detailClose:</i> 'glyphicon-minus icon-minus'<br/>
        }
        </td>
        <td>Defines icons used in the toolbar, pagination, and details view.</td>
    </tr>
    <tr>
        <td>columns</td>
        <td>-</td>
        <td>Array</td>
        <td>[]</td>
        <td>The table columns config object, see column properties for more details.
        </td>
    </tr>
    <tr>
        <td>data</td>
        <td>-</td>
        <td>Array</td>
        <td>[]</td>
        <td>The data to be loaded.</td>
    </tr>
    <tr>
        <td>dataField</td>
        <td>data-data-field</td>
        <td>String</td>
        <td>'rows'</td>
        <td>Key in incoming json containing rows data list.</td>
    </tr>
    <tr>
        <td>totalField</td>
        <td>data-total-field</td>
        <td>String</td>
        <td>'total'</td>
        <td>Key in incoming json containing  "total" data .</td>
    </tr>
    <tr>
        <td>ajax</td>
        <td>data-ajax</td>
        <td>Function</td>
        <td>undefined</td>
        <td>A method to replace ajax call. Should implement the same API as jQuery ajax method.</td>
    </tr>
    <tr>
        <td>method</td>
        <td>data-method</td>
        <td>String</td>
        <td>'get'</td>
        <td>The method type to request remote data.</td>
    </tr>
    <tr>
        <td>url</td>
        <td>data-url</td>
        <td>String</td>
        <td>undefined</td>
        <td>
            A URL to request data from remote site.
            <br/>Note that the required server response format is different depending on whether the 'sidePagination'
            option is specified. See the following examples:
            <ul>
                <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data1.json">Without server-side pagination</a></li>
                <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json">With server-side pagination</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>cache</td>
        <td>data-cache</td>
        <td>Boolean</td>
        <td>true</td>
        <td>False to disable caching of AJAX requests.</td>
    </tr>
    <tr>
        <td>contentType</td>
        <td>data-content-type</td>
        <td>String</td>
        <td>'application/json'</td>
        <td>The contentType of request remote data.</td>
    </tr>
    <tr>
        <td>dataType</td>
        <td>data-data-type</td>
        <td>String</td>
        <td>'json'</td>
        <td>The type of data that you are expecting back from the server.</td>
    </tr>
    <tr>
        <td>ajaxOptions</td>
        <td>data-ajax-options</td>
        <td>Object</td>
        <td>{}</td>
        <td>Additional options for submit ajax request. List of values: <a href="http://api.jquery.com/jQuery.ajax">http://api.jquery.com/jQuery.ajax</a>.</td>
    </tr>
    <tr>
        <td>queryParams</td>
        <td>data-query-params</td>
        <td>Function</td>
        <td>function(params) {<br>return params;<br>}</td>
        <td>
        When requesting remote data, you can send additional parameters by modifying queryParams.
        If queryParamsType = 'limit', the params object contains: <br>
        limit, offset, search, sort, order
        Else, it contains: <br>
        pageSize, pageNumber, searchText, sortName, sortOrder. <br>
        Return false to stop request.
        </td>
    </tr>
    <tr>
        <td>queryParamsType</td>
        <td>data-query-params-type</td>
        <td>String</td>
        <td>'limit'</td>
        <td>Set 'limit' to send query params width RESTFul type.</td>
    </tr>
    <tr>
        <td>responseHandler</td>
        <td>data-response-handler</td>
        <td>Function</td>
        <td>function(res) {<br>return res;<br>}</td>
        <td>
        Before load remote data, handler the response data format, the parameters object contains: <br>
        res: the response data.
        </td>
    </tr>
    <tr>
        <td>pagination</td>
        <td>data-pagination</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show a pagination toolbar on table bottom.</td>
    </tr>
    <tr>
        <td>paginationLoop</td>
        <td>data-pagination-loop</td>
        <td>Boolean</td>
        <td>true</td>
        <td>True to enable pagination continuous loop mode.</td>
    </tr>
    <tr>
        <td>onlyInfoPagination</td>
        <td>data-only-info-pagination</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show only the quantity of the data that is showing in the table. It needs the pagination table options is set to true.</td>
    </tr>
    <tr>
        <td>sidePagination</td>
        <td>data-side-pagination</td>
        <td>String</td>
        <td>'client'</td>
        <td>
            Defines the side pagination of the table, can only be 'client' or 'server'.
            Using 'server' side requires either setting the 'url' or 'ajax' option.
            <br/>Note that the required server response format is different depending on whether the 'client' or 'server' option is specified. See the following examples:
            <ul>
                <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data1.json">Without server-side pagination</a></li>
                <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json">With server-side pagination</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>pageNumber</td>
        <td>data-page-number</td>
        <td>Number</td>
        <td>1</td>
        <td>When set pagination property, initialize the page number.</td>
    </tr>
    <tr>
        <td>pageSize</td>
        <td>data-page-size</td>
        <td>Number</td>
        <td>10</td>
        <td>When set pagination property, initialize the page size.</td>
    </tr>
    <tr>
        <td>pageList</td>
        <td>data-page-list</td>
        <td>Array</td>
        <td>[10, 25, 50, 100]</td>
        <td>When set pagination property, initialize the page size selecting list. If you include the 'All' or 'Unlimited' option, all the records will be shown in your table.</td>
    </tr>
    <tr>
        <td>selectItemName</td>
        <td>data-select-item-name</td>
        <td>String</td>
        <td>'btSelectItem'</td>
        <td>The name of radio or checkbox input.</td>
    </tr>
    <tr>
        <td>smartDisplay</td>
        <td>data-smart-display</td>
        <td>Boolean</td>
        <td>true</td>
        <td>True to display pagination or card view smartly.</td>
    </tr>
    <tr>
        <td>escape</td>
        <td>data-escape</td>
        <td>Boolean</td>
        <td>false</td>
        <td>Escapes a string for insertion into HTML,
        replacing <code>&</code>, <code><</code>, <code>></code>,
        <code>"</code>, <code>`</code>, and <code>'</code> characters.</td>
    </tr>
    <tr>
        <td>search</td>
        <td>data-search</td>
        <td>Boolean</td>
        <td>false</td>
        <td>Enable the search input.</td>
    </tr>
    <tr>
        <td>searchOnEnterKey</td>
        <td>data-search-on-enter-key</td>
        <td>Boolean</td>
        <td>false</td>
        <td>The search method will be executed until the Enter key is pressed.</td>
    </tr>
    <tr>
        <td>strictSearch</td>
        <td>data-strict-search</td>
        <td>Boolean</td>
        <td>false</td>
        <td>Enable the strict search.</td>
    </tr>
    <tr>
        <td>searchText</td>
        <td>data-search-text</td>
        <td>String</td>
        <td>''</td>
        <td>When set search property, initialize the search text.</td>
    </tr>
    <tr>
        <td>searchTimeOut</td>
        <td>data-search-time-out</td>
        <td>Number</td>
        <td>500</td>
        <td>Set timeout for search fire.</td>
    </tr>
    <tr>
        <td>trimOnSearch</td>
        <td>data-trim-on-search</td>
        <td>Boolean</td>
        <td>true</td>
        <td>True to trim spaces in search field.</td>
    </tr
    <tr>
        <td>showHeader</td>
        <td>data-show-header</td>
        <td>Boolean</td>
        <td>true</td>
        <td>False to hide the table header.</td>
    </tr>
    <tr>
        <td>showFooter</td>
        <td>data-show-footer</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show the summary footer row.</td>
    </tr>
    <tr>
        <td>showColumns</td>
        <td>data-show-columns</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show the columns drop down list.</td>
    </tr>
    <tr>
        <td>showRefresh</td>
        <td>data-show-refresh</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show the refresh button.</td>
    </tr>
    <tr>
        <td>showToggle</td>
        <td>data-show-toggle</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show the toggle button to toggle table / card view.
        </td>
    </tr>
    <tr>
        <td>showPaginationSwitch</td>
        <td>data-show-pagination-switch</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show the pagination switch button.</td>
    </tr>
    <tr>
        <td>showFullscreen</td>
        <td>data-show-fullscreen</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show the fullscreen button.</td>
    </tr>
    <tr>
        <td>minimumCountColumns</td>
        <td>data-minimum-count-columns</td>
        <td>Number</td>
        <td>1</td>
        <td>The minimum number of columns to hide from the columns drop down list.
        </td>
    </tr>
    <tr>
        <td>idField</td>
        <td>data-id-field</td>
        <td>String</td>
        <td>undefined</td>
        <td>Indicate which field is an identity field.</td>
    </tr>
    <tr>
        <td>uniqueId</td>
        <td>data-unique-id</td>
        <td>String</td>
        <td>undefined</td>
        <td>Indicate an unique identifier for each row.</td>
    </tr>
    <tr>
        <td>cardView</td>
        <td>data-card-view</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show card view table, for example mobile view.</td>
    </tr>
    <tr>
        <td>detailView</td>
        <td>data-detail-view</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show detail view table.</td>
    </tr>
    <tr>
        <td>detailFormatter</td>
        <td>data-detail-formatter</td>
        <td>Function</td>
        <td>function(index, row, element) {<br>return '';<br>}</td>
        <td>Format your detail view when <code>detailView</code> is set to <code>true</code>. Return a String and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.</td>
    </tr>
    <tr>
        <td>detailFilter</td>
        <td>data-detail-filter</td>
        <td>Function</td>
        <td>function(index, row) {<br>return true;<br>}</td>
        <td>Enable expansion per row when <code>detailView</code> is set to <code>true</code>. Return <code>true</code> and the row will be enabled for expansion, return <code>false</code> and expansion for the row will be disabled. Default function returns <code>true</code> to enable expansion for all rows.</td>
    </tr>
    <tr>
        <td>searchAlign</td>
        <td>data-search-align</td>
        <td>String</td>
        <td>'right'</td>
        <td>Indicate how to align the search input. 'left', 'right' can be used.</td>
    </tr>
    <tr>
        <td>buttonsAlign</td>
        <td>data-buttons-align</td>
        <td>String</td>
        <td>'right'</td>
        <td>Indicate how to align the toolbar buttons. 'left', 'right' can be used.</td>
    </tr>
    <tr>
        <td>toolbarAlign</td>
        <td>data-toolbar-align</td>
        <td>String</td>
        <td>'left'</td>
        <td>Indicate how to align the custom toolbar. 'left', 'right' can be used.</td>
    </tr>
    <tr>
        <td>paginationVAlign</td>
        <td>data-pagination-v-align</td>
        <td>String</td>
        <td>'bottom'</td>
        <td>Indicate how to align the pagination. 'top', 'bottom', 'both' (put the pagination on top and bottom)  can be used.</td>
    </tr>
    <tr>
        <td>paginationHAlign</td>
        <td>data-pagination-h-align</td>
        <td>String</td>
        <td>'right'</td>
        <td>Indicate how to align the pagination. 'left', 'right' can be used.</td>
    </tr>
    <tr>
        <td>paginationDetailHAlign</td>
        <td>data-pagination-detail-h-align</td>
        <td>String</td>
        <td>'left'</td>
        <td>Indicate how to align the pagination detail. 'left', 'right' can be used.</td>
    </tr>
    <tr>
        <td>paginationPreText</td>
        <td>data-pagination-pre-text</td>
        <td>String</td>
        <td>'&lsaquo;'</td>
        <td>Indicate the icon or text to be shown in the pagination detail, the previous button.</td>
    </tr>
    <tr>
        <td>paginationNextText</td>
        <td>data-pagination-next-text</td>
        <td>String</td>
        <td>'&rsaquo;'</td>
        <td>Indicate the icon or text to be shown in the pagination detail, the next button.</td>
    </tr>
    <tr>
        <td>clickToSelect</td>
        <td>data-click-to-select</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to select checkbox or radiobox when clicking rows.</td>
    </tr>
    <tr>
        <td>ignoreClickToSelectOn</td>
        <td>data-ignore-click-to-select-on</td>
        <td>Function</td>
        <td><code>{ return $.inArray(element.tagName, ['A', 'BUTTON']); }</code></td>
        <td>
        Takes one parameters:<br>
        element: the element clicked on.<br>
        Return true if the click should be ignored, false if the click should cause the row to be selected. This option is only relevant if clickToSelect is true.
        </td>
    </tr>
    <tr>
        <td>singleSelect</td>
        <td>data-single-select</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to allow checkbox selecting only one row.</td>
    </tr>
    <tr>
        <td>toolbar</td>
        <td>data-toolbar</td>
        <td>String | Node</td>
        <td>undefined</td>
        <td>
        A jQuery selector that indicates the toolbar, for example:<br>
        #toolbar, .toolbar, or a DOM node.
        </td>
    </tr>
    <tr>
        <td>buttonsToolbar</td>
        <td>data-buttons-toolbar</td>
        <td>String | Node</td>
        <td>undefined</td>
        <td>
        A jQuery selector that indicates the buttons toolbar, for example:<br>
        #buttons-toolbar, .buttons-toolbar, or a DOM node.
        </td>
    </tr>
    <tr>
        <td>checkboxHeader</td>
        <td>data-checkbox-header</td>
        <td>Boolean</td>
        <td>true</td>
        <td>False to hide check-all checkbox in header row.</td>
    </tr>
    <tr>
        <td>maintainSelected</td>
        <td>data-maintain-selected</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to maintain selected rows on change page and search.</td>
    </tr>
    <tr>
        <td>sortable</td>
        <td>data-sortable</td>
        <td>Boolean</td>
        <td>true</td>
        <td>False to disable sortable of all columns.</td>
    </tr>
    <tr>
        <td>silentSort</td>
        <td>data-silent-sort</td>
        <td>Boolean</td>
        <td>true</td>
        <td>Set <code>false</code> to sort the data silently. This options works when the sidePagination option is set to <code>server</code>.</td>
    </tr>
    <tr>
        <td>rowStyle</td>
        <td>data-row-style</td>
        <td>Function</td>
        <td>{}</td>
        <td>
        The row style formatter function, takes two parameters: <br>
        row: the row record data.<br>
        index: the row index.<br>
        Support classes or css. Example usage:<br>
<pre>
function rowStyle(row, index) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
</pre>
        </td>
    </tr>
    <tr>
        <td>rowAttributes</td>
        <td>data-row-attributes</td>
        <td>Function</td>
        <td>{}</td>
        <td>
        The row attribute formatter function, takes two parameters: <br>
        row: the row record data.<br>
        index: the row index.<br>
        Support all custom attributes.
        </td>
    </tr>
    <tr>
        <td>customSearch</td>
        <td>data-custom-search</td>
        <td>Function</td>
        <td>$.noop</td>
        <td>
        The custom search function is executed instead of built-in search function, takes one parameters: <br>
        text: the search text.<br>
        Example usage:<br>
        <pre>
        function customSearch(text) {
            //Search logic here.
            //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
        }
        </pre>
        </td>
    </tr>
    <tr>
        <td>customSort</td>
        <td>data-custom-sort</td>
        <td>Function</td>
        <td>$.noop</td>
        <td>
        The custom sort function is executed instead of built-in sort function, takes two parameters: <br>
        sortName: the sort name.<br>
        sortOrder: the sort order.<br>
        Example usage:<br>
        <pre>
        function customSort(sortName, sortOrder) {
            //Sort logic here.
            //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
        }
        </pre>
        </td>
    </tr>
     <tr>
        <td>locale</td>
        <td>data-locale</td>
        <td>String</td>
        <td>undefined</td>
        <td>
        Sets the locale to use (i.e. <code>'fr-CA'</code>). Locale files must be pre-loaded.
        Allows for fallback locales, if loaded, in the following order:<br>
        <ol>
        <li>First tries for the locale as specified,</li>
        <li>Then tries the locale with <code>'_'</code> translated to
        <code>'-'</code> and the region code upper cased,</li>
        <li>Then tries the the short locale code (i.e. <code>'fr'</code> instead of <code>'fr-CA'</code>),</li>
        <li>And finally will use the last locale file loaded (or the default locale if no locales loaded).</li>
        </ol>
        If left undfined or an empty string, uses the last locale loaded (or <code>'en-US'</code>
        if no locale files loaded).
        </td>
    </tr>
    <tr>
    <td>footerStyle</td>
    <td>data-footer-style</td>
    <td>Function</td>
    <td>{}</td>
    <td>
            The footer style formatter function, takes two parameters: <br>
            row: the row record data.<br>
            index: the row index.<br>
            Support classes or css. Example usage:<br>
        <pre>
        function footerStyle(value, row, index) {
          return {
            css: { "font-weight": "bold" }
          };
        }
        </pre>
    </td>
    </tr>
   </tbody>
</table>

<h1>Column options <a href="https://github.com/wenzhixin/bootstrap-table/blob/develop/docs/_i18n/en/documentation/column-options.md"></a></h1>

<p><hr></p>

<p>The column options is defined in <code>jQuery.fn.bootstrapTable.columnDefaults</code>.</p>

<table class="table"
       id="c"
       data-search="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-mobile-responsive="true">
    <thead>
    <tr>
        <th>Name</th>
        <th>Attribute</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>radio</td>
        <td>data-radio</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show a radio. The radio column has fixed width.</td>
    </tr>
    <tr>
        <td>checkbox</td>
        <td>data-checkbox</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to show a checkbox. The checkbox column has fixed width.</td>
    </tr>
    <tr>
        <td>field</td>
        <td>data-field</td>
        <td>String</td>
        <td>undefined</td>
        <td>The column field name.</td>
    </tr>
    <tr>
        <td>title</td>
        <td>data-title</td>
        <td>String</td>
        <td>undefined</td>
        <td>The column title text.</td>
    </tr>
    <tr>
        <td>titleTooltip</td>
        <td>data-title-tooltip</td>
        <td>String</td>
        <td>undefined</td>
        <td>The column title tooltip text. This option also support the title HTML attribute.</td>
    </tr>
    <tr>
        <td>class</td>
        <td>class / data-class</td>
        <td>String</td>
        <td>undefined</td>
        <td>The column class name.</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>rowspan / data-rowspan</td>
        <td>Number</td>
        <td>undefined</td>
        <td>Indicate how many rows a cell should take up.</td>
    </tr>
    <tr>
        <td>colspan</td>
        <td>colspan / data-colspan</td>
        <td>Number</td>
        <td>undefined</td>
        <td>Indicate how many columns a cell should take up.</td>
    </tr>
    <tr>
        <td>align</td>
        <td>data-align</td>
        <td>String</td>
        <td>undefined</td>
        <td>Indicate how to align the column data. 'left', 'right', 'center' can be used.</td>
    </tr>
    <tr>
        <td>halign</td>
        <td>data-halign</td>
        <td>String</td>
        <td>undefined</td>
        <td>Indicate how to align the table header. 'left', 'right', 'center' can be used.</td>
    </tr>
    <tr>
        <td>falign</td>
        <td>data-falign</td>
        <td>String</td>
        <td>undefined</td>
        <td>Indicate how to align the table footer. 'left', 'right', 'center' can be used.</td>
    </tr>
    <tr>
        <td>valign</td>
        <td>data-valign</td>
        <td>String</td>
        <td>undefined</td>
        <td>Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.</td>
    </tr>
    <tr>
        <td>width</td>
        <td>data-width</td>
        <td>Number {Pixels or Percentage}</td>
        <td>undefined</td>
        <td>The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this 'width' might be ignored (use min/max-width via class or such then). Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, leave as number (or add 'px') to make it use pixels.</td>
    </tr>
    <tr>
        <td>sortable</td>
        <td>data-sortable</td>
        <td>Boolean</td>
        <td>false</td>
        <td>True to allow the column can be sorted.
        </td>
    </tr>
    <tr>
        <td>order</td>
        <td>data-order</td>
        <td>String</td>
        <td>'asc'</td>
        <td>The default sort order, can only be 'asc' or 'desc'.</td>
    </tr>
    <tr>
        <td>visible</td>
        <td>data-visible</td>
        <td>Boolean</td>
        <td>true</td>
        <td>False to hide the columns item.</td>
    </tr>
    <tr>
        <td>cardVisible</td>
        <td>data-card-visible</td>
        <td>Boolean</td>
        <td>true</td>
        <td>False to hide the columns item in card view state.</td>
    </tr>
    <tr>
        <td>switchable</td>
        <td>data-switchable</td>
        <td>Boolean</td>
        <td>true</td>
        <td>False to disable the switchable of columns item.</td>
    </tr>
    <tr>
        <td>clickToSelect</td>
        <td>data-click-to-select</td>
        <td>Boolean</td>
        <td>true</td>
        <td>True to select checkbox or radio when the column is clicked.</td>
    </tr>
    <tr>
        <td>formatter</td>
        <td>data-formatter</td>
        <td>Function</td>
        <td>undefined</td>
        <td>
        The context (this) is the column Object. <br>
        The cell formatter function, take three parameters: <br>
        value: the field value. <br>
        row: the row record data.<br>
        index: the row index.<br>
        field: the row field.<br>
        Example usage:<br>
<pre>
function formatter(value, row, index, field) {
  if (value === 'foo') {
    return '<strong>' + value + '</strong>';
  }
  return value;
}
</pre>
        </td>
    </tr>
    <tr>
        <td>footerFormatter</td>
        <td>data-footer-formatter</td>
        <td>Function</td>
        <td>undefined</td>
        <td>
        The context (this) is the column Object. <br>
        The function, take one parameter: <br>
        data: Array of all the  data rows. <br>
        the function should return a string with the text to show in the footer cell.
    </tr>
    <tr>
        <td>events</td>
        <td>data-events</td>
        <td>Object</td>
        <td>undefined</td>
        <td>
        The cell events listener when you use formatter function, take four parameters: <br>
        event: the jQuery event. <br>
        value: the field value. <br>
        row: the row record data.<br>
        index: the row index. <br>
        Example code:
        <code>&lt;th .. data-events="operateEvent"&gt;</code>
        <code>var operateEvents = {'click .like': function (e, value, row, index) {}};</code>
        </td>
    </tr>
    <tr>
        <td>sorter</td>
        <td>data-sorter</td>
        <td>Function</td>
        <td>undefined</td>
        <td>
        The custom field sort function that used to do local sorting, take two parameters: <br>
        a: the first field value.<br>
        b: the second field value.<br>
        rowA: the first row.<br>
        rowB: the second row.
        </td>
    </tr>
    <tr>
        <td>sortName</td>
        <td>data-sort-name</td>
        <td>String</td>
        <td>undefined</td>
        <td>Provide a customizable sort-name, not the default sort-name in the header, or the field name
        of the column. For example, a column might display the value of fieldName of "html" such as  
        "&lt;b&gt;&lt;span style="color:red"&gt;abc&lt;/span&gt;&lt;/b&gt;", but a fieldName to sort is "content" with the value of "abc".
        </td>
    </tr>    
    <tr>
        <td>cellStyle</td>
        <td>data-cell-style</td>
        <td>Function</td>
        <td>undefined</td>
        <td>
        The cell style formatter function, take three parameters: <br>
        value: the field value.<br>
        row: the row record data.<br>
        index: the row index.<br>
        field: the row field.<br>
        Support classes or css. Example usage:<br>
<pre>
function cellStyle(value, row, index, field) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
</pre>
        </td>
    </tr>
    <tr>
        <td>searchable</td>
        <td>data-searchable</td>
        <td>Boolean</td>
        <td>true</td>
        <td>
        True to search data for this column.
        </td>
    </tr>
    <tr>
        <td>searchFormatter</td>
        <td>data-search-formatter</td>
        <td>Boolean</td>
        <td>true</td>
        <td>
        True to search use formatted data.
        </td>
    </tr>
    <tr>
        <td>escape</td>
        <td>data-escape</td>
        <td>Boolean</td>
        <td>false</td>
        <td>
        Escapes a string for insertion into HTML, replacing &, <, >, ", \`, and ' characters.
        </td>
    </tr>
    <tr>
        <td>showSelectTitle</td>
        <td>data-show-select-title</td>
        <td>Boolean</td>
        <td>false</td>
        <td>
        True to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
        </td>
    </tr>
</tbody>
</table>

<h1>Events <a href="https://github.com/wenzhixin/bootstrap-table/blob/develop/docs/_i18n/en/documentation/events.md"></a></h1>

<p><hr></p>

<p>To use event syntax:</p>

<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#table'</span><span class="p">).</span><span class="nx">bootstrapTable</span><span class="p">({</span>
    <span class="na">onEventName</span><span class="p">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">,</span> <span class="p">...)</span> <span class="p">{</span>
        <span class="c1">// ...</span>
    <span class="p">}</span>
<span class="p">});</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">'#table'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'event-name.bs.table'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">,</span> <span class="p">...)</span> <span class="p">{</span>
    <span class="c1">// ...</span>
<span class="p">});</span>
</code></pre></div>

<table class="table"
       id="e"
       data-search="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-mobile-responsive="true">
    <thead>
    <tr>
        <th>Option Event</th>
        <th>jQuery Event</th>
        <th>Parameter</th>
        <th>Description</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>onAll</td>
        <td>all.bs.table</td>
        <td>name, args</td>
        <td>
        Fires when all events trigger, the parameters contain: <br>
        name: the event name, <br>
        args: the event data.
        </td>
    </tr>
    <tr>
        <td>onClickRow</td>
        <td>click-row.bs.table</td>
        <td>row, $element, field</td>
        <td>
        Fires when user click a row, the parameters contain: <br>
        row: the record corresponding to the clicked row, <br>
        $element: the tr element, <br>
        field: the field name corresponding to the clicked cell.
        </td>
    </tr>
    <tr>
        <td>onDblClickRow</td>
        <td>dbl-click-row.bs.table</td>
        <td>row, $element, field</td>
        <td>
        Fires when user double click a row, the parameters contain: <br>
        row: the record corresponding to the clicked row, <br>
        $element: the tr element, <br>
        field: the field name corresponding to the clicked cell.
        </td>
    </tr>
    <tr>
        <td>onClickCell</td>
        <td>click-cell.bs.table</td>
        <td>field, value, row, $element</td>
        <td>
        Fires when user click a cell, the parameters contain: <br>
        field: the field name corresponding to the clicked cell, <br>
        value: the data value corresponding to the clicked cell, <br>
        row: the record corresponding to the clicked row, <br>
        $element: the td element.
        </td>
    </tr>
    <tr>
        <td>onDblClickCell</td>
        <td>dbl-click-cell.bs.table</td>
        <td>field, value, row, $element</td>
        <td>
        Fires when user double click a cell, the parameters contain: <br>
        field: the field name corresponding to the clicked cell, <br>
        value: the data value corresponding to the clicked cell, <br>
        row: the record corresponding to the clicked row, <br>
        $element: the td element.
        </td>
    </tr>
    <tr>
        <td>onSort</td>
        <td>sort.bs.table</td>
        <td>name, order</td>
        <td>
        Fires when user sort a column, the parameters contain: <br>
        name: the sort column field name<br>
        order: the sort column order.
        </td>
    </tr>
    <tr>
        <td>onCheck</td>
        <td>check.bs.table</td>
        <td>row, $element</td>
        <td>
        Fires when user check a row, the parameters contain: <br>
        row: the record corresponding to the clicked row.
        $element: the DOM element checked.
        </td>
    </tr>
    <tr>
        <td>onUncheck</td>
        <td>uncheck.bs.table</td>
        <td>row, $element</td>
        <td>
        Fires when user uncheck a row, the parameters contain: <br>
        row: the record corresponding to the clicked row.
        $element: the DOM element unchecked.
        </td>
    </tr>
    <tr>
        <td>onCheckAll</td>
        <td>check-all.bs.table</td>
        <td>rows</td>
        <td>
        Fires when user check all rows, the parameters contain: <br>
        rows: array of records corresponding to newly checked rows.
        </td>
    </tr>
    <tr>
        <td>onUncheckAll</td>
        <td>uncheck-all.bs.table</td>
        <td>rows</td>
        <td>
        Fires when user uncheck all rows, the parameters contain: <br>
        rows: array of records corresponding to previously checked rows.
        </td>
    </tr>
    <tr>
        <td>onCheckSome</td>
        <td>check-some.bs.table</td>
        <td>rows</td>
        <td>
        Fires when user check some rows, the parameters contain: <br>
        rows: array of records corresponding to newly checked rows.
        </td>
    </tr>
    <tr>
        <td>onUncheckSome</td>
        <td>uncheck-some.bs.table</td>
        <td>rows</td>
        <td>
        Fires when user uncheck some rows, the parameters contain: <br>
        rows: array of records corresponding to previously checked rows.
        </td>
    </tr>
    <tr>
        <td>onLoadSuccess</td>
        <td>load-success.bs.table</td>
        <td>data</td>
        <td>Fires when remote data is loaded
            successfully.
        </td>
    </tr>
    <tr>
        <td>onLoadError</td>
        <td>load-error.bs.table</td>
        <td>status, res</td>
        <td>Fires when some errors occur to load remote data.</td>
    </tr>
    <tr>
        <td>onColumnSwitch</td>
        <td>column-switch.bs.table</td>
        <td>field, checked</td>
        <td>Fires when switch the column visible.</td>
    </tr>
    <tr>
        <td>onColumnSearch</td>
        <td>column-search.bs.table</td>
        <td>field, text</td>
        <td>Fires when search by column.</td>
    </tr>
    <tr>
        <td>onPageChange</td>
        <td>page-change.bs.table</td>
        <td>number, size</td>
        <td>Fires when change the page number or page size.</td>
    </tr>
    <tr>
        <td>onSearch</td>
        <td>search.bs.table</td>
        <td>text</td>
        <td>Fires when search the table.</td>
    </tr>
    <tr>
        <td>onToggle</td>
        <td>toggle.bs.table</td>
        <td>cardView</td>
        <td>Fires when toggle the view of table.</td>
    </tr>
    <tr>
        <td>onPreBody</td>
        <td>pre-body.bs.table</td>
        <td>data</td>
        <td>Fires before the table body is rendered</td>
    </tr>
    <tr>
        <td>onPostBody</td>
        <td>post-body.bs.table</td>
        <td>data</td>
        <td>Fires after the table body is rendered and available in the DOM</td>
    </tr>
    <tr>
       <td>onPostHeader</td>
       <td>post-header.bs.table</td>
       <td>none</td>
       <td>Fires after the table header is rendered and availble in the DOM</td>
    </tr>
    <tr>
        <td>onExpandRow</td>
        <td>expand-row.bs.table</td>
        <td>index, row, $detail</td>
        <td>Fires when click the detail icon to expand the detail view.</td>
    </tr>
    <tr>
       <td>onCollapseRow</td>
       <td>collapse-row.bs.table</td>
       <td>index, row</td>
       <td>Fires when click the detail icon to collapse the detail view.</td>
    </tr>
    <tr>
       <td>onRefreshOptions</td>
       <td>refresh-options.bs.table</td>
       <td>options</td>
       <td>Fires after refresh the options and before destroy and init the table</td>
    </tr>
    <tr>
        <td>onResetView</td>
        <td>reset-view.bs.table</td>
        <td></td>
        <td>Fires when reset view of the table.</td>
    </tr>
    <tr>
       <td>onRefresh</td>
       <td>refresh.bs.table</td>
       <td>params</td>
       <td>Fires after the click the refresh button.</td>
    </tr>
    <tr>
       <td>onScrollBody</td>
       <td>scroll-body.bs.table</td>
       <td></td>
       <td>Fires when table body scroll.</td>
    </tr>
    </tbody>
</table>

<h1>Methods <a href="https://github.com/wenzhixin/bootstrap-table/blob/develop/docs/_i18n/en/documentation/methods.md"></a></h1>

<p><hr></p>

<p>The calling method syntax: <code>$(&#39;#table&#39;).bootstrapTable(&#39;method&#39;, parameter);</code>.</p>

<table class="table"
       id="m"
       data-search="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-mobile-responsive="true">
    <thead>
    <tr>
        <th>Name</th>
        <th>Parameter</th>
        <th>Description</th>
        <th data-formatter="methodFormatter"
            data-align="center"
            data-valign="middle">Example</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>getOptions</td>
        <td>none</td>
        <td>Return the options object.</td>
        <td>getOptions</td>
    </tr>
    <tr>
        <td>getSelections</td>
        <td>none</td>
        <td>Return selected rows, when no record selected, an empty array will return.</td>
        <td>getSelections</td>
    </tr>
    <tr>
        <td>getAllSelections</td>
        <td>none</td>
        <td>Return all selected rows contain search or filter, when no record selected, an empty array will return.</td>
        <td>getAllSelections</td>
    </tr>
    <tr>
        <td>showAllColumns</td>
        <td>none</td>
        <td>Show All the columns.</td>
        <td>showAllColumns</td>
    </tr>
    <tr>
        <td>hideAllColumns</td>
        <td>none</td>
        <td>Hide All the columns.</td>
        <td>hidAllColumns</td>
    </tr>
    <tr>
        <td>getData</td>
        <td>useCurrentPage</td>
        <td>Get the loaded data of table at the moment that this method is called. If you set the useCurrentPage to true the method will return the data in the current page.</td>
        <td>getData</td>
    </tr>
    <tr>
        <td>getRowByUniqueId</td>
        <td>id</td>
        <td>Get data from table, the row that contains the id passed by parameter.</td>
        <td>getRowByUniqueId</td>
    </tr>
    <tr>
        <td>load</td>
        <td>data</td>
        <td>Load the data to table, the old rows will be removed.</td>
        <td>load</td>
    </tr>
    <tr>
        <td>append</td>
        <td>data</td>
        <td>Append the data to table.</td>
        <td>append</td>
    </tr>
    <tr>
        <td>prepend</td>
        <td>data</td>
        <td>Prepend the data to table.</td>
        <td>prepend</td>
    </tr>
    <tr>
        <td>remove</td>
        <td>params</td>
        <td>
        Remove data from table, the params contains two properties: <br>
        field: the field name of remove rows. <br>
        values: the array of values for rows which should be removed.
        </td>
        <td>remove</td>
    </tr>
    <tr>
        <td>removeAll</td>
        <td>-</td>
        <td>
        Remove all data from table.
        </td>
        <td>removeAll</td>
    </tr>
    <tr>
        <td>removeByUniqueId</td>
        <td>id</td>
        <td>
        Remove data from table, the row that contains the id passed by parameter.
        </td>
        <td>removeByUniqueId</td>
    </tr>
    <tr>
        <td>insertRow</td>
        <td>params</td>
        <td>
        Insert a new row, the param contains following properties:<br>
        index: the row index to insert into.<br>
        row: the row data.
        </td>
    </tr>
    <tr>
        <td>updateRow</td>
        <td>params</td>
        <td>
        Update the specified row(s), each param contains following properties: <br>
        index: the row index to be updated. <br>
        row: the new row data.
        </td>
    </tr>
    <tr>
        <td>updateByUniqueId</td>
        <td>params</td>
        <td>
        Update the specified row(s), each param contains following properties: <br>
        id: a row id where the id should be the uniqueid field assigned to the table. <br>
        row: the new row data.
        </td>
    </tr>
    <tr>
        <td>showRow</td>
        <td>params</td>
        <td>Show the specified row. The param must contain at least one of the following properties:
        index: the row index.
        uniqueId: the value of the uniqueId for that row.</td>
    </tr>
    <tr>
        <td>hideRow</td>
        <td>params</td>
        <td>Hide the specified row. The param must contain at least one of the following properties:
        index: the row index.
        uniqueId: the value of the uniqueId for that row.</td>
    </tr>
    <tr>
        <td>getHiddenRows</td>
        <td>boolean</td>
        <td>Get all rows hidden and if you pass the show parameter true the rows will be shown again, otherwise, the method
        only will return the rows hidden.</td>
    </tr>
    <tr>
        <td>mergeCells</td>
        <td>options</td>
        <td>
        Merge some cells to one cell, the options contains following properties: <br>
        index: the row index. <br>
        field: the field name.<br>
        rowspan: the rowspan count to be merged. <br>
        colspan: the colspan count to be merged.
        </td>
    </tr>
    <tr>
        <td>updateCell</td>
        <td>params</td>
        <td>
        Update one cell, the params contains following properties: <br>
        index: the row index. <br>
        field: the field name.<br>
        value: the new field value.
        <br>
        To disable table re-initialization you can set <code>{reinit: false}</code>
        </td>
    </tr>
    <tr>
        <td>refresh</td>
        <td>params</td>
        <td>Refresh the remote server data, you can set <code>{silent: true}</code> to refresh the data silently, and set <code>{url: newUrl, pageNumber: pageNumber, pageSize: pageSize}</code> to change the url (optional), page number (optional) and page size (optional). To supply query params specific to this request, set <code>{query: {foo: 'bar'}}</code>.</td>
    </tr>
    <tr>
        <td>refreshOptions</td>
        <td>options</td>
        <td>Refresh the options</td>
    </tr>
    <tr>
        <td>resetSearch</td>
        <td>text</td>
        <td>Set the search text</td>
    </tr>
    <tr>
        <td>showLoading</td>
        <td>none</td>
        <td>Show loading status.</td>
    </tr>
    <tr>
        <td>hideLoading</td>
        <td>none</td>
        <td>Hide loading status.</td>
    </tr>
    <tr>
        <td>checkAll</td>
        <td>none</td>
        <td>Check all current page rows.</td>
    </tr>
    <tr>
        <td>uncheckAll</td>
        <td>none</td>
        <td>Uncheck all current page rows.</td>
    </tr>
    <tr>
        <td>checkInvert</td>
        <td>none</td>
        <td>Invert check of current page rows. Triggers onCheckSome and onUncheckSome events.</td>
    </tr>
    <tr>
        <td>check</td>
        <td>index</td>
        <td>Check a row, the row index start with 0.</td>
    </tr>
    <tr>
        <td>uncheck</td>
        <td>index</td>
        <td>Uncheck a row, the row index start with 0.</td>
    </tr>
    <tr>
        <td>checkBy</td>
        <td>params</td>
        <td>
        Check a row by array of values, the params contains:<br>
        field: name of the field used to find records<br>
        values: array of values for rows to check<br>
        Example: <br>
        $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
        </td>
    </tr>
    <tr>
        <td>uncheckBy</td>
        <td>params</td>
        <td>
        Uncheck a row by array of values, the params contains:<br>
        field: name of the field used to find records<br>
        values: array of values for rows to uncheck<br>
        Example: <br>
        $("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
        </td>
    </tr>
    <tr>
        <td>resetView</td>
        <td>params</td>
        <td>Reset the bootstrap table view, for example reset the table height.</td>
    </tr>
    <tr>
        <td>resetWidth</td>
        <td>none</td>
        <td>Resizes header and footer to fit current columns width</td>
    </tr>
    <tr>
        <td>destroy</td>
        <td>none</td>
        <td>Destroy the bootstrap table.</td>
    </tr>
    <tr>
        <td>showColumn</td>
        <td>field</td>
        <td>Show the specified column.</td>
    </tr>
    <tr>
        <td>hideColumn</td>
        <td>field</td>
        <td>Hide the specified column.</td>
    </tr>
    <tr>
        <td>getHiddenColumns</td>
        <td>-</td>
        <td>Get hidden columns.</td>
    </tr>
    <tr>
        <td>getVisibleColumns</td>
        <td>-</td>
        <td>Get visible columns.</td>
    </tr>
    <tr>
        <td>scrollTo</td>
        <td>value</td>
        <td>Scroll to the number value position, the unit is 'px', set 'bottom' means scroll to the bottom.</td>
    </tr>
    <tr>
        <td>getScrollPosition</td>
        <td>none</td>
        <td>Get the current scroll position, the unit is 'px'.</td>
    </tr>
    <tr>
        <td>filterBy</td>
        <td>params</td>
        <td>(Can use only in client-side) Filter data in table, e.g. you can filter <code>{age: 10}</code> to show the data only age is equal to 10.  You can also filter with an array of values, as in: <code>{age: 10, hairColor: ["blue", "red", "green"]} to find data where age is equal to 10 and hairColor is either blue, red, or green.</td>
    </tr>
    <tr>
        <td>selectPage</td>
        <td>page</td>
        <td>Go to the a specified page.</td>
    </tr>
    <tr>
        <td>prevPage</td>
        <td>none</td>
        <td>Go to previous page.</td>
    </tr>
    <tr>
        <td>nextPage</td>
        <td>none</td>
        <td>Go to next page.</td>
    </tr>
    <tr>
        <td>togglePagination</td>
        <td>none</td>
        <td>Toggle the pagination option.</td>
    </tr>
    <tr>
        <td>toggleView</td>
        <td>none</td>
        <td>Toggle the card/table view.</td>
    </tr>
    <tr>
        <td>expandRow</td>
        <td>index</td>
        <td>Expand the row that has the index passed by parameter if the detail view option is set to True.</td>
    </tr>
    <tr>
        <td>collapseRow</td>
        <td>index</td>
        <td>Collapse the row that has the index passed by parameter if the detail view option is set to True.</td>
    </tr>
    <tr>
        <td>expandAllRows</td>
        <td>is subtable</td>
        <td>Expand all rows if the detail view option is set to True.</td>
    </tr>
    <tr>
        <td>collapseAllRows</td>
        <td>is subtable</td>
        <td>Collapse all rows if the detail view option is set to True.</td>
    </tr>
    <tr>
        <td>updateCellById</td>
        <td>params</td>
        <td>
        update the cell specified by the id, each param contains following properties: <br>
        id: row id where the id should be the uniqueid field assigned to the table. <br>
        field: field name of the cell to be updated.<br>
        value: new value of the cell.
        </td>
    </tr>
    </tbody>
</table>

<h1>Localizations <a href="https://github.com/wenzhixin/bootstrap-table/blob/develop/docs/_i18n/en/documentation/localizations.md"></a></h1>

<p><hr></p>

<table class="table"
       id="l"
       data-search="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-mobile-responsive="true">
    <thead>
    <tr>
        <th>Name</th>
        <th>Parameter</th>
        <th>Default</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>formatLoadingMessage</td>
        <td>-</td>
        <td>'Loading, please wait…'</td>
    </tr>
    <tr>
        <td>formatRecordsPerPage</td>
        <td>pageNumber</td>
        <td>'%s records per page'</td>
    </tr>
    <tr>
        <td>formatShowingRows</td>
        <td>pageFrom, pageTo, totalRows</td>
        <td>'Showing %s to %s of %s rows'</td>
    </tr>
    <tr>
        <td>formatDetailPagination</td>
        <td>totalRows</td>
        <td>'Showing %s rows'</td>
    </tr>
    <tr>
        <td>formatSearch</td>
        <td>-</td>
        <td>'Search'</td>
    </tr>
    <tr>
        <td>formatNoMatches</td>
        <td>-</td>
        <td>'No matching records found'</td>
    </tr>
    <tr>
        <td>formatRefresh</td>
        <td>-</td>
        <td>'Refresh'</td>
    </tr>
    <tr>
        <td>formatToggle</td>
        <td>-</td>
        <td>'Toggle'</td>
    </tr>
    <tr>
        <td>formatColumns</td>
        <td>-</td>
        <td>'Columns'</td>
    </tr>
    <tr>
        <td>formatAllRows</td>
        <td>-</td>
        <td>'All'</td>
    </tr>
    <tr>
        <td>formatFullscreen</td>
        <td>-</td>
        <td>'Fullscreen'</td>
    </tr>
    </tbody>
</table>

<p><hr></p>

<p><strong>PS:</strong></p>

<p>We can import <a href="https://github.com/wenzhixin/bootstrap-table/tree/master/src/locale">all locale files</a> what you need:</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"bootstrap-table-en-US.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"bootstrap-table-zh-CN.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
...
</code></pre></div>

<p>And then use JavaScript to switch locale:</p>

<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapTable</span><span class="p">.</span><span class="nx">defaults</span><span class="p">,</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapTable</span><span class="p">.</span><span class="nx">locales</span><span class="p">[</span><span class="s1">'en-US'</span><span class="p">]);</span>
<span class="c1">// $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);</span>
<span class="c1">// ...</span>
</code></pre></div>

<p>Or use data attributes to set locale for table:</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;table</span> <span class="na">data-toggle=</span><span class="s">"table"</span> <span class="na">data-locale=</span><span class="s">"en-US"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</code></pre></div>

<p>Or use JavaScript to set locale for table:</p>

<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'table'</span><span class="p">).</span><span class="nx">bootstrapTable</span><span class="p">({</span><span class="na">locale</span><span class="p">:</span><span class="s1">'en-US'</span><span class="p">});</span>
</code></pre></div>

        </div>
        
        <div class="col-md-3">
          <div id="sidenav"></div>
        </div>
        
      </div>
    </div>

    <!-- Footer
================================================== -->
<footer class="bs-docs-footer" role="contentinfo">
  <div class="container">
    <div class="bs-docs-social">
    If you like bootstrap table: 
    <ul class="bs-docs-social-buttons">
        <li>
            <iframe class="github-btn"
                    src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=watch&count=true"
                    width="100" height="20" title="Star on GitHub"></iframe>
        </li>
        <li>
            <iframe class="github-btn"
                    src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=fork&count=true"
                    width="102" height="20" title="Fork on GitHub"></iframe>
        </li>
        <li>
            <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=wenzhixin&type=follow&count=true"
                    width="175" height="20" title="Follow on GitHub"></iframe>
        </li>
        <!--<li>-->
            <!-- https://about.twitter.com/resources/buttons#tweet -->
            <!--<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://wenzhixin.net.cn/p/bootstrap-table" data-via="BootstrapTable" data-related="BootstrapTable">Tweet</a>-->
        <!--</li>-->
        <!--<li>-->
             <!--将此标记放置在你希望显示+1 按钮的位置。 -->
            <!--<div class="g-plusone" data-annotation="inline" data-width="120"></div>-->
        <!--</li>-->
        <!--<li>-->
            <!--<div>QQ group:  103558783</div>-->
        <!--</li>-->
    </ul>
    Questions/Helps: 
    <ul class="bs-docs-social-buttons">
        <li>
            <a class="help-btn" href="http://stackoverflow.com/questions/tagged/bootstrap-table">StackOverflow</a>
        </li>
        <li>
            <a class="help-btn" href="http://segmentfault.com/t/bootstrap-table">SegmentFault</a>
        </li>
    </ul>
</div>


    <p>Designed and built with all the love in the world by <a href="https://github.com/wenzhixin" target="_blank">@wenzhixin</a>.</p>
    <p>Maintained by <a href="https://github.com/wenzhixin" target="_blank">@wenzhixin</a> with the help of <a href="https://github.com/wenzhixin/bootstrap-table/graphs/contributors" target="_blank">our contributors</a>.</p>
    <p>Code licensed under <a href="https://github.com/wenzhixin/bootstrap-table/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
    <ul class="bs-docs-footer-links muted">
      <li>Currently v1.13.0</li>
      <li>&middot;</li>
      <li><a href="https://github.com/wenzhixin/bootstrap-table">GitHub</a></li>
      <li>&middot;</li>
      <li><a href="http://wenzhixin.net.cn">My website</a></li>
      <li>&middot;</li>
      <li><a href="http://repos.wenzhixin.net.cn">My repos</a></li>
      <li>&middot;</li>
      <li><a href="http://stackoverflow.com/questions/tagged/bootstrap-table">Questions / Helps</a></li>
      <li>&middot;</li>
      <li><a href="https://github.com/wenzhixin/bootstrap-table/issues">Issues</a></li>
      <li>&middot;</li>
      <li><a href="https://github.com/wenzhixin/bootstrap-table/releases">Releases</a></li>
      <li>&middot;</li>
      <li><a href="mailto:wenzhixin2010@gmail.com">Email</a></li>
    </ul>
  </div>
</footer>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>

<script src="../assets/js/sidenav.js?v=1.13.0"></script>
<script src="../assets/js/common.js?v=1.13.0"></script>

  </body>
</html>