githab
/
bootstrap-table


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="The table options API of Bootstrap Table.">
<meta name="author" content="Zhixin Wen, and Bootstrap Table contributors">
<meta name="generator" content="Jekyll v3.8.7">
<meta name="keywords" content="bootstrap,table,pagination,checkbox,radio,datatables,css,css-framework,semantic,semantic-ui,bulma,material,material-design,materialize,foundation">

<meta name="docsearch:language" content="en">

<title>Table Options · Bootstrap Table</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><!-- Documentation extras -->

<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">


<link href="/assets/css/docs.min.css" rel="stylesheet">
<link href="/assets/css/style.css?m=7" rel="stylesheet">

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


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

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


    <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
  <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
    <img src="/favicon.png" width="36" height="36">
  </a>

  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item">
        <a class="nav-link "
          href="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active"
          href="/docs/getting-started/introduction/">
          Documentation
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/themes">
          Themes
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link "
          href="https://examples.bootstrap-table.com">
          Examples
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
          href="https://live.bootstrap-table.com"
          target="_blank">
          Online Editor
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/news">
          News
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
          href="https://blog.bootstrap-table.com"
          target="_blank">
          Blog
        </a>
      </li>
    </ul>
  </div>

  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown">
      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        v1.16.0
      </a>
      <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
        <a class="dropdown-item active" href="/">Latest (1.16.0)</a>
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.15.5/" target="_blank">v1.15.5</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://github.com/wenzhixin/bootstrap-table" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false" role="img"><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://twitter.com/wenzhixin2010" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false" role="img"><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://opencollective.com/bootstrap-table" target="_blank" rel="noopener" aria-label="Open Collective"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 40 41" focusable="false" role="img" fill="currentColor" fill-rule="evenodd"><title>Open Collective</title><path d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" fill-opacity=".4"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
</a>
    </li>
  </ul>

  <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
    href="/docs/getting-started/download/">Download</a>
</header>


    <div class="container-fluid">
      <div class="row flex-xl-nowrap">
        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
          <form class="bd-search d-flex align-items-center">
  <input type="search" class="form-control"
    id="search-input" placeholder="Search..."
    aria-label="Search for..." autocomplete="off">
  <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3"
    type="button" data-toggle="collapse" data-target="#bd-docs-nav"
    aria-controls="bd-docs-nav" aria-expanded="false"
    aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>

<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/getting-started/introduction/">
      Getting started
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/getting-started/introduction/">
            Introduction
          </a>
        </li><li>
          <a href="/docs/getting-started/download/">
            Download
          </a>
        </li><li>
          <a href="/docs/getting-started/contents/">
            Contents
          </a>
        </li><li>
          <a href="/docs/getting-started/usage/">
            Usage
          </a>
        </li><li>
          <a href="/docs/getting-started/browsers-devices/">
            Browsers & devices
          </a>
        </li><li>
          <a href="/docs/getting-started/build-tools/">
            Build tools
          </a>
        </li></ul>
  </div><div class="bd-toc-item active">
    <a class="bd-toc-link" href="/docs/api/table-options/">
      API
    </a>

    <ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
          <a href="/docs/api/table-options/">
            Table Options
          </a>
        </li><li>
          <a href="/docs/api/column-options/">
            Column Options
          </a>
        </li><li>
          <a href="/docs/api/events/">
            Events
          </a>
        </li><li>
          <a href="/docs/api/methods/">
            Methods
          </a>
        </li><li>
          <a href="/docs/api/localizations/">
            Localizations
          </a>
        </li></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/extensions/accent-neutralise/">
      Extensions
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/extensions/accent-neutralise/">
            Accent Neutralise
          </a>
        </li><li>
          <a href="/docs/extensions/addrbar/">
            Addrbar
          </a>
        </li><li>
          <a href="/docs/extensions/auto-refresh/">
            Auto Refresh
          </a>
        </li><li>
          <a href="/docs/extensions/cookie/">
            Cookie
          </a>
        </li><li>
          <a href="/docs/extensions/copy-rows/">
            Copy Rows
          </a>
        </li><li>
          <a href="/docs/extensions/defer-url/">
            Defer URL
          </a>
        </li><li>
          <a href="/docs/extensions/editable/">
            Editable
          </a>
        </li><li>
          <a href="/docs/extensions/export/">
            Export
          </a>
        </li><li>
          <a href="/docs/extensions/filter-control/">
            Filter Control
          </a>
        </li><li>
          <a href="/docs/extensions/fixed-columns/">
            Fixed Columns
          </a>
        </li><li>
          <a href="/docs/extensions/group-by-v2/">
            Group By v2
          </a>
        </li><li>
          <a href="/docs/extensions/i18n-enhance/">
            i18n Enhance
          </a>
        </li><li>
          <a href="/docs/extensions/key-events/">
            Key Events
          </a>
        </li><li>
          <a href="/docs/extensions/mobile/">
            Mobile
          </a>
        </li><li>
          <a href="/docs/extensions/multiple-sort/">
            Multiple Sort
          </a>
        </li><li>
          <a href="/docs/extensions/page-jump-to/">
            Page Jump To
          </a>
        </li><li>
          <a href="/docs/extensions/print/">
            Print
          </a>
        </li><li>
          <a href="/docs/extensions/reorder-columns/">
            Reorder Columns
          </a>
        </li><li>
          <a href="/docs/extensions/reorder-rows/">
            Reorder Rows
          </a>
        </li><li>
          <a href="/docs/extensions/resizable/">
            Resizable
          </a>
        </li><li>
          <a href="/docs/extensions/sticky-header/">
            Sticky Header
          </a>
        </li><li>
          <a href="/docs/extensions/toolbar/">
            Toolbar
          </a>
        </li><li>
          <a href="/docs/extensions/treegrid/">
            Treegrid
          </a>
        </li></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/vuejs/introduction/">
      VueJS
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/vuejs/introduction/">
            Introduction
          </a>
        </li><li>
          <a href="/docs/vuejs/browser/">
            Browser
          </a>
        </li><li>
          <a href="/docs/vuejs/webpack/">
            Webpack
          </a>
        </li><li>
          <a href="/docs/vuejs/component/">
            Component
          </a>
        </li></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/faq/">
      FAQ
    </a>

    <ul class="nav bd-sidenav"></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/about/overview/">
      About
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/about/overview/">
            Overview
          </a>
        </li><li>
          <a href="/docs/about/team/">
            Team
          </a>
        </li><li>
          <a href="/docs/about/license/">
            License
          </a>
        </li><li>
          <a href="/docs/about/translations/">
            Translations
          </a>
        </li></ul>
  </div></nav>

        </div>

        
          <div class="d-none d-xl-block col-xl-2 bd-toc">
            <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#-">-</a></li>
<li class="toc-entry toc-h2"><a href="#height">height</a></li>
<li class="toc-entry toc-h2"><a href="#classes">classes</a></li>
<li class="toc-entry toc-h2"><a href="#theadclasses">theadClasses</a></li>
<li class="toc-entry toc-h2"><a href="#headerstyle">headerStyle</a></li>
<li class="toc-entry toc-h2"><a href="#rowstyle">rowStyle</a></li>
<li class="toc-entry toc-h2"><a href="#rowattributes">rowAttributes</a></li>
<li class="toc-entry toc-h2"><a href="#undefinedtext">undefinedText</a></li>
<li class="toc-entry toc-h2"><a href="#locale">locale</a></li>
<li class="toc-entry toc-h2"><a href="#virtualscroll">virtualScroll</a></li>
<li class="toc-entry toc-h2"><a href="#virtualscrollitemheight">virtualScrollItemHeight</a></li>
<li class="toc-entry toc-h2"><a href="#sortable">sortable</a></li>
<li class="toc-entry toc-h2"><a href="#sortclass">sortClass</a></li>
<li class="toc-entry toc-h2"><a href="#silentsort">silentSort</a></li>
<li class="toc-entry toc-h2"><a href="#sortname">sortName</a></li>
<li class="toc-entry toc-h2"><a href="#sortorder">sortOrder</a></li>
<li class="toc-entry toc-h2"><a href="#sortstable">sortStable</a></li>
<li class="toc-entry toc-h2"><a href="#rememberorder">rememberOrder</a></li>
<li class="toc-entry toc-h2"><a href="#serversort">serverSort</a></li>
<li class="toc-entry toc-h2"><a href="#customsort">customSort</a></li>
<li class="toc-entry toc-h2"><a href="#columns">columns</a></li>
<li class="toc-entry toc-h2"><a href="#data">data</a></li>
<li class="toc-entry toc-h2"><a href="#url">url</a></li>
<li class="toc-entry toc-h2"><a href="#method">method</a></li>
<li class="toc-entry toc-h2"><a href="#cache">cache</a></li>
<li class="toc-entry toc-h2"><a href="#contenttype">contentType</a></li>
<li class="toc-entry toc-h2"><a href="#datatype">dataType</a></li>
<li class="toc-entry toc-h2"><a href="#ajax">ajax</a></li>
<li class="toc-entry toc-h2"><a href="#ajaxoptions">ajaxOptions</a></li>
<li class="toc-entry toc-h2"><a href="#queryparams">queryParams</a></li>
<li class="toc-entry toc-h2"><a href="#queryparamstype">queryParamsType</a></li>
<li class="toc-entry toc-h2"><a href="#responsehandler">responseHandler</a></li>
<li class="toc-entry toc-h2"><a href="#totalfield">totalField</a></li>
<li class="toc-entry toc-h2"><a href="#totalnotfilteredfield">totalNotFilteredField</a></li>
<li class="toc-entry toc-h2"><a href="#datafield">dataField</a></li>
<li class="toc-entry toc-h2"><a href="#pagination">pagination</a></li>
<li class="toc-entry toc-h2"><a href="#onlyinfopagination">onlyInfoPagination</a></li>
<li class="toc-entry toc-h2"><a href="#showextendedpagination">showExtendedPagination</a></li>
<li class="toc-entry toc-h2"><a href="#paginationloop">paginationLoop</a></li>
<li class="toc-entry toc-h2"><a href="#sidepagination">sidePagination</a></li>
<li class="toc-entry toc-h2"><a href="#totalrows">totalRows</a></li>
<li class="toc-entry toc-h2"><a href="#totalnotfiltered">totalNotFiltered</a></li>
<li class="toc-entry toc-h2"><a href="#pagenumber">pageNumber</a></li>
<li class="toc-entry toc-h2"><a href="#pagesize">pageSize</a></li>
<li class="toc-entry toc-h2"><a href="#pagelist">pageList</a></li>
<li class="toc-entry toc-h2"><a href="#paginationhalign">paginationHAlign</a></li>
<li class="toc-entry toc-h2"><a href="#paginationvalign">paginationVAlign</a></li>
<li class="toc-entry toc-h2"><a href="#paginationdetailhalign">paginationDetailHAlign</a></li>
<li class="toc-entry toc-h2"><a href="#paginationpretext">paginationPreText</a></li>
<li class="toc-entry toc-h2"><a href="#paginationnexttext">paginationNextText</a></li>
<li class="toc-entry toc-h2"><a href="#paginationsuccessivelysize">paginationSuccessivelySize</a></li>
<li class="toc-entry toc-h2"><a href="#paginationpagesbyside">paginationPagesBySide</a></li>
<li class="toc-entry toc-h2"><a href="#paginationuseintermediate">paginationUseIntermediate</a></li>
<li class="toc-entry toc-h2"><a href="#search">search</a></li>
<li class="toc-entry toc-h2"><a href="#searchonenterkey">searchOnEnterKey</a></li>
<li class="toc-entry toc-h2"><a href="#strictsearch">strictSearch</a></li>
<li class="toc-entry toc-h2"><a href="#visiblesearch">visibleSearch</a></li>
<li class="toc-entry toc-h2"><a href="#showbuttonicons">showButtonIcons</a></li>
<li class="toc-entry toc-h2"><a href="#showbuttontext">showButtonText</a></li>
<li class="toc-entry toc-h2"><a href="#showsearchbutton">showSearchButton</a></li>
<li class="toc-entry toc-h2"><a href="#showsearchclearbutton">showSearchClearButton</a></li>
<li class="toc-entry toc-h2"><a href="#trimonsearch">trimOnSearch</a></li>
<li class="toc-entry toc-h2"><a href="#searchalign">searchAlign</a></li>
<li class="toc-entry toc-h2"><a href="#searchtimeout">searchTimeOut</a></li>
<li class="toc-entry toc-h2"><a href="#searchtext">searchText</a></li>
<li class="toc-entry toc-h2"><a href="#customsearch">customSearch</a></li>
<li class="toc-entry toc-h2"><a href="#showheader">showHeader</a></li>
<li class="toc-entry toc-h2"><a href="#showfooter">showFooter</a></li>
<li class="toc-entry toc-h2"><a href="#footerstyle">footerStyle</a></li>
<li class="toc-entry toc-h2"><a href="#showcolumns">showColumns</a></li>
<li class="toc-entry toc-h2"><a href="#showcolumnstoggleall">showColumnsToggleAll</a></li>
<li class="toc-entry toc-h2"><a href="#showcolumnssearch">showColumnsSearch</a></li>
<li class="toc-entry toc-h2"><a href="#minimumcountcolumns">minimumCountColumns</a></li>
<li class="toc-entry toc-h2"><a href="#showpaginationswitch">showPaginationSwitch</a></li>
<li class="toc-entry toc-h2"><a href="#showrefresh">showRefresh</a></li>
<li class="toc-entry toc-h2"><a href="#showtoggle">showToggle</a></li>
<li class="toc-entry toc-h2"><a href="#showfullscreen">showFullscreen</a></li>
<li class="toc-entry toc-h2"><a href="#smartdisplay">smartDisplay</a></li>
<li class="toc-entry toc-h2"><a href="#escape">escape</a></li>
<li class="toc-entry toc-h2"><a href="#filteroptions">filterOptions</a></li>
<li class="toc-entry toc-h2"><a href="#idfield">idField</a></li>
<li class="toc-entry toc-h2"><a href="#selectitemname">selectItemName</a></li>
<li class="toc-entry toc-h2"><a href="#clicktoselect">clickToSelect</a></li>
<li class="toc-entry toc-h2"><a href="#ignoreclicktoselecton">ignoreClickToSelectOn</a></li>
<li class="toc-entry toc-h2"><a href="#singleselect">singleSelect</a></li>
<li class="toc-entry toc-h2"><a href="#checkboxheader">checkboxHeader</a></li>
<li class="toc-entry toc-h2"><a href="#maintainmetadata">maintainMetaData</a></li>
<li class="toc-entry toc-h2"><a href="#multipleselectrow">multipleSelectRow</a></li>
<li class="toc-entry toc-h2"><a href="#uniqueid">uniqueId</a></li>
<li class="toc-entry toc-h2"><a href="#cardview">cardView</a></li>
<li class="toc-entry toc-h2"><a href="#detailview">detailView</a></li>
<li class="toc-entry toc-h2"><a href="#detailviewicon">detailViewIcon</a></li>
<li class="toc-entry toc-h2"><a href="#detailviewbyclick">detailViewByClick</a></li>
<li class="toc-entry toc-h2"><a href="#detailformatter">detailFormatter</a></li>
<li class="toc-entry toc-h2"><a href="#detailfilter">detailFilter</a></li>
<li class="toc-entry toc-h2"><a href="#toolbar">toolbar</a></li>
<li class="toc-entry toc-h2"><a href="#toolbaralign">toolbarAlign</a></li>
<li class="toc-entry toc-h2"><a href="#buttonstoolbar">buttonsToolbar</a></li>
<li class="toc-entry toc-h2"><a href="#buttonsalign">buttonsAlign</a></li>
<li class="toc-entry toc-h2"><a href="#buttonsorder">buttonsOrder</a></li>
<li class="toc-entry toc-h2"><a href="#buttonsprefix">buttonsPrefix</a></li>
<li class="toc-entry toc-h2"><a href="#buttonsclass">buttonsClass</a></li>
<li class="toc-entry toc-h2"><a href="#icons">icons</a></li>
<li class="toc-entry toc-h2"><a href="#html">html</a></li>
<li class="toc-entry toc-h2"><a href="#iconsize">iconSize</a></li>
<li class="toc-entry toc-h2"><a href="#iconsprefix">iconsPrefix</a></li>
</ul>
          </div>
        

        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content api" role="main">
          <h1 class="bd-title" id="content">Table Options</h1>
          <p class="bd-lead">The table options API of Bootstrap Table.</p>
          <div id="gg"></div>

          <p>The table options are defined in <code class="highlighter-rouge">jQuery.fn.bootstrapTable.defaults</code>.</p>

<h2 id="-">-</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-toggle</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Activate bootstrap table without writing JavaScript.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'table'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#welcomes/from-html.html">From HTML</a></p>
  </li>
</ul>

<h2 id="height">height</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-height</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The height of table, enable fixed header of table.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-height.html">Table Height</a></p>
  </li>
</ul>

<h2 id="classes">classes</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-classes</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The class name of table. <code class="highlighter-rouge">'table'</code>, <code class="highlighter-rouge">'table-bordered'</code>, <code class="highlighter-rouge">'table-hover'</code>, <code class="highlighter-rouge">'table-striped'</code>, <code class="highlighter-rouge">'table-dark'</code>, <code class="highlighter-rouge">'table-sm'</code> and <code class="highlighter-rouge">'table-borderless'</code> can be used. By default, the table is bordered.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'table table-bordered table-hover'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-classes.html">Table Classes</a></p>
  </li>
</ul>

<h2 id="theadclasses">theadClasses</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-thead-classes</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The class name of table thead. Bootstrap v4, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">thead</code>s appear light or dark gray.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">''</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/thead-classes.html">Thead Classes</a></p>
  </li>
</ul>

<h2 id="headerstyle">headerStyle</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-header-style</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The header style formatter function, takes one parameter:</p>

    <ul>
      <li><code class="highlighter-rouge">column</code>: the column object.</li>
    </ul>

    <p>Support <code class="highlighter-rouge">classes</code> or <code class="highlighter-rouge">css</code>. Example usage:</p>
  </li>
</ul>

<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript">  <span class="kd">function</span> <span class="nx">headerStyle</span><span class="p">(</span><span class="nx">column</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">{</span>
      <span class="na">css</span><span class="p">:</span> <span class="p">{</span> <span class="dl">'</span><span class="s1">font-weight</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">normal</span><span class="dl">'</span> <span class="p">},</span>
      <span class="na">classes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">my-class</span><span class="dl">'</span>
    <span class="p">}</span>
  <span class="p">}</span>
  </code></pre></figure>

<ul>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{}</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/header-style.html">Header Style</a></p>
  </li>
</ul>

<h2 id="rowstyle">rowStyle</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-row-style</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The row style formatter function, takes two parameters:</p>

    <ul>
      <li><code class="highlighter-rouge">row</code>: the row record data.</li>
      <li><code class="highlighter-rouge">index</code>: the row index.</li>
    </ul>

    <p>Support classes or css.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{}</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/row-style.html">Row Style</a></p>
  </li>
</ul>

<h2 id="rowattributes">rowAttributes</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-row-attributes</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The row attribute formatter function, takes two parameters:</p>

    <ul>
      <li><code class="highlighter-rouge">row</code>: the row record data.</li>
      <li><code class="highlighter-rouge">index</code>: the row index.</li>
    </ul>

    <p>Support all custom attributes.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{}</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/row-attributes.html">Row Attributes</a></p>
  </li>
</ul>

<h2 id="undefinedtext">undefinedText</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-undefined-text</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines the default <code class="highlighter-rouge">undefined</code> text.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'-'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/undefined-text.html">Undefined Text</a></p>
  </li>
</ul>

<h2 id="locale">locale</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-locale</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Sets the locale to use (i.e. <code class="highlighter-rouge">'zh-CN'</code>). Locale files must be pre-loaded.
Allows for fallback locales, if loaded, in the following order:</p>

    <ul>
      <li>First tries for the locale as specified,</li>
      <li>Then tries the locale with ‘_’ translated to ‘-‘ and the region code upper cased,</li>
      <li>Then tries the short locale code (i.e. <code class="highlighter-rouge">'zh'</code> instead of <code class="highlighter-rouge">'zh-CN'</code>),</li>
      <li>And finally will use the last locale file loaded (or the default locale if no locales loaded).</li>
    </ul>

    <p>If left <code class="highlighter-rouge">undefined</code> or an empty string, use the last locale loaded (or <code class="highlighter-rouge">'en-US'</code> if no locale files loaded).</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-locale.html">Table Locale</a></p>
  </li>
</ul>

<h2 id="virtualscroll">virtualScroll</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-virtual-scroll</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to enable virtual scroll to displays a virtual, “infinite” list.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/large-data.html">Large Data</a></p>
  </li>
</ul>

<h2 id="virtualscrollitemheight">virtualScrollItemHeight</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-virtual-scroll-item-height</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>If this option is not define, we will use the height of the first item by default.</p>

    <p>It is <strong>important</strong> to provide this if virtual item height will be significantly larger than the default height. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use <code class="highlighter-rouge">px</code> units.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/virtual-scroll-item-height.html">Virtual Scroll Item Height</a></p>
  </li>
</ul>

<h2 id="sortable">sortable</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sortable</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">false</code> to disable sortable of all columns.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-sortable.html">Table Sortable</a></p>
  </li>
</ul>

<h2 id="sortclass">sortClass</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sort-class</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The class name of the <code class="highlighter-rouge">td</code> elements which are sorted.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/sort-class.html">Sort Class</a></p>
  </li>
</ul>

<h2 id="silentsort">silentSort</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-silent-sort</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">false</code> to sort the data with the loading message. This options works when the sidePagination option is set to <code class="highlighter-rouge">'server'</code>.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/silent-sort.html">Silent Sort</a></p>
  </li>
</ul>

<h2 id="sortname">sortName</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sort-name</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines which column will be sorted.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/sort-name-order.html">Sort Name Order</a></p>
  </li>
</ul>

<h2 id="sortorder">sortOrder</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sort-order</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines the column sort order, can only be <code class="highlighter-rouge">'asc'</code> or <code class="highlighter-rouge">'desc'</code>.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'asc'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/sort-name-order.html">Sort Name Order</a></p>
  </li>
</ul>

<h2 id="sortstable">sortStable</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sort-stable</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to get a stable sorting. We will add <code class="highlighter-rouge">'_position'</code> property to the row.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/sort-stable.html">Sort Stable</a></p>
  </li>
</ul>

<h2 id="rememberorder">rememberOrder</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-remember-order</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to remember the order for each column.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/remember-order.html">Remember Order</a></p>
  </li>
</ul>

<h2 id="serversort">serverSort</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-server-sort</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">false</code> to sort the data in the client side, only works when the <code class="highlighter-rouge">sidePagination</code> is <code class="highlighter-rouge">server</code>.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/server-sort.html">Server Sort</a></p>
  </li>
</ul>

<h2 id="customsort">customSort</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-custom-sort</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The custom sort function is executed instead of the built-in sort function, takes three parameters:</p>

    <ul>
      <li><code class="highlighter-rouge">sortName</code>: the sort name.</li>
      <li><code class="highlighter-rouge">sortOrder</code>: the sort order.</li>
      <li><code class="highlighter-rouge">data</code>: the rows data.</li>
    </ul>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/custom-order.html">Custom Order</a></p>
  </li>
</ul>

<h2 id="columns">columns</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">-</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Array</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The table columns config object, see column properties for more details.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">[]</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-columns.html">Table Columns</a></p>
  </li>
</ul>

<h2 id="data">data</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-data</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Array | Object</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The data to be loaded.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">[]</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#welcomes/from-data.html">From Data</a></p>
  </li>
</ul>

<h2 id="url">url</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-url</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>A URL to request data from remote site.</p>

    <p>Note that the required server response format is different depending on whether the <code class="highlighter-rouge">'sidePagination'</code> option is specified. See the following examples:</p>

    <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>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#welcomes/from-url.html">From URL</a></p>
  </li>
  <li>
    <p><strong>Error handling</strong></p>

    <p>To get loading errors please use <a href="https://bootstrap-table.com/docs/api/events/#onloaderror">onLoadError</a></p>
  </li>
</ul>

<h2 id="method">method</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-method</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The method type to request remote data.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'get'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-method.html">Table Method</a></p>
  </li>
</ul>

<h2 id="cache">cache</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-cache</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">false</code> to disable caching of AJAX requests.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-cache.html">Table Cache</a></p>
  </li>
</ul>

<h2 id="contenttype">contentType</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-content-type</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The contentType of request remote data, for example: <code class="highlighter-rouge">application/x-www-form-urlencoded</code>.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'application/json'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/content-type.html">Content Type</a></p>
  </li>
</ul>

<h2 id="datatype">dataType</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-data-type</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The type of data that you are expecting back from the server.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'json'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/data-type.html">Data Type</a></p>
  </li>
</ul>

<h2 id="ajax">ajax</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-ajax</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>A method to replace ajax call. Should implement the same API as jQuery ajax method.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-ajax.html">Table AJAX</a></p>
  </li>
</ul>

<h2 id="ajaxoptions">ajaxOptions</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-ajax-options</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Object</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Additional options for submit ajax request. List of values: <a href="http://api.jquery.com/jQuery.ajax">jQuery.ajax</a>.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{}</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/ajax-options.html">AJAX Options</a></p>
  </li>
</ul>

<h2 id="queryparams">queryParams</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-query-params</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>When requesting remote data, you can send additional parameters by modifying queryParams.</p>

    <p>If <code class="highlighter-rouge">queryParamsType = 'limit'</code>, the params object contains: <code class="highlighter-rouge">limit</code>, <code class="highlighter-rouge">offset</code>, <code class="highlighter-rouge">search</code>, <code class="highlighter-rouge">sort</code>, <code class="highlighter-rouge">order</code>.</p>

    <p>Else, it contains: <code class="highlighter-rouge">pageSize</code>, <code class="highlighter-rouge">pageNumber</code>, <code class="highlighter-rouge">searchText</code>, <code class="highlighter-rouge">sortName</code>, <code class="highlighter-rouge">sortOrder</code>.</p>

    <p>Return <code class="highlighter-rouge">false</code> to stop request.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">function(params) { return params }</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/query-params.html">Query Params</a></p>
  </li>
</ul>

<h2 id="queryparamstype">queryParamsType</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-query-params-type</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">'limit'</code> to send query params with RESTFul type.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'limit'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/query-params-type.html">Query Params Type</a></p>
  </li>
</ul>

<h2 id="responsehandler">responseHandler</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-response-handler</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Before load remote data, handler the response data format, the parameters object contains:</p>

    <ul>
      <li><code class="highlighter-rouge">res</code>: the response data.</li>
      <li><code class="highlighter-rouge">jqXHR</code>: jqXHR object, which is a superset of the XMLHTTPRequest object. For more information, see the <a href="http://api.jquery.com/Types/#jqXHR">jqXHR Type</a>.</li>
    </ul>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">function(res) { return res }</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/response-handler.html">Response Handler</a></p>
  </li>
</ul>

<h2 id="totalfield">totalField</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-total-field</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Key in incoming json containing <code class="highlighter-rouge">'total'</code> data.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'total'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/total-data-field.html">Total/Data Field</a></p>
  </li>
</ul>

<h2 id="totalnotfilteredfield">totalNotFilteredField</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-total-not-filtered-field</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">string</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The field from the json response which will used for <code class="highlighter-rouge">showExtendedPagination</code>.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">totalNotFiltered</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/total-not-filtered-field.html">Total Not Filtered Field</a></p>
  </li>
</ul>

<h2 id="datafield">dataField</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-data-field</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Key in incoming json containing <code class="highlighter-rouge">'rows'</code> data list.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'rows'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/total-data-field.html">Total/Data Field</a></p>
  </li>
</ul>

<h2 id="pagination">pagination</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show a pagination toolbar on table bottom.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-pagination.html">Table Pagination</a></p>
  </li>
</ul>

<h2 id="onlyinfopagination">onlyInfoPagination</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-only-info-pagination</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show only the quantity of the data that is showing in the table. It needs the pagination table options is set to true.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/only-info-pagination.html">Only Info Pagination</a></p>
  </li>
</ul>

<h2 id="showextendedpagination">showExtendedPagination</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-extended-pagination</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show a extended version of pagination (including the count of all rows with out filters).
If you use pagination on the server side pls use <code class="highlighter-rouge">totalNotFilteredField</code> to define the count.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-extended-pagination.html">Show Extended Pagination</a></p>
  </li>
</ul>

<h2 id="paginationloop">paginationLoop</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-loop</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to enable pagination continuous loop mode.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-loop.html">Pagination Loop</a></p>
  </li>
</ul>

<h2 id="sidepagination">sidePagination</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-side-pagination</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines the side pagination of the table, can only be <code class="highlighter-rouge">'client'</code> or <code class="highlighter-rouge">'server'</code>.
Using <code class="highlighter-rouge">'server'</code> side requires either setting the <code class="highlighter-rouge">'url'</code> or <code class="highlighter-rouge">'ajax'</code> option.</p>

    <p>Note that the required server response format is different depending on whether the  <code class="highlighter-rouge">'sidePagination'</code> option is set to <code class="highlighter-rouge">'client'</code> or <code class="highlighter-rouge">'server'</code>. See the following examples:</p>

    <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>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'client'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/client-side-pagination.html">Client Side Pagination</a> and <a href="https://examples.bootstrap-table.com/#options/server-side-pagination.html">Server Side Pagination</a></p>
  </li>
</ul>

<h2 id="totalrows">totalRows</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-total-rows</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>This property is mainly passed in by pagination server, which is easy to use.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">0</code></p>
  </li>
</ul>

<h2 id="totalnotfiltered">totalNotFiltered</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-total-not-filtered</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>This property is mainly passed in by pagination server, which is easy to use.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">0</code></p>
  </li>
</ul>

<h2 id="pagenumber">pageNumber</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-page-number</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>When set pagination property, initialize the page number.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">1</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/page-number.html">Page Number</a></p>
  </li>
</ul>

<h2 id="pagesize">pageSize</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-page-size</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>When set pagination property, initialize the page size.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">10</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/page-size.html">Page Size</a></p>
  </li>
</ul>

<h2 id="pagelist">pageList</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-page-list</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Array</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>When set pagination property, initialize the page size selecting list. If you include the <code class="highlighter-rouge">'all'</code> or <code class="highlighter-rouge">'unlimited'</code> option, all the records will be shown in your table.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">[10, 25, 50, 100]</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/page-list.html">Page List</a></p>
  </li>
</ul>

<h2 id="paginationhalign">paginationHAlign</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-h-align</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate how to align the pagination. <code class="highlighter-rouge">'left'</code>, <code class="highlighter-rouge">'right'</code> can be used.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'right'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-h-align.html">Pagination H Align</a></p>
  </li>
</ul>

<h2 id="paginationvalign">paginationVAlign</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-v-align</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate how to vertical align the pagination. <code class="highlighter-rouge">'top'</code>, <code class="highlighter-rouge">'bottom'</code>, <code class="highlighter-rouge">'both'</code> (put the pagination on top and bottom)  can be used.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'bottom'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-v-align.html">Pagination V Align</a></p>
  </li>
</ul>

<h2 id="paginationdetailhalign">paginationDetailHAlign</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-detail-h-align</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate how to align the pagination detail. <code class="highlighter-rouge">'left'</code>, <code class="highlighter-rouge">'right'</code> can be used.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'left'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-h-align.html">Pagination H Align</a></p>
  </li>
</ul>

<h2 id="paginationpretext">paginationPreText</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-pre-text</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate the icon or text to be shown in the pagination detail, the previous button.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'‹'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-text.html">Pagination Text</a></p>
  </li>
</ul>

<h2 id="paginationnexttext">paginationNextText</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-next-text</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate the icon or text to be shown in the pagination detail, the next button.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'›'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-text.html">Pagination Text</a></p>
  </li>
</ul>

<h2 id="paginationsuccessivelysize">paginationSuccessivelySize</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-successively-size</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Maximum successive number of pages in a row.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">5</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-index-number.html">Pagination Index Number</a></p>
  </li>
</ul>

<h2 id="paginationpagesbyside">paginationPagesBySide</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-pages-by-side</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The number of pages on each side (right, left) of the current page.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">1</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-index-number.html">Pagination Index Number</a></p>
  </li>
</ul>

<h2 id="paginationuseintermediate">paginationUseIntermediate</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-use-intermediate</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Calculate and show intermediate pages for quick access.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-index-number.html">Pagination Index Number</a></p>
  </li>
</ul>

<h2 id="search">search</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-search</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Enable the search input.</p>

    <p>There are 3 ways to search:</p>
    <ul>
      <li>The value contains the search query (Default).
Example: Github contains git.</li>
      <li>The value must be identical to the search query.
Example: Github (value) and Github (search query).</li>
      <li>Comparisons (&lt;, &gt;, &lt;=, =&lt;, &gt;=, =&gt;).
Example: 4 is larger than 3.</li>
    </ul>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-search.html">Table Search</a></p>
  </li>
</ul>

<h2 id="searchonenterkey">searchOnEnterKey</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-search-on-enter-key</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The search method will be executed until the Enter key is pressed.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/search-on-enter-key.html">Search On Enter Key</a></p>
  </li>
</ul>

<h2 id="strictsearch">strictSearch</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-strict-search</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Enable the strict search.
Disables the comparison checks.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/strict-search.html">Strict Search</a></p>
  </li>
</ul>

<h2 id="visiblesearch">visibleSearch</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">visible-search</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>set <code class="highlighter-rouge">true</code> to search only in visible column/data, if the data contains other values which are not displayed they will be ignored while searching.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/visible-search.html">visible search</a></p>
  </li>
</ul>

<h2 id="showbuttonicons">showButtonIcons</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">show-button-icons</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>All buttons will show icons on it</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-button-icons.html">show button icons</a></p>
  </li>
</ul>

<h2 id="showbuttontext">showButtonText</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">show-button-text</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>All buttons will show an text on it</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-button-text.html">show button text</a></p>
  </li>
</ul>

<h2 id="showsearchbutton">showSearchButton</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-search-button</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show a search Button behind the search input.
The Search will only be executed if the button is pressed (e.g. to prevent traffic or loading time).</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-search-button.html">Show Search Button</a></p>
  </li>
</ul>

<h2 id="showsearchclearbutton">showSearchClearButton</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-search-clear-button</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show a clear Button behind the search input which will clear the search input (also all filter from filter-control (if enabled)).</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-search-clear-button.html">Show Search Clear Button</a></p>
  </li>
</ul>

<h2 id="trimonsearch">trimOnSearch</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-trim-on-search</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to trim spaces in search field.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/trim-on-search.html">Trim On Search</a></p>
  </li>
</ul>

<h2 id="searchalign">searchAlign</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-search-align</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate how to align the search input. <code class="highlighter-rouge">'left'</code>, <code class="highlighter-rouge">'right'</code> can be used.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'right'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/search-align.html">Search Align</a></p>
  </li>
</ul>

<h2 id="searchtimeout">searchTimeOut</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-search-time-out</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set timeout for search fire.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">500</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/search-time-out.html">Search Time Out</a></p>
  </li>
</ul>

<h2 id="searchtext">searchText</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-search-text</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>When set search property, initialize the search text.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">''</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/search-text.html">Search Text</a></p>
  </li>
</ul>

<h2 id="customsearch">customSearch</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-custom-search</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The custom search function is executed instead of built-in search function, takes three parameters:</p>

    <ul>
      <li><code class="highlighter-rouge">data</code>: the table data.</li>
      <li><code class="highlighter-rouge">text</code>: the search text.</li>
      <li><code class="highlighter-rouge">filter</code>: the filter object from <code class="highlighter-rouge">filterBy</code> method.</li>
    </ul>

    <p>Example usage:</p>
  </li>
</ul>

<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript">  <span class="kd">function</span> <span class="nx">customSearch</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="nx">row</span><span class="p">.</span><span class="nx">field</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span>
    <span class="p">})</span>
  <span class="p">}</span>
  </code></pre></figure>

<ul>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/custom-search.html">Custom Search</a></p>
  </li>
</ul>

<h2 id="showheader">showHeader</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-header</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">false</code> to hide the table header.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-header.html">Show Header</a></p>
  </li>
</ul>

<h2 id="showfooter">showFooter</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-footer</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show the summary footer row.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-footer.html">Show Footer</a></p>
  </li>
</ul>

<h2 id="footerstyle">footerStyle</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-footer-style</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The footer style formatter function, takes one parameter:</p>

    <ul>
      <li><code class="highlighter-rouge">column</code>: the column object.</li>
    </ul>

    <p>Support <code class="highlighter-rouge">classes</code> or <code class="highlighter-rouge">css</code>. Example usage:</p>
  </li>
</ul>

<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript">  <span class="kd">function</span> <span class="nx">footerStyle</span><span class="p">(</span><span class="nx">column</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">{</span>
      <span class="na">css</span><span class="p">:</span> <span class="p">{</span> <span class="dl">'</span><span class="s1">font-weight</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">normal</span><span class="dl">'</span> <span class="p">},</span>
      <span class="na">classes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">my-class</span><span class="dl">'</span>
    <span class="p">}</span>
  <span class="p">}</span>
  </code></pre></figure>

<ul>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{}</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/footer-style.html">Footer Style</a></p>
  </li>
</ul>

<h2 id="showcolumns">showColumns</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-columns</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show the columns drop down list. We can set the <a href="/docs/api/column-options/#switchable"><code class="highlighter-rouge">switchable</code></a> column option to <code class="highlighter-rouge">false</code> to hide the columns item in the drop down list.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/basic-columns.html">Basic Columns</a> and <a href="https://examples.bootstrap-table.com/#options/large-columns.html">Large Columns</a></p>
  </li>
</ul>

<h2 id="showcolumnstoggleall">showColumnsToggleAll</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-columns-toggle-all</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show a toggle all checkbox within the columns option/dropdown.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/columns-toggle-all.html">Columns Toggle All</a></p>
  </li>
</ul>

<h2 id="showcolumnssearch">showColumnsSearch</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-columns-search</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show a search for the columns filter.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/columns-search.html">Columns Search</a></p>
  </li>
</ul>

<h2 id="minimumcountcolumns">minimumCountColumns</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-minimum-count-columns</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Number</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The minimum number of columns to hide from the columns drop down list.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">1</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/minimum-count-columns.html">Minimum Count Columns</a></p>
  </li>
</ul>

<h2 id="showpaginationswitch">showPaginationSwitch</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-pagination-switch</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show the pagination switch button.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-pagination-switch.html">Show Pagination Switch</a></p>
  </li>
</ul>

<h2 id="showrefresh">showRefresh</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-refresh</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show the refresh button.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-refresh.html">Show Refresh</a></p>
  </li>
</ul>

<h2 id="showtoggle">showToggle</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-toggle</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show the toggle button to toggle table / card view.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-toggle.html">Show Toggle</a></p>
  </li>
</ul>

<h2 id="showfullscreen">showFullscreen</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-show-fullscreen</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show the fullscreen button.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/show-fullscreen.html">Show Fullscreen</a></p>
  </li>
</ul>

<h2 id="smartdisplay">smartDisplay</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-smart-display</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to display pagination or card view smartly.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/smart-display.html">Smart Display</a></p>
  </li>
</ul>

<h2 id="escape">escape</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-escape</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Escapes a string for insertion into HTML, replacing &amp;, &lt;, &gt;, “, `, and ‘ characters.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-escape.html">Table Escape</a></p>
  </li>
</ul>

<h2 id="filteroptions">filterOptions</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-filter-options</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Define the default filter options of algorithm, <code class="highlighter-rouge">filterAlgorithm: 'and'</code> means all given filter must match, <code class="highlighter-rouge">filterAlgorithm: 'or'</code> means one of the given filter must match.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{ filterAlgorithm: 'and' }</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/filter-options.html">Filter Options</a></p>
  </li>
</ul>

<h2 id="idfield">idField</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-id-field</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate which field will be used as checkbox/radiobox value, its the counterpart to <a href="https://bootstrap-table.com/docs/api/table-options/#selectitemname">selectItemName</a>.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/id-field.html">Id Field</a></p>
  </li>
</ul>

<h2 id="selectitemname">selectItemName</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-select-item-name</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>The name of radio or checkbox input.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'btSelectItem'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/id-field.html">Id Field</a></p>
  </li>
</ul>

<h2 id="clicktoselect">clickToSelect</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-click-to-select</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to select checkbox or radiobox when clicking rows.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/click-to-select.html">Click To Select</a></p>
  </li>
</ul>

<h2 id="ignoreclicktoselecton">ignoreClickToSelectOn</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-ignore-click-to-select-on</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set the ignore elements <code class="highlighter-rouge">clickToSelect</code> on. Takes one parameter:</p>

    <ul>
      <li><code class="highlighter-rouge">element</code>: the element clicked on.</li>
    </ul>

    <p>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 <code class="highlighter-rouge">clickToSelect</code> is true.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{ return ['A', 'BUTTON'].includes(tagName) }</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/ignore-click-to-select-on.html">Ignore Click To Select On</a></p>
  </li>
</ul>

<h2 id="singleselect">singleSelect</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-single-select</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to allow checkbox selecting only one row.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/single-select.html">Single Select</a></p>
  </li>
</ul>

<h2 id="checkboxheader">checkboxHeader</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-checkbox-header</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">false</code> to hide check-all checkbox in header row.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/checkbox-header.html">Checkbox Header</a></p>
  </li>
</ul>

<h2 id="maintainmetadata">maintainMetaData</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-maintain-meta-data</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to maintain the following meta data on change page and search:</p>
    <ul>
      <li>selected rows</li>
      <li>hidden rows</li>
    </ul>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/maintain-meta-data.html">Maintain Meta Data</a></p>
  </li>
</ul>

<h2 id="multipleselectrow">multipleSelectRow</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-multiple-select-row</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to enable the multiple selection row. Can use the ctrl+click to select one row or use shift+click to select a range of rows.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/multiple-select-row.html">Multiple Select Row</a></p>
  </li>
</ul>

<h2 id="uniqueid">uniqueId</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-unique-id</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate an unique identifier for each row.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#methods/getRowByUniqueId.html">getRowByUniqueId</a></p>
  </li>
</ul>

<h2 id="cardview">cardView</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-card-view</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show card view table, for example mobile view.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/card-view.html">Card View</a></p>
  </li>
</ul>

<h2 id="detailview">detailView</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-detail-view</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show detail view table.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/detail-view.html">Detail View</a></p>
  </li>
</ul>

<h2 id="detailviewicon">detailViewIcon</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-detail-view-icon</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to show the detail view column (plus/minus icon).</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">true</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/detail-view-icon.html">Detail View Icon</a></p>
  </li>
</ul>

<h2 id="detailviewbyclick">detailViewByClick</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-detail-view-by-click</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set <code class="highlighter-rouge">true</code> to toggle the detail view, when a cell is clicked.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/detail-view-icon.html">Detail View Icon</a></p>
  </li>
</ul>

<h2 id="detailformatter">detailFormatter</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-detail-formatter</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Format your detail view when <code class="highlighter-rouge">detailView</code> is set to <code class="highlighter-rouge">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.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">function(index, row, element) { return '' }</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/detail-view.html">Detail View</a></p>
  </li>
</ul>

<h2 id="detailfilter">detailFilter</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-detail-filter</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Enable expansion per row when <code class="highlighter-rouge">detailView</code> is set to <code class="highlighter-rouge">true</code>. Return true and the row will be enabled for expansion, return false and expansion for the row will be disabled. Default function returns true to enable expansion for all rows.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">function(index, row) { return true }</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/detail-filter.html">Detail Filter</a></p>
  </li>
</ul>

<h2 id="toolbar">toolbar</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-toolbar</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String/Node</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>A jQuery selector that indicates the toolbar, for example: <code class="highlighter-rouge">#toolbar</code>, <code class="highlighter-rouge">.toolbar</code>, or a DOM node.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/custom-toolbar.html">Custom Toolbar</a></p>
  </li>
</ul>

<h2 id="toolbaralign">toolbarAlign</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-toolbar-align</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate how to align the custom toolbar. <code class="highlighter-rouge">'left'</code>, <code class="highlighter-rouge">'right'</code> can be used.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'left'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/toolbar-align.html">Toolbar Align</a></p>
  </li>
</ul>

<h2 id="buttonstoolbar">buttonsToolbar</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-buttons-toolbar</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String/Node</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>A jQuery selector that indicates the custom buttons toolbar, for example: <code class="highlighter-rouge">#buttons-toolbar</code>, <code class="highlighter-rouge">.buttons-toolbar</code>, or a DOM node.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/buttons-toolbar.html">Buttons Toolbar</a></p>
  </li>
</ul>

<h2 id="buttonsalign">buttonsAlign</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-buttons-align</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate how to align the toolbar buttons. <code class="highlighter-rouge">'left'</code>, <code class="highlighter-rouge">'right'</code> can be used.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'right'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/buttons-align.html">Buttons Align</a></p>
  </li>
</ul>

<h2 id="buttonsorder">buttonsOrder</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-buttons-order</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Array</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Indicate how to custom order of the toolbar buttons.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/buttons-order.html">Buttons Order</a></p>
  </li>
</ul>

<h2 id="buttonsprefix">buttonsPrefix</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-buttons-prefix</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines prefix of table buttons.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'btn'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/buttons-prefix.html">Buttons Prefix</a></p>
  </li>
</ul>

<h2 id="buttonsclass">buttonsClass</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-buttons-class</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines the class (added after <code class="highlighter-rouge">'btn-'</code>) of table buttons.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'secondary'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/buttons-class.html">Buttons Class</a></p>
  </li>
</ul>

<h2 id="icons">icons</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-icons</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Object</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines icons used in the toolbar, pagination, and details view.</p>
  </li>
  <li>
    <p><strong>Default:</strong></p>
  </li>
</ul>

<figure class="highlight"><pre><code class="language-html" data-lang="html">  {
    paginationSwitchDown: 'fa-caret-square-down',
    paginationSwitchUp: 'fa-caret-square-up',
    refresh: 'fa-sync',
    toggleOff: 'fa-toggle-off',
    toggleOn: 'fa-toggle-on',
    columns: 'fa-th-list',
    fullscreen: 'fa-arrows-alt',
    detailOpen: 'fa-plus',
    detailClose: 'fa-minus'
  }
  </code></pre></figure>

<ul>
  <li><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-icons.html">Table Icons</a></li>
</ul>

<h2 id="html">html</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-html</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">Object</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines some html of the table.</p>
  </li>
  <li>
    <p><strong>Default:</strong></p>

    <p>Too much code, please checkout the source code of the <code class="highlighter-rouge">index.js</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/table-html.html">Table Html</a></p>
  </li>
</ul>

<h2 id="iconsize">iconSize</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-icon-size</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines icon size, <code class="highlighter-rouge">undefined</code>, <code class="highlighter-rouge">'lg'</code>, <code class="highlighter-rouge">'sm'</code> can be used.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/icon-size.html">Icon Size</a></p>
  </li>
</ul>

<h2 id="iconsprefix">iconsPrefix</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-icons-prefix</code></p>
  </li>
  <li>
    <p><strong>Type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Defines icon set name (<code class="highlighter-rouge">'glyphicon'</code> or <code class="highlighter-rouge">'fa'</code> for FontAwesome). By default <code class="highlighter-rouge">'fa'</code> is used for Bootstrap v4.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'fa'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/icons-prefix.html">Icons Prefix</a></p>
  </li>
</ul>

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

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
$(function () {
  $('.bd-content.api a').attr('target', '_blank')
})
</script><script src="https://gg.wenzhixin.net.cn/bootstrap-table/gg.js"></script>
<script src="/assets/js/docs.min.js?m=1"></script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132747866-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {window.dataLayer.push(arguments)}
  gtag('js', new Date())
  gtag('config', 'UA-132747866-1')
</script>

  </body>
</html>