githab
/
bootstrap-table


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
							<!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 Defer URL 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 Defer URL · 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>
          <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 class="active bd-sidenav-active">
          <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="#deferurl">deferUrl</a></li>
</ul>
</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/defer-url.md"
              
              title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
            <h1 class="bd-title" id="content">
              Table Defer URL
            </h1>
          </div>
          <p class="bd-lead">Table Defer URL extension of Bootstrap Table.</p>
          <div id="gg"></div>

          <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/defer-url/bootstrap-table-defer-url.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/defer-url.html">Defer URL</a></p>

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

<h3 id="deferurl">deferUrl</h3>

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

    <p>When using server-side processing, the default mode of operation for bootstrap-table is to simply throw away any data that currently exists in the table and make a request to the server to get the first page of data to display. This is fine for an empty table, but if you already have the first page of data displayed in plain HTML, it is a waste of resources. As such, you can use <code class="highlighter-rouge">deferUrl</code> instead of <code class="highlighter-rouge">url</code> to allow you to instruct bootstrap-table to not make that initial request, rather it will use the data already on the page.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">null</code></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>