githab
/
bootstrap-table


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
							<!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="Table Addrbar extension 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 Addrbar · 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">
    <a class="bd-toc-link" href="/docs/api/table-options/">
      API
    </a>

    <ul class="nav bd-sidenav"><li>
          <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 active">
    <a class="bd-toc-link" href="/docs/extensions/addrbar/">
      Extensions
    </a>

    <ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
          <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="#usage">Usage</a></li>
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#options">Options</a>
<ul>
<li class="toc-entry toc-h3"><a href="#addrbar">addrbar</a></li>
<li class="toc-entry toc-h3"><a href="#addrcustomparams">addrCustomParams</a></li>
<li class="toc-entry toc-h3"><a href="#addrprefix">addrPrefix</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#note">Note</a></li>
</ul>
          </div>
        

        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content extensions" 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/extensions/addrbar.md"
              
              title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
            <h1 class="bd-title" id="content">
              Table Addrbar
            </h1>
          </div>
          <p class="bd-lead">Table Addrbar extension of Bootstrap Table.</p>
          <div id="gg"></div>

          <p>Every time when changing page, sorting and searching operation, it will change the query params of the address bar. And while page loading, this plugin will use the query params in the address bar to make the request.</p>

<h2 id="usage">Usage</h2>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"extensions/addrbar/bootstrap-table-addrbar.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

<h2 id="example">Example</h2>

<p><a href="https://examples.bootstrap-table.com/#extensions/addrbar.html">Addrbar</a></p>

<h2 id="options">Options</h2>

<h3 id="addrbar">addrbar</h3>

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

<h3 id="addrcustomparams">addrCustomParams</h3>

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

    <p>Define an object in which key and value pairs will be added as custom/additional get parameters to the URL, for example, custom filters.
The <code class="highlighter-rouge">key</code> is the GET parameter name, and the <code class="highlighter-rouge">value</code> is the value of the GET parameter.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">{}</code></p>
  </li>
</ul>

<h3 id="addrprefix">addrPrefix</h3>

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

    <p>The prefix of the query params, it should be used for multi tables.</p>

    <p>While there are many tables in one page, and you want each of them can use this, then you may need the <code class="highlighter-rouge">addrPrefix</code> option.</p>

    <p>There are 5 parameters in default. They are</p>

    <ul>
      <li><code class="highlighter-rouge">page</code>: page number</li>
      <li><code class="highlighter-rouge">size</code>: page size</li>
      <li><code class="highlighter-rouge">order</code>: asc/dsc</li>
      <li><code class="highlighter-rouge">sort</code>: the sort keyword</li>
      <li><code class="highlighter-rouge">search</code>: search keyword</li>
    </ul>

    <p>If you want each table can use this plugin, this parameters will make the tables bothering each other. The <code class="highlighter-rouge">addrPrefix</code> filed will get the tables a unique prefix to avoid.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">''</code></p>
  </li>
</ul>

<h2 id="note">Note</h2>

<ul>
  <li>Only support server side pagination.</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>