vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
3f382eb764
react-bootstrap-table2/docs/basic-pagination.html
AllenFang c4271176a3 apply new style
2018-10-07 23:30:57 +08:00

30 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Pagination · react-bootstrap-table2</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Pagination · react-bootstrap-table2"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react-bootstrap-table.github.io/react-bootstrap-table2/index.html"/><meta property="og:description" content="`react-bootstrap-table2` separate the pagination code base to [`react-bootstrap-table2-pagination`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-paginator), so there&#x27;s a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table"/><link rel="shortcut icon" href="/react-bootstrap-table2/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://react-bootstrap-table.github.io/blog/atom.xml" title="react-bootstrap-table2 Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://react-bootstrap-table.github.io/blog/feed.xml" title="react-bootstrap-table2 Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/react-bootstrap-table2/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-bootstrap-table2/"><img class="logo" src="/react-bootstrap-table2/img/logo/hybrid-white-large.svg"/></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-bootstrap-table2/docs/about.html" target="_self">Docs</a></li><li><a href="/react-bootstrap-table2/docs/table-props.html" target="_self">API</a></li><li><a href="/react-bootstrap-table2/en/help.html" target="_self">Help</a></li><li><a href="/react-bootstrap-table2/blog" target="_self">Blog</a></li><li><a href="https://github.com/react-bootstrap-table/react-bootstrap-table2" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Basic Usage</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/about.html">About</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/bootstrap4.html">Bootstrap 4</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/migration.html">Migration</a></li></ul></div><div class="navGroup navGroupActive"><h3>Basic Usage</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-row.html">Work on Row</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-column.html">Work on Column</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-sort.html">Table Sort</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-row-select.html">Row Selection</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-filter.html">Column Filter</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-celledit.html">Cell Edit</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/react-bootstrap-table2/docs/basic-pagination.html">Pagination</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-row-expand.html">Expandable Row</a></li></ul></div><div class="navGroup navGroupActive"><h3>Remote Table</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-remote.html">Work on Remote</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/overlay.html">Overlay</a></li></ul></div><div class="navGroup navGroupActive"><h3>Table Toolkits</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/toolkits-getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-search.html">Table Search</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-export-csv.html">Export to CSV</a></li></ul></div><div class="navGroup navGroupActive"><h3>Exposed API</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/exposed-api.html">Introduction</a></li></ul></div></div></section></div><script>
var toggler = document.getElementById('navToggler');
var nav = document.getElementById('docsNav');
toggler.onclick = function() {
nav.classList.toggle('docsSliderActive');
};
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1>Pagination</h1></header><article><div><span><p><code>react-bootstrap-table2</code> separate the pagination code base to <a href="https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-paginator"><code>react-bootstrap-table2-pagination</code></a>, so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table</p>
<p><strong><a href="../storybook/index.html?selectedKind=Pagination">Live Demo For Pagination</a></strong> <br>
<strong><a href="./pagination-props.html">API &amp; Props Definition</a></strong></p>
<hr>
<h2><a class="anchor" aria-hidden="true" name="install"></a><a href="#install" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Install</h2>
<pre><code class="hljs css sh">$ npm install react-bootstrap-table2-paginator --save
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="add-css"></a><a href="#add-css" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Add CSS</h2>
<pre><code class="hljs css js"><span class="hljs-comment">// es5 </span>
<span class="hljs-built_in">require</span>(<span class="hljs-string">'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css'</span>);
<span class="hljs-comment">// es6</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css'</span>;
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="how"></a><a href="#how" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How</h2>
<p>Let's enable a pagination on your table:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> paginationFactory <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-paginator'</span>;
<span class="hljs-comment">// omit...</span>
&lt;BootstrapTable keyField=<span class="hljs-string">'id'</span> data={ products } columns={ columns } pagination={ paginationFactory() } /&gt;
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="customization"></a><a href="#customization" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Customization</h2>
<p>See <a href="./pagination-props.html">pagination props</a></p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="basic-celledit.html">← Cell Edit</a><a class="docs-next button" href="basic-row-expand.html">Expandable Row →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-bootstrap-table2/" class="nav-home"></a><div><h5>Docs</h5><a href="/react-bootstrap-table2/docs/en/getting-started.html">Getting Started</a><a href="/react-bootstrap-table2/docs/en/table-props.html">API References</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/react-bootstrap-table" target="_blank">Stack Overflow</a><a href="https://discordapp.com/">Project Chat</a><a href="https://twitter.com/" target="_blank">Twitter</a></div><div><h5>More</h5><a href="/react-bootstrap-table2/blog/index.html">Blog</a><a href="https://github.com/react-bootstrap-table/react-bootstrap-table2">GitHub</a><a class="github-button" href="https://github.com/react-bootstrap-table/react-bootstrap-table2" data-icon="octicon-star" data-count-href="/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2018 react-bootstrap-table2.</section></footer></div></body></html>
Reference in New Issue View Git Blame Copy Permalink