githab
/
bootstrap-table


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553
							<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"><!-- Documentation extras -->

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


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

<!-- 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.23.5
      </a>
      <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
        <a class="dropdown-item active" href="/">Latest (1.23.5)</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.21.4/" target="_blank">v1.21.4</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.20.2/" target="_blank">v1.20.2</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.19.1/" target="_blank">v1.19.1</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.18.3/" target="_blank">v1.18.3</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.17.1/" target="_blank">v1.17.1</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.16.0/" target="_blank">v1.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/addrbar/">
      Extensions
    </a>

    <ul class="nav bd-sidenav"><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/custom-view/">
            Custom View
          </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/pipeline/">
            Pipeline
          </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/online-editor/">
      Online Editor
    </a>

    <ul class="nav bd-sidenav"></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="#ajax">ajax</a></li>
<li class="toc-entry toc-h2"><a href="#ajaxoptions">ajaxOptions</a></li>
<li class="toc-entry toc-h2"><a href="#buttons">buttons</a></li>
<li class="toc-entry toc-h2"><a href="#buttonsalign">buttonsAlign</a></li>
<li class="toc-entry toc-h2"><a href="#buttonsattributetitle">buttonsAttributeTitle</a></li>
<li class="toc-entry toc-h2"><a href="#buttonsclass">buttonsClass</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="#buttonstoolbar">buttonsToolbar</a></li>
<li class="toc-entry toc-h2"><a href="#cache">cache</a></li>
<li class="toc-entry toc-h2"><a href="#cardview">cardView</a></li>
<li class="toc-entry toc-h2"><a href="#checkboxheader">checkboxHeader</a></li>
<li class="toc-entry toc-h2"><a href="#classes">classes</a></li>
<li class="toc-entry toc-h2"><a href="#clicktoselect">clickToSelect</a></li>
<li class="toc-entry toc-h2"><a href="#columns">columns</a></li>
<li class="toc-entry toc-h2"><a href="#contenttype">contentType</a></li>
<li class="toc-entry toc-h2"><a href="#customsearch">customSearch</a></li>
<li class="toc-entry toc-h2"><a href="#customsort">customSort</a></li>
<li class="toc-entry toc-h2"><a href="#data">data</a></li>
<li class="toc-entry toc-h2"><a href="#datafield">dataField</a></li>
<li class="toc-entry toc-h2"><a href="#datatype">dataType</a></li>
<li class="toc-entry toc-h2"><a href="#detailfilter">detailFilter</a></li>
<li class="toc-entry toc-h2"><a href="#detailformatter">detailFormatter</a></li>
<li class="toc-entry toc-h2"><a href="#detailview">detailView</a></li>
<li class="toc-entry toc-h2"><a href="#detailviewalign">detailViewAlign</a></li>
<li class="toc-entry toc-h2"><a href="#detailviewbyclick">detailViewByClick</a></li>
<li class="toc-entry toc-h2"><a href="#detailviewicon">detailViewIcon</a></li>
<li class="toc-entry toc-h2"><a href="#escape">escape</a></li>
<li class="toc-entry toc-h2"><a href="#escapetitle">escapeTitle</a></li>
<li class="toc-entry toc-h2"><a href="#filteroptions">filterOptions</a></li>
<li class="toc-entry toc-h2"><a href="#fixedscroll">fixedScroll</a></li>
<li class="toc-entry toc-h2"><a href="#footerfield">footerField</a></li>
<li class="toc-entry toc-h2"><a href="#footerstyle">footerStyle</a></li>
<li class="toc-entry toc-h2"><a href="#headerstyle">headerStyle</a></li>
<li class="toc-entry toc-h2"><a href="#height">height</a></li>
<li class="toc-entry toc-h2"><a href="#icons">icons</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>
<li class="toc-entry toc-h2"><a href="#idfield">idField</a></li>
<li class="toc-entry toc-h2"><a href="#ignoreclicktoselecton">ignoreClickToSelectOn</a></li>
<li class="toc-entry toc-h2"><a href="#loadingfontsize">loadingFontSize</a></li>
<li class="toc-entry toc-h2"><a href="#loadingtemplate">loadingTemplate</a></li>
<li class="toc-entry toc-h2"><a href="#locale">locale</a></li>
<li class="toc-entry toc-h2"><a href="#maintainmetadata">maintainMetaData</a></li>
<li class="toc-entry toc-h2"><a href="#method">method</a></li>
<li class="toc-entry toc-h2"><a href="#minimumcountcolumns">minimumCountColumns</a></li>
<li class="toc-entry toc-h2"><a href="#multipleselectrow">multipleSelectRow</a></li>
<li class="toc-entry toc-h2"><a href="#pagelist">pageList</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="#pagination">pagination</a></li>
<li class="toc-entry toc-h2"><a href="#paginationdetailhalign">paginationDetailHAlign</a></li>
<li class="toc-entry toc-h2"><a href="#paginationhalign">paginationHAlign</a></li>
<li class="toc-entry toc-h2"><a href="#paginationloadmore">paginationLoadMore</a></li>
<li class="toc-entry toc-h2"><a href="#paginationloop">paginationLoop</a></li>
<li class="toc-entry toc-h2"><a href="#paginationnexttext">paginationNextText</a></li>
<li class="toc-entry toc-h2"><a href="#paginationpagesbyside">paginationPagesBySide</a></li>
<li class="toc-entry toc-h2"><a href="#paginationparts">paginationParts</a></li>
<li class="toc-entry toc-h2"><a href="#paginationpretext">paginationPreText</a></li>
<li class="toc-entry toc-h2"><a href="#paginationsuccessivelysize">paginationSuccessivelySize</a></li>
<li class="toc-entry toc-h2"><a href="#paginationuseintermediate">paginationUseIntermediate</a></li>
<li class="toc-entry toc-h2"><a href="#paginationvalign">paginationVAlign</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="#regexsearch">regexSearch</a></li>
<li class="toc-entry toc-h2"><a href="#rememberorder">rememberOrder</a></li>
<li class="toc-entry toc-h2"><a href="#responsehandler">responseHandler</a></li>
<li class="toc-entry toc-h2"><a href="#rowattributes">rowAttributes</a></li>
<li class="toc-entry toc-h2"><a href="#rowstyle">rowStyle</a></li>
<li class="toc-entry toc-h2"><a href="#search">search</a></li>
<li class="toc-entry toc-h2"><a href="#searchable">searchable</a></li>
<li class="toc-entry toc-h2"><a href="#searchaccentneutralise">searchAccentNeutralise</a></li>
<li class="toc-entry toc-h2"><a href="#searchalign">searchAlign</a></li>
<li class="toc-entry toc-h2"><a href="#searchhighlight">searchHighlight</a></li>
<li class="toc-entry toc-h2"><a href="#searchonenterkey">searchOnEnterKey</a></li>
<li class="toc-entry toc-h2"><a href="#searchselector">searchSelector</a></li>
<li class="toc-entry toc-h2"><a href="#searchtext">searchText</a></li>
<li class="toc-entry toc-h2"><a href="#searchtimeout">searchTimeOut</a></li>
<li class="toc-entry toc-h2"><a href="#selectitemname">selectItemName</a></li>
<li class="toc-entry toc-h2"><a href="#serversort">serverSort</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="#showcolumns">showColumns</a></li>
<li class="toc-entry toc-h2"><a href="#showcolumnssearch">showColumnsSearch</a></li>
<li class="toc-entry toc-h2"><a href="#showcolumnstoggleall">showColumnsToggleAll</a></li>
<li class="toc-entry toc-h2"><a href="#showextendedpagination">showExtendedPagination</a></li>
<li class="toc-entry toc-h2"><a href="#showfooter">showFooter</a></li>
<li class="toc-entry toc-h2"><a href="#showfullscreen">showFullscreen</a></li>
<li class="toc-entry toc-h2"><a href="#showheader">showHeader</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="#showsearchbutton">showSearchButton</a></li>
<li class="toc-entry toc-h2"><a href="#showsearchclearbutton">showSearchClearButton</a></li>
<li class="toc-entry toc-h2"><a href="#showtoggle">showToggle</a></li>
<li class="toc-entry toc-h2"><a href="#sidepagination">sidePagination</a></li>
<li class="toc-entry toc-h2"><a href="#silentsort">silentSort</a></li>
<li class="toc-entry toc-h2"><a href="#singleselect">singleSelect</a></li>
<li class="toc-entry toc-h2"><a href="#smartdisplay">smartDisplay</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="#sortemptylast">sortEmptyLast</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="#sortreset">sortReset</a></li>
<li class="toc-entry toc-h2"><a href="#sortresetpage">sortResetPage</a></li>
<li class="toc-entry toc-h2"><a href="#sortstable">sortStable</a></li>
<li class="toc-entry toc-h2"><a href="#strictsearch">strictSearch</a></li>
<li class="toc-entry toc-h2"><a href="#theadclasses">theadClasses</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="#totalfield">totalField</a></li>
<li class="toc-entry toc-h2"><a href="#totalnotfiltered">totalNotFiltered</a></li>
<li class="toc-entry toc-h2"><a href="#totalnotfilteredfield">totalNotFilteredField</a></li>
<li class="toc-entry toc-h2"><a href="#totalrows">totalRows</a></li>
<li class="toc-entry toc-h2"><a href="#trimonsearch">trimOnSearch</a></li>
<li class="toc-entry toc-h2"><a href="#undefinedtext">undefinedText</a></li>
<li class="toc-entry toc-h2"><a href="#uniqueid">uniqueId</a></li>
<li class="toc-entry toc-h2"><a href="#url">url</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="#visiblesearch">visibleSearch</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">
          <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
            <a class="btn btn-sm btn-bd-light mb-2 mb-md-0"
              
              href="https://github.com/wenzhixin/bootstrap-table/blob/develop/site/docs/api/table-options.md"
              
              title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
            <h1 class="bd-title" id="content">
              Table Options
            </h1>
          </div>
          <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="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="buttons">buttons</h2>

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

    <p>This option allows creating/adding custom button(s) to the “buttons bar” (top right of the table).
These buttons can be sorted with the table option <a href="https://bootstrap-table.com/docs/api/table-options/#buttonsorder">buttonsOrder</a>, the used key/name for the event should be used for that!</p>

    <p>The custom button is highly configurable, the following options exists:</p>
    <ul>
      <li><code class="highlighter-rouge">text</code>
        <ul>
          <li>Description: This options is used for the <a href="https://bootstrap-table.com/docs/api/table-options/#showbuttontext">showButtonText</a> table option.</li>
          <li>Type: <code class="highlighter-rouge">String</code></li>
        </ul>
      </li>
      <li><code class="highlighter-rouge">icon</code>
        <ul>
          <li>Description: This option is used for the <a href="https://bootstrap-table.com/docs/api/table-options/#showbuttonicons">showButtonIcons</a> table option.</li>
          <li>Type: <code class="highlighter-rouge">String</code> - Only needs the icon class e.g. <code class="highlighter-rouge">fa-users</code></li>
        </ul>
      </li>
      <li><code class="highlighter-rouge">render</code>
        <ul>
          <li>Description: Set this option to <code class="highlighter-rouge">false</code> to hide the button by default, the button is visible again when you add the data attribute <code class="highlighter-rouge">data-show-button-name="true"</code>.</li>
        </ul>
      </li>
      <li><code class="highlighter-rouge">attributes</code>
        <ul>
          <li>Description: This option allows adding additional html attributes e.g. <code class="highlighter-rouge">title</code></li>
          <li>Type: <code class="highlighter-rouge">Object</code></li>
          <li>Example: <code class="highlighter-rouge">{title: 'Button title'}</code></li>
        </ul>
      </li>
      <li><code class="highlighter-rouge">html</code>
        <ul>
          <li>Description: If you don’t want to autogenerate the html, you can use this option to insert your custom html.
The <code class="highlighter-rouge">event</code> option only works if you custom HTML contains <code class="highlighter-rouge">name="button-name"</code>.
If this option is used the following options will be ignored:
            <ul>
              <li><code class="highlighter-rouge">text</code></li>
              <li><code class="highlighter-rouge">icon</code></li>
              <li><code class="highlighter-rouge">attributes</code></li>
            </ul>
          </li>
          <li>Type: <code class="highlighter-rouge">Function|String</code></li>
        </ul>
      </li>
      <li><code class="highlighter-rouge">event</code>
        <ul>
          <li>Description: Should be used if you want to add an event to the button</li>
          <li>Type: <code class="highlighter-rouge">Function|Object|String</code></li>
        </ul>
      </li>
    </ul>

    <p>The <code class="highlighter-rouge">event</code> option can be configured in three ways.
One event with <code class="highlighter-rouge">click</code> event:</p>
    <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span>
  <span class="dl">'</span><span class="s1">event</span><span class="dl">'</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>    </div>

    <p>One event with a self-defined event type:</p>
    <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <span class="p">{</span>
    <span class="dl">'</span><span class="s1">event</span><span class="dl">'</span><span class="p">:</span> <span class="p">{</span>
      <span class="dl">'</span><span class="s1">mouseenter</span><span class="dl">'</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span>
</code></pre></div>    </div>

    <p>Multiple events with self-defined event types:</p>
    <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <span class="p">{</span>
    <span class="dl">'</span><span class="s1">event</span><span class="dl">'</span><span class="p">:</span> <span class="p">{</span>
      <span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="p">},</span>
      <span class="dl">'</span><span class="s1">mouseenter</span><span class="dl">'</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="p">},</span>
      <span class="dl">'</span><span class="s1">mouseleave</span><span class="dl">'</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span>
</code></pre></div>    </div>

    <p><strong>Hint:</strong> Instead of inline functions, you also can use function names.</p>

    <p>A configured custom button could look like this:</p>
    <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span>
  <span class="nl">btnRemoveEvenRows</span><span class="p">:</span> <span class="p">{</span>
    <span class="dl">'</span><span class="s1">text</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Remove even Rows</span><span class="dl">'</span><span class="p">,</span>
    <span class="dl">'</span><span class="s1">icon</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">fa-trash</span><span class="dl">'</span><span class="p">,</span>
    <span class="dl">'</span><span class="s1">event</span><span class="dl">'</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
      <span class="c1">//DO STUFF TO REMOVE EVEN ROWS</span>
    <span class="p">},</span>
    <span class="dl">'</span><span class="s1">attributes</span><span class="dl">'</span><span class="p">:</span> <span class="p">{</span>
      <span class="dl">'</span><span class="s1">title</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Remove all rows which has a even id</span><span class="dl">'</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>    </div>
  </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/buttons.html">Buttons</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="buttonsattributetitle">buttonsAttributeTitle</h2>

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

    <p>Customize the title attribute of the toolbar buttons, which is mainly used to customize the toolbar style.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'title'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/buttons-attribute-title.html">Buttons Attribute Title</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="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 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="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="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="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="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 the check-all checkbox in the 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="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="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 the checkbox or radio box 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="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="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="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 the 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="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-sort.html">Custom Order</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>

    <p>If in the data has <code class="highlighter-rouge">_&lt;field&gt;_rowspan</code> or <code class="highlighter-rouge">_&lt;field&gt;_colspan</code> property, then will merge cells auto, for example:</p>
    <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$table</span><span class="p">.</span><span class="nx">bootstrapTable</span><span class="p">({</span>
  <span class="na">data</span><span class="p">:</span> <span class="p">[</span>
    <span class="p">{</span>
      <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
      <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Item 1</span><span class="dl">'</span><span class="p">,</span>
      <span class="na">_name_rowspan</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span>
      <span class="na">price</span><span class="p">:</span> <span class="dl">'</span><span class="s1">$1</span><span class="dl">'</span>
    <span class="p">},</span>
    <span class="p">{</span>
      <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span>
      <span class="na">price</span><span class="p">:</span> <span class="dl">'</span><span class="s1">$2</span><span class="dl">'</span>
    <span class="p">}</span>
  <span class="p">]</span>
<span class="p">})</span>
</code></pre></div>    </div>
    <p>If using this feature, the <code class="highlighter-rouge">data</code> is required to ensure that the format is correct.</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="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="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="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 allow 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="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="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 a detailed view table. You can set the <code class="highlighter-rouge">uniqueId</code> option to maintain the detail view state when refreshing the 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-unique-id.html">Detail View UniqueId</a></p>
  </li>
</ul>

<h2 id="detailviewalign">detailViewAlign</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-detail-view-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 detail view icon. <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/detail-view-align.html">Detail view Align</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="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="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;, “, <code class="highlighter-rouge">, and ' characters.
To disable it for the column titles check the </code>escapeTitle` option.</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="escapetitle">escapeTitle</h2>

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

    <p>Toggles if the <code class="highlighter-rouge">escape</code> option should be applied to the column titles.</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-escape-title.html">Table Escape title</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 the algorithm, <code class="highlighter-rouge">filterAlgorithm: 'and'</code> means all given filters must match, <code class="highlighter-rouge">filterAlgorithm: 'or'</code> means one of the given filters 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="fixedscroll">fixedScroll</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-fixed-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 the fixed scrollbar position of the table when loading data.</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/fixed-scroll.html">Fixed Scroll</a></p>
  </li>
</ul>

<h2 id="footerfield">footerField</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-footer-field</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 key of the footer Object (From data array or server response JSON).
The footer Object can be used to set/define footer colspan and/or the value of the footer.
Only triggered when <code class="highlighter-rouge">data-pagination</code> is <code class="highlighter-rouge">true</code> and <code class="highlighter-rouge">data-side-pagination</code> is <code class="highlighter-rouge">server</code>.</p>
  </li>
</ul>

<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript">    <span class="p">{</span>
      <span class="dl">"</span><span class="s2">rows</span><span class="dl">"</span><span class="p">:</span> <span class="p">[</span>
        <span class="p">{</span>
          <span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
          <span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Item 0</span><span class="dl">"</span><span class="p">,</span>
          <span class="dl">"</span><span class="s2">price</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">$0</span><span class="dl">"</span><span class="p">,</span>
          <span class="dl">"</span><span class="s2">amount</span><span class="dl">"</span><span class="p">:</span> <span class="mi">3</span>
        <span class="p">}</span>
      <span class="p">],</span>
      <span class="dl">"</span><span class="s2">footer</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
        <span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">footer id</span><span class="dl">"</span><span class="p">,</span>
        <span class="dl">"</span><span class="s2">_id_colspan</span><span class="dl">"</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span>
        <span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">footer name</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">footerField</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/footer-field.html">Footer Field</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="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="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 the table, enables a fixed header of the 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="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="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. By default, this option is automatically calculated by the theme.</p>

    <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span>
  <span class="nl">bootstrap3</span><span class="p">:</span> <span class="dl">'</span><span class="s1">glyphicon</span><span class="dl">'</span><span class="p">,</span>
  <span class="nx">bootstrap4</span><span class="p">:</span> <span class="dl">'</span><span class="s1">fa</span><span class="dl">'</span><span class="p">,</span>
  <span class="nx">bootstrap5</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bi</span><span class="dl">'</span><span class="p">,</span>
  <span class="dl">'</span><span class="s1">bootstrap-table</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">icon</span><span class="dl">'</span><span class="p">,</span>
  <span class="nx">bulma</span><span class="p">:</span> <span class="dl">'</span><span class="s1">fa</span><span class="dl">'</span><span class="p">,</span>
  <span class="nx">foundation</span><span class="p">:</span> <span class="dl">'</span><span class="s1">fa</span><span class="dl">'</span><span class="p">,</span>
  <span class="nx">materialize</span><span class="p">:</span> <span class="dl">'</span><span class="s1">material-icons</span><span class="dl">'</span><span class="p">,</span>
  <span class="nx">semantic</span><span class="p">:</span> <span class="dl">'</span><span class="s1">fa</span><span class="dl">'</span>
<span class="p">}</span>
</code></pre></div>    </div>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">undefined</code></p>
  </li>
  <li><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/icons-prefix.html">Icons Prefix</a>
    <h2 id="idfield">idField</h2>
  </li>
  <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/radio 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><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/id-field.html">Id Field</a></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="loadingfontsize">loadingFontSize</h2>

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

    <p>To define the font size of the loading text, the default value is <code class="highlighter-rouge">'auto'</code>, calculated automatically according to the table width, between 12px and 32px.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">'auto'</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/loading-font-size.html">Loading Font Size</a></p>
  </li>
</ul>

<h2 id="loadingtemplate">loadingTemplate</h2>

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

    <p>To custom the loading type by yourself. The parameters object contain:</p>

    <ul>
      <li>loadingMessage: the <code class="highlighter-rouge">formatLoadingMessage</code> locale.</li>
    </ul>
  </li>
  <li><strong>Default:</strong>
    <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="p">(</span><span class="nx">loadingMessage</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="dl">'</span><span class="s1">&lt;span class="loading-wrap"&gt;</span><span class="dl">'</span> <span class="o">+</span>
    <span class="dl">'</span><span class="s1">&lt;span class="loading-text"&gt;</span><span class="dl">'</span> <span class="o">+</span>
    <span class="nx">loadingMessage</span> <span class="o">+</span>
    <span class="dl">'</span><span class="s1">&lt;/span&gt;</span><span class="dl">'</span> <span class="o">+</span>
    <span class="dl">'</span><span class="s1">&lt;span class="animation-wrap"&gt;&lt;span class="animation-dot"&gt;&lt;/span&gt;&lt;/span&gt;</span><span class="dl">'</span> <span class="o">+</span>
    <span class="dl">'</span><span class="s1">&lt;/span&gt;</span><span class="dl">'</span>
<span class="p">}</span>
</code></pre></div>    </div>
  </li>
  <li><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/loading-template.html">Loading Template</a></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="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 metadata on the 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="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="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 dropdown 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="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 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="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 setting the pagination property, initialize the page size by selecting the 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>

    <p><em>Hint: If the table has lesser rows as the option(s), the options will be hidden automatically. To disable that feature, you can set <a href="https://bootstrap-table.com/docs/api/table-options/#smartdisplay">smartDisplay</a> to <code class="highlighter-rouge">false</code></em></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="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 setting the 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 setting the 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="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 the 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="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="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="paginationloadmore">paginationLoadMore</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-pagination-load-more</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 loading more data through pagination. It is only used in the client-side pagination. In general, to implement the “load more” functionality, it is often necessary to combine it with a <code class="highlighter-rouge">responseHandler</code> to process the returned data.</p>

    <p>It is primarily used in scenarios where the total number of pages is unknown. In such cases, it is not possible to display the exact total count or calculate the total number of pages. Instead, a display format such as “100+” can be utilized to indicate the presence of additional items beyond the displayed count. As the user navigates to the last page, more data is loaded, along with an update to the pagination information. This process continues until all data loading is complete.</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-load-more.html">Pagination Load More</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="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="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="paginationparts">paginationParts</h2>

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

    <p>These options define which parts of the pagination should be visible.</p>
    <ul>
      <li><code class="highlighter-rouge">pageInfo</code> Shows which dataset will be displayed on the current page (e.g. <code class="highlighter-rouge">Showing 1 to 10 of 54 rows</code>).</li>
      <li><code class="highlighter-rouge">pageInfoShort</code> Similar to <code class="highlighter-rouge">pageInfo</code>, it only displays how many rows the table has (e.g. <code class="highlighter-rouge">Showing 54 rows</code>).</li>
      <li><code class="highlighter-rouge">pageSize</code> Shows the dropdown which defines how many rows should be displayed on the page.</li>
      <li><code class="highlighter-rouge">pageList</code> Shows the main part of the pagination (The list of the pages).</li>
    </ul>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">['pageInfo', 'pageSize', 'pageList']</code></p>
  </li>
  <li>
    <p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#options/pagination-parts.html">Pagination Parts</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 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="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="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="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="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="regexsearch">regexSearch</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-regex-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 enable the regex search.
If this option is enabled, you can search with regex, e.g. <code class="highlighter-rouge">[47a]$</code> for all items which end with a <code class="highlighter-rouge">4</code>, <code class="highlighter-rouge">7</code> or <code class="highlighter-rouge">a</code>.
The regex can be entered with <code class="highlighter-rouge">/[47a]$/gim</code> or without <code class="highlighter-rouge">[47a]$</code> flags. The default flags are <code class="highlighter-rouge">gim</code>.</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/regex-search.html">Regex Search</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="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 loading remote data, handle 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 super set 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="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="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="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 three 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>

    <p>Notes:</p>
    <ul>
      <li>If you want to use a custom search input, use the <a href="https://bootstrap-table.com/docs/api/table-options/#searchSelector">searchSelector</a>.</li>
      <li>You can also search via regex using the <a href="https://bootstrap-table.com/docs/api/table-options/#regexSearch">regexSearch</a> option.</li>
      <li>If you want to send searchable params to server-side pagination, use the <a href="https://bootstrap-table.com/docs/api/table-options/#searchable">searchable</a> option.</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="searchable">searchable</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-searchable</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 send <a href="https://bootstrap-table.com/docs/api/column-options/#searchable">searchable params</a> to the server while using server-side pagination.</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/searchable.html">Searchable</a></p>
  </li>
</ul>

<h2 id="searchaccentneutralise">searchAccentNeutralise</h2>

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

    <p>Set to <code class="highlighter-rouge">true</code> if you want to use the accent neutralize feature.</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-accent-neutralise.html">Search Accent Neutralise</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="searchhighlight">searchHighlight</h2>

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

    <p>Set to <code class="highlighter-rouge">true</code> to highlight the searched text (using the <code class="highlighter-rouge">&lt;mark&gt;</code> HTML tag).
You can also define a <a href="https://bootstrap-table.com/docs/api/column-options/#searchhighlightformatter">custom highlight formatter</a>, e.g., for values with HTML or to use a custom highlight color.</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-highlight.html">Search Highlight</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="searchselector">searchSelector</h2>

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

    <p>If this option is set (must be a valid dom selector, e.g. <code class="highlighter-rouge">#customSearch</code>), the found dom element (an <code class="highlighter-rouge">input</code> element) will be used as table search instead of the built-in search input.</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-selector.html">Search Selector</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 setting 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="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="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 the 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="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 on 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="showbuttonicons">showButtonIcons</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-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 them.</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">data-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 text on them.</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="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. The minimum number of selected columns can be controlled with the <a href="/docs/api/table-options/#minimumcountcolumns">minimumCountColumns</a> table option.</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="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 column’s 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="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="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 an extended version of pagination (including the count of all rows without filters).
If you use pagination on the server side, please 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="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="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="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="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="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="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="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 the <code class="highlighter-rouge">'server'</code> side requires 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>

    <p><strong>URL parameters:</strong></p>

    <p>When <code class="highlighter-rouge">sidePagination</code> is set to <code class="highlighter-rouge">server</code>, the bootstrap table will make calls to the <code class="highlighter-rouge">url</code> with the following URL parameters:</p>

    <ul>
      <li><code class="highlighter-rouge">offset</code> with a value between 0 and <code class="highlighter-rouge">total</code> - 1, indicating the first record to include.</li>
      <li><code class="highlighter-rouge">limit</code> with a value indicating the number of rows per page.</li>
    </ul>

    <p>When implementing server-side pagination, you must implement a JSON view in a format like <a href="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">this example</a>. That view must take the URL parameter values indicated above and return records starting at the <code class="highlighter-rouge">offset</code> index and returns the number of records indicated by <code class="highlighter-rouge">limit</code>.  For example, if you want records 11-20, your view must obtain the <code class="highlighter-rouge">offset=10</code> and <code class="highlighter-rouge">limit=10</code> from the URL string and return records like <a href="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?offset=10&amp;limit=10">this example</a>.</p>
  </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="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="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 a 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="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="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 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="sortemptylast">sortEmptyLast</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sort-empty-last</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 sort <code class="highlighter-rouge">&lt;empty string&gt;</code>, <code class="highlighter-rouge">undefined</code> and <code class="highlighter-rouge">null</code> as last value.</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-empty-last.html">Sort Empty Last</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">undefined</code>, <code class="highlighter-rouge">'asc'</code> or <code class="highlighter-rouge">'desc'</code>.</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="sortreset">sortReset</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sort-reset</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 reset the sort on the third click.</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-reset.html">Sort Reset</a></p>
  </li>
</ul>

<h2 id="sortresetpage">sortResetPage</h2>

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-sort-reset-page</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 reset the page number when sorting.</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-reset-page.html">Sort Reset Page</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="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="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> 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="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="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="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 the 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="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 will be 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="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 the 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="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 the 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="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="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 a unique identifier for each row.
The Unique id should always be safe for html e.g. alphanumeric, it should not contain chars which can break html e.g. <code class="highlighter-rouge">"</code>.</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/get-row-by-unique-id.html">getRowByUniqueId</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>

    <p><strong>URL parameters:</strong></p>

    <p>When <code class="highlighter-rouge">sidePagination</code> is set to <code class="highlighter-rouge">server</code>, the bootstrap table will make calls to the <code class="highlighter-rouge">url</code> with the following URL parameters:</p>

    <ul>
      <li><code class="highlighter-rouge">offset</code> with a value between 0 and <code class="highlighter-rouge">total</code> - 1, indicating the first record to include.</li>
      <li><code class="highlighter-rouge">limit</code> with a value indicating the number of rows per page.</li>
    </ul>

    <p>When implementing server-side pagination, you must implement a JSON view in a format like <a href="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">this example</a>. That view must take the URL parameter values indicated above and return records starting at the <code class="highlighter-rouge">offset</code> index and returns the number of records indicated by <code class="highlighter-rouge">limit</code>.  For example, if you want records 11-20, your view must obtain the <code class="highlighter-rouge">offset=10</code> and <code class="highlighter-rouge">limit=10</code> from the URL string and return records like <a href="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?offset=10&amp;limit=10">this example</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/#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="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 display 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 defined, we will use the height of the first item by default.</p>

    <p>It is <strong>important</strong> to provide this if the virtual item height is 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>
</ul>

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

<ul>
  <li>
    <p><strong>Attribute:</strong> <code class="highlighter-rouge">data-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>

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

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></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>