{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/navigation/pagination","result":{"data":{"current":{"frontmatter":{"title":"Pagination","order":58,"brief":"The Pager helps users navigate between multiple pages","icon":"doc-pagination"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#disabled","title":"disabled"},{"url":"#show-total-page-number","title":"Show total page number"},{"url":"#specify-current-page-number","title":"Specify current page number"},{"url":"#capacity-switching-per-page","title":"Capacity switching per page"},{"url":"#jump-to-a-page-quickly","title":"Jump to a page quickly"},{"url":"#page-number-controlled","title":"Page number controlled"},{"url":"#preset-capacity-per-page","title":"Preset capacity per page"},{"url":"#mini-version","title":"Mini version"}]},{"url":"#api-reference","title":"API reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 58,\n  \"category\": \"Navigation\",\n  \"title\": \"Pagination\",\n  \"subTitle\": \"Pagination\",\n  \"icon\": \"doc-pagination\",\n  \"width\": \"45%\",\n  \"brief\": \"The Pager helps users navigate between multiple pages\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Pagination } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set the total number via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Total\"), \", Set capacity per page via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pageSize\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={30} style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={80} style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={200} style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={80} pageSize={30} style={{ marginBottom: 12 }}></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"disabled\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Disabled via the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" setting\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=60%\",\n    \"live\": \"true\",\n    \"width\": \"60%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Pagination total={30} disabled style={{ marginBottom: 12 }}></Pagination>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Show total page number\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use the showTotal property to control whether the total number of pages is shown.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showTotal style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={200} showTotal style={{ marginBottom: 12 }}></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Specify current page number\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can specify the currently active page number via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultCurrentPage\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showTotal defaultCurrentPage={3}></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Capacity switching per page\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showSizeChanger\"), \" for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \", allowing quick switching of capacity per page via the Select component\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=50%\",\n    \"live\": \"true\",\n    \"width\": \"50%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showSizeChanger></Pagination>\\n        <br/>\\n        <br/>\\n        <Pagination total={300} showSizeChanger></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Jump to a page quickly\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showQuickJumper\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \", you can enter the page number through the Input control to quickly jump\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When Input loses focus, if there is a valid number in Input, it will jump directly. You can also enter the page number you want to jump to when the Input is focused, and then hit enter to jump directly\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"If you enter a page number greater than the total page number of the pager, we will automatically jump to the last page for you\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"showQuickJumper is available after v1.31  \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=50%\",\n    \"live\": \"true\",\n    \"width\": \"50%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showQuickJumper style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={300} showQuickJumper></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Page number controlled\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"After the currentPage is passed in, the pager is a controlled component and is generally used in conjunction with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onPageChange\"), \". The current active page number depends entirely on the value of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"currentPage\"), \" passed in.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React, { useState } from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [page, setPage] = useState(3);\\n    function onPageChange(currentPage) {\\n        setPage(currentPage);\\n    }\\n    return (\\n        <Pagination\\n            total={200}\\n            currentPage={page}\\n            onPageChange={onPageChange}>\\n        </Pagination>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Preset capacity per page\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Specify an optional value for switching the capacity per page by using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pageSizeOpts\"), \" array\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=50%\",\n    \"live\": \"true\",\n    \"width\": \"50%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination\\n            total={300}\\n            showSizeChanger\\n            pageSizeOpts={[50, 80, 90, 200]}>\\n        </Pagination>\\n        <br/>\\n        <br/>\\n        <Pagination\\n            total={300}\\n            showSizeChanger\\n            pageSizeOpts={[10, 20, 50, 200]}>\\n        </Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Mini version\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Show mini pagination via size properties.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Pagination total={90} size=\\\"small\\\"></Pagination>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Turn on hoverShowPageSelect to quickly switch hover page numbers (provided after v1.27.0)\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=50%\",\n    \"live\": \"true\",\n    \"width\": \"50%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Pagination total={90} size=\\\"small\\\" hoverShowPageSelect></Pagination>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API reference\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The CSS class name of the wrapper element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"currentPage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Current page number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultCurrentPage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default current page number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hideOnSinglePage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to hide the page divider automatically when the total number of pages is less than 2. When showSizeChanger is true, this switch no longer takes effect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.37.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hoverShowPageSelect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to show the page select when hover page (only work when size='small')\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.27.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"nextText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Text displayed by the next Page button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \" React Node\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pageSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Number of entries per page\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pageSizeOpts\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specify how many items are displayed per page\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", \"10, 20, 40, 100\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"popoverPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Floating layer direction, visible \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/show/popover#Use%20with%20Tooltip%20or%20Popconfirm\"\n  }, \"Popover\\xB7API reference\\xB7position\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"bottomLeft\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"popoverZIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Floating layer z-index value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1030\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prevText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Text displayed by the previous Page button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \" React Node\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Size, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'default'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Inline style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showSizeChanger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to show a selector to switch the capacity of each page\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showQuickJumper\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to show a input to type the page number, supported after v1.31\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.31.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showTotal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to show total page number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"total\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Total number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The callback function when page number or capacity per page changes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(currentPage: number, pageSize: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPageChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A callback function for page number changes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(currentPage: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPageSize Change\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback function when capacity changes per page\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(pageSize: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \": Labels the element such as previous, next, pages in the pagination.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-current\"), \": Indicates the current page.\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Why is the page drop-down selector only \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"1,000,000\"), \" at most\\uFF1F\"), mdx(\"br\", {\n    parentName: \"li\"\n  }), \"Because when creating lists, the browser has \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length\"\n  }, \"restrictions\"), \" on the size of Array.from () to create arrays; At the same time, in order to take into account the overhead of Array.from(), we set the threshold of \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"1,000,000\"), \".\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/navigation/pagination","next":{"fields":{"slug":"zh-CN/navigation/pagination"},"id":"0e3535ce-827f-5939-86c8-98f4f072d4be","frontmatter":{"title":"Pagination 翻页器","localeCode":"zh-CN","icon":"doc-pagination","showNew":null}},"previous":{"fields":{"slug":"zh-CN/navigation/navigation"},"id":"b8f83dc4-9ea9-5c29-94be-91f4102545e7","frontmatter":{"title":"Navigation 导航","localeCode":"zh-CN","icon":"doc-navigation","showNew":null}}}},"staticQueryHashes":["1348983216308087","1477422646308087","3245198693308087","417590761308087","63159454308087"]}