feat(pagination): 新增分页总数

Imshann
1 parent 061629e7
Showing 7 changed files with 55 additions and 8 deletions Show diff stats
build/Pagination/Pagination.html
build/Pagination/Pagination.js
dist/ng-antd.js
example/pagination.html
src/Pagination/Pagination.html
src/Pagination/Pagination.js
webpack.config.js
 <ul ng-class="'ant-pagination'+(size==='small'?' mini':'')">
+    <li class="ant-pagination-total-text" ng-if="showTotal()">{{handleShowTotal()}}</li>
     <li ng-class="'ant-pagination-prev'+(state.current===1?' ant-pagination-disabled':'')" ng-click="handlePrev()">
         <button type="button" class="ant-pagination-item-link">
             <es-icon type="LeftOutlined"></es-icon>
@@ -17,6 +17,7 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;esPagination&quot;, function (esNgAntd) {
             showQuickJumper: "@",
             showSizeChanger: "@",
             size: "@",
+            showTotal: "&",
         },
         template: template,
         controller: function ($scope, $element, $attrs) {
@@ -31,6 +32,25 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;esPagination&quot;, function (esNgAntd) {
                 pageNum: null,
                 pageNumList: null,
             };
+            $scope.watch = {
+                total: function (newVal, oldVal) {
+                    if (newVal && oldVal) {
+                        $scope.state.total = Number(newVal);
+                        $scope.state.pageNum = $scope.getPageNum();
+                        $scope.state.pageNumList = $scope.getPageNumList();
+                    }
+                },
+            };
+
+            for (const key in $scope.watch) {
+                $scope.$watch(key, $scope.watch[key], true);
+            }
+
+            $scope.handleShowTotal = function () {
+                return $scope.showTotal({
+                    total: $scope.state.total,
+                });
+            };
             $scope.getItemLinkClassName = function (value) {
                 if (typeof value === "number") {
@@ -137,7 +137,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Form_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Form.html */ \"./build/Form/Form.html\");\n/* harmony import */ var antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/form/style/index.css */ \"./node_modules/antd/lib/form/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"esForm\", function (esNgAntd) {\n    return {\n        controllerAs: \"esForm\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            name: \"@\",\n            labelCol: \"=\",\n            wrapperCol: \"=\",\n            onFinish: \"&\",\n            form: \"=\",\n        },\n        template: _Form_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                formItems: [],\n            };\n\n            $scope.resetFields = function () {\n                $scope.state.formItems.forEach(function (item) {\n                    if (typeof item.setValue === \"function\") {\n                        item.setValue(item.defaultValue || null);\n                    } else {\n                        item.value = null;\n                    }\n                });\n            };\n\n            $scope.handleSubmit = function () {\n                let values = {};\n                $scope.state.formItems.forEach(function (item) {\n                    let name = item.esFormItem && item.esFormItem.name;\n                    let value = item.value || item.state.value || null;\n                    values[name] = value;\n                }); // for (let i = 0; i < inputs.length; i++) {\n                //     const element = inputs[i];\n                //     const value = element.value === \"\" ? null : element.value;\n                //     if (element.id) {\n                //         if (element.id.split(\"_\").length > 1) {\n                //             values[element.id.split(\"_\")[1]] = value;\n                //         } else {\n                //             values[element.id] = value;\n                //         }\n                //     }\n                // }\n\n                $scope.onFinish({\n                    values: values,\n                });\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            esNgAntd.createStyle(\"ant-form\", antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n            $scope.form = $scope;\n\n            if ($scope.name) {\n                let inputs = $element[0].querySelectorAll(\"input\");\n\n                for (let i = 0; i < inputs.length; i++) {\n                    const element = inputs[i];\n                    element.id = $scope.name + \"_\" + element.id;\n                }\n            }\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Form/Form.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Form_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Form.html */ \"./build/Form/Form.html\");\n/* harmony import */ var antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/form/style/index.css */ \"./node_modules/antd/lib/form/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"esForm\", function (esNgAntd) {\n    return {\n        controllerAs: \"esForm\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            name: \"@\",\n            labelCol: \"=\",\n            wrapperCol: \"=\",\n            onFinish: \"&\",\n            form: \"=\",\n        },\n        template: _Form_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element, $attrs) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                formItems: [],\n            };\n\n            $scope.resetFields = function () {\n                $scope.state.formItems.forEach(function (item) {\n                    if (typeof item.setValue === \"function\") {\n                        item.setValue(item.defaultValue || null);\n                    } else {\n                        item.value = null;\n                    }\n                });\n            };\n\n            $scope.submit = function () {\n                $scope.handleSubmit();\n            };\n\n            $scope.handleSubmit = function () {\n                let values = {};\n                $scope.state.formItems.forEach(function (item) {\n                    let name = item.esFormItem && item.esFormItem.name;\n                    let value = item.value || item.state.value || null;\n                    values[name] = value;\n                });\n                $scope.onFinish({\n                    values: values,\n                });\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            esNgAntd.createStyle(\"ant-form\", antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n            $scope.form = $scope;\n\n            if ($scope.name) {\n                let inputs = $element[0].querySelectorAll(\"input\");\n\n                for (let i = 0; i < inputs.length; i++) {\n                    const element = inputs[i];\n                    element.id = $scope.name + \"_\" + element.id;\n                }\n            }\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Form/Form.js?");
 /***/ }),
@@ -280,7 +280,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Mod
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pagination_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination.html */ \"./build/Pagination/Pagination.html\");\n/* harmony import */ var antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/pagination/style/index.css */ \"./node_modules/antd/lib/pagination/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"esPagination\", function (esNgAntd) {\n    return {\n        controllerAs: \"esPagination\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            defaultCurrent: \"@\",\n            current: \"@\",\n            total: \"@\",\n            defaultPageSize: \"@\",\n            pageSize: \"@\",\n            onChange: \"&\",\n            onShowSizeChange: \"&\",\n            showQuickJumper: \"@\",\n            showSizeChanger: \"@\",\n            size: \"@\",\n        },\n        template: _Pagination_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element, $attrs) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                total: null,\n                current: null,\n                pageSize: null,\n                pageNum: null,\n                pageNumList: null,\n            };\n\n            $scope.getItemLinkClassName = function (value) {\n                if (typeof value === \"number\") {\n                    return (\n                        \"ant-pagination-item\" +\n                        ($scope.state.current === value\n                            ? \" ant-pagination-item-active\"\n                            : \"\")\n                    );\n                } else {\n                    return \"ant-pagination-jump-next ant-pagination-jump-next-custom-icon\";\n                }\n            };\n\n            $scope.getPageNumList = function () {\n                let pageNumList = [$scope.state.current];\n                let pageNum = $scope.getPageNum();\n\n                if (pageNum <= 7 || $scope.state.current - 1 < 4) {\n                    for (let i = $scope.state.current - 1; i > 0; i--) {\n                        pageNumList.unshift(i);\n                    }\n                } else {\n                    let len =\n                        $scope.state.current - 1 > 2\n                            ? 2\n                            : $scope.state.current - 1;\n\n                    for (let i = 1; i <= len; i++) {\n                        pageNumList.unshift($scope.state.current - i);\n                    }\n\n                    if ($scope.state.current - 2 > 2) {\n                        pageNumList.unshift(\"prev\");\n                        pageNumList.unshift(1);\n                    }\n                }\n\n                if (pageNum <= 7 || pageNum - $scope.state.current < 4) {\n                    for (let i = $scope.state.current + 1; i <= pageNum; i++) {\n                        pageNumList.push(i);\n                    }\n                } else {\n                    let limit =\n                        3 - $scope.state.current > 0\n                            ? 2 + (3 - $scope.state.current)\n                            : 2;\n                    let len =\n                        pageNum - $scope.state.current > limit\n                            ? limit\n                            : pageNum - $scope.state.current;\n\n                    for (let i = 1; i <= len; i++) {\n                        pageNumList.push($scope.state.current + i);\n                    }\n\n                    if (pageNum - $scope.state.current > 2) {\n                        pageNumList.push(\"next\");\n                        pageNumList.push(pageNum);\n                    }\n                }\n\n                return pageNumList;\n            };\n\n            $scope.getPageNum = function () {\n                return (\n                    Math.ceil(\n                        $scope.state.total /\n                            ($scope.pageSize || $scope.defaultPageSize || 10)\n                    ) || 1\n                );\n            };\n\n            $scope.getPopupContainer = function () {\n                return $element[0].querySelector(\".ant-pagination-options\");\n            };\n\n            $scope.handleNext = function () {\n                if ($scope.state.current === $scope.state.pageNum) {\n                    return false;\n                }\n\n                $scope.handleClick(++$scope.state.current);\n            };\n\n            $scope.handlePrev = function () {\n                if ($scope.state.current === 1) {\n                    return false;\n                }\n\n                $scope.handleClick(--$scope.state.current);\n            };\n\n            $scope.handleClick = function (value) {\n                if (value === \"next\") {\n                    value = $scope.state.current + 5;\n                }\n\n                if (value === \"prev\") {\n                    value = $scope.state.current - 5;\n                }\n\n                $scope.setCurrent($scope.getCurrent(value)); // 更新回调\n\n                $scope.onChange({\n                    page: $scope.state.current,\n                    pageSize: $scope.state.pageSize,\n                });\n            };\n\n            $scope.handleChange = function () {\n                let current = $scope.state.current;\n\n                if ($scope.state.current > $scope.state.pageNum) {\n                    current = $scope.state.pageNum;\n                } else if ($scope.state.current < 1) {\n                    current = 1;\n                }\n\n                $scope.onChange({\n                    page: current,\n                    pageSize: $scope.state.pageSize,\n                });\n            };\n\n            $scope.handleSelectChange = function (value) {\n                $scope.state.current = 1;\n                $scope.state.pageSize = parseInt(value);\n                $scope.handleChange();\n            };\n\n            $scope.getCurrent = function (number) {\n                if (number > $scope.state.pageNum) {\n                    return $scope.state.pageNum;\n                }\n\n                if (number < 1) {\n                    return 1;\n                }\n\n                return parseInt(number);\n            };\n\n            $scope.setCurrent = function (value) {\n                if (!value) {\n                    return;\n                }\n\n                $scope.state.current = $scope.getCurrent(value);\n                $scope.state.pageNumList = $scope.getPageNumList();\n                $scope.handleChange();\n            };\n\n            $scope.handleBlur = function (event) {\n                $scope.setCurrent(event.target.value);\n                event.target.value = null;\n            };\n\n            $scope.onKeyPress = function (event) {\n                if (event.keyCode === 13 || event.keyCode === 32) {\n                    $scope.setCurrent(event.target.value);\n                    event.target.value = null;\n                }\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            esNgAntd.createStyle(\"ant-pagination\", antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n            $scope.state.total = Number($scope.total || 0);\n            $scope.state.current = Number(\n                $scope.current || $scope.defaultCurrent || 1\n            );\n            $scope.state.pageSize =\n                $scope.pageSize || $scope.defaultPageSize || 10;\n            $scope.state.pageNum = $scope.getPageNum();\n            $scope.state.pageNumList = $scope.getPageNumList();\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pagination_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination.html */ \"./build/Pagination/Pagination.html\");\n/* harmony import */ var antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/pagination/style/index.css */ \"./node_modules/antd/lib/pagination/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"esPagination\", function (esNgAntd) {\n    return {\n        controllerAs: \"esPagination\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            defaultCurrent: \"@\",\n            current: \"@\",\n            total: \"@\",\n            defaultPageSize: \"@\",\n            pageSize: \"@\",\n            onChange: \"&\",\n            onShowSizeChange: \"&\",\n            showQuickJumper: \"@\",\n            showSizeChanger: \"@\",\n            size: \"@\",\n            showTotal: \"&\",\n        },\n        template: _Pagination_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element, $attrs) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                total: null,\n                current: null,\n                pageSize: null,\n                pageNum: null,\n                pageNumList: null,\n            };\n            $scope.watch = {\n                total: function (newVal, oldVal) {\n                    if (newVal && oldVal) {\n                        $scope.state.total = Number(newVal);\n                        $scope.state.pageNum = $scope.getPageNum();\n                        $scope.state.pageNumList = $scope.getPageNumList();\n                    }\n                },\n            };\n\n            for (const key in $scope.watch) {\n                $scope.$watch(key, $scope.watch[key], true);\n            }\n\n            $scope.handleShowTotal = function () {\n                return $scope.showTotal({\n                    total: $scope.state.total,\n                });\n            };\n\n            $scope.getItemLinkClassName = function (value) {\n                if (typeof value === \"number\") {\n                    return (\n                        \"ant-pagination-item\" +\n                        ($scope.state.current === value\n                            ? \" ant-pagination-item-active\"\n                            : \"\")\n                    );\n                } else {\n                    return \"ant-pagination-jump-next ant-pagination-jump-next-custom-icon\";\n                }\n            };\n\n            $scope.getPageNumList = function () {\n                let pageNumList = [$scope.state.current];\n                let pageNum = $scope.getPageNum();\n\n                if (pageNum <= 7 || $scope.state.current - 1 < 4) {\n                    for (let i = $scope.state.current - 1; i > 0; i--) {\n                        pageNumList.unshift(i);\n                    }\n                } else {\n                    let len =\n                        $scope.state.current - 1 > 2\n                            ? 2\n                            : $scope.state.current - 1;\n\n                    for (let i = 1; i <= len; i++) {\n                        pageNumList.unshift($scope.state.current - i);\n                    }\n\n                    if ($scope.state.current - 2 > 2) {\n                        pageNumList.unshift(\"prev\");\n                        pageNumList.unshift(1);\n                    }\n                }\n\n                if (pageNum <= 7 || pageNum - $scope.state.current < 4) {\n                    for (let i = $scope.state.current + 1; i <= pageNum; i++) {\n                        pageNumList.push(i);\n                    }\n                } else {\n                    let limit =\n                        3 - $scope.state.current > 0\n                            ? 2 + (3 - $scope.state.current)\n                            : 2;\n                    let len =\n                        pageNum - $scope.state.current > limit\n                            ? limit\n                            : pageNum - $scope.state.current;\n\n                    for (let i = 1; i <= len; i++) {\n                        pageNumList.push($scope.state.current + i);\n                    }\n\n                    if (pageNum - $scope.state.current > 2) {\n                        pageNumList.push(\"next\");\n                        pageNumList.push(pageNum);\n                    }\n                }\n\n                return pageNumList;\n            };\n\n            $scope.getPageNum = function () {\n                return (\n                    Math.ceil(\n                        $scope.state.total /\n                            ($scope.pageSize || $scope.defaultPageSize || 10)\n                    ) || 1\n                );\n            };\n\n            $scope.getPopupContainer = function () {\n                return $element[0].querySelector(\".ant-pagination-options\");\n            };\n\n            $scope.handleNext = function () {\n                if ($scope.state.current === $scope.state.pageNum) {\n                    return false;\n                }\n\n                $scope.handleClick(++$scope.state.current);\n            };\n\n            $scope.handlePrev = function () {\n                if ($scope.state.current === 1) {\n                    return false;\n                }\n\n                $scope.handleClick(--$scope.state.current);\n            };\n\n            $scope.handleClick = function (value) {\n                if (value === \"next\") {\n                    value = $scope.state.current + 5;\n                }\n\n                if (value === \"prev\") {\n                    value = $scope.state.current - 5;\n                }\n\n                $scope.setCurrent($scope.getCurrent(value)); // 更新回调\n\n                $scope.onChange({\n                    page: $scope.state.current,\n                    pageSize: $scope.state.pageSize,\n                });\n            };\n\n            $scope.handleChange = function () {\n                let current = $scope.state.current;\n\n                if ($scope.state.current > $scope.state.pageNum) {\n                    current = $scope.state.pageNum;\n                } else if ($scope.state.current < 1) {\n                    current = 1;\n                }\n\n                $scope.onChange({\n                    page: current,\n                    pageSize: $scope.state.pageSize,\n                });\n            };\n\n            $scope.handleSelectChange = function (value) {\n                $scope.state.current = 1;\n                $scope.state.pageSize = parseInt(value);\n                $scope.handleChange();\n            };\n\n            $scope.getCurrent = function (number) {\n                if (number > $scope.state.pageNum) {\n                    return $scope.state.pageNum;\n                }\n\n                if (number < 1) {\n                    return 1;\n                }\n\n                return parseInt(number);\n            };\n\n            $scope.setCurrent = function (value) {\n                if (!value) {\n                    return;\n                }\n\n                $scope.state.current = $scope.getCurrent(value);\n                $scope.state.pageNumList = $scope.getPageNumList();\n                $scope.handleChange();\n            };\n\n            $scope.handleBlur = function (event) {\n                $scope.setCurrent(event.target.value);\n                event.target.value = null;\n            };\n\n            $scope.onKeyPress = function (event) {\n                if (event.keyCode === 13 || event.keyCode === 32) {\n                    $scope.setCurrent(event.target.value);\n                    event.target.value = null;\n                }\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            esNgAntd.createStyle(\"ant-pagination\", antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n            $scope.state.total = Number($scope.total || 0);\n            $scope.state.current = Number(\n                $scope.current || $scope.defaultCurrent || 1\n            );\n            $scope.state.pageSize =\n                $scope.pageSize || $scope.defaultPageSize || 10;\n            $scope.state.pageNum = $scope.getPageNum();\n            $scope.state.pageNumList = $scope.getPageNumList();\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.js?");
 /***/ }),
@@ -9617,7 +9617,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<ul ng-class=\\\"'ant-pagination'+(size==='small'?' mini':'')\\\">\\n    <li ng-class=\\"'ant-pagination-prev'+(state.current===1?' ant-pagination-disabled':'')\\" ng-click=\\"handlePrev()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"LeftOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li ng-repeat=\\"(key, value) in state.pageNumList track by key\\" ng-class=\\"''+getItemLinkClassName(value)\\" ng-click=\\"handleClick(value)\\">\n            <a ng-if=\\"value!=='prev'&&value!=='next'\\">{{value}}</a>\n            <a ng-if=\\"value==='prev'||value==='next'\\" class=\\"ant-pagination-item-link\\">\n                <div class=\\"ant-pagination-item-container\\">\n                    <es-icon ng-if=\\"value==='prev'\\" type=\\"DoubleLeftOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <es-icon ng-if=\\"value==='next'\\" type=\\"DoubleRightOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <span class=\\"ant-pagination-item-ellipsis\\">•••</span>\n                </div>\n            </a>\n        </li>\n    <li ng-class=\\"'ant-pagination-next'+(state.current===state.pageNum?' ant-pagination-disabled':'')\\" ng-click=\\"handleNext()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"RightOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li class=\\"ant-pagination-options\\">\n        <es-select ng-if=\\"showSizeChanger==='true'\\" class=\\"ant-pagination-options-size-changer\\" size=\\"{{size}}\\" value=\\"10\\" get-popup-container=\\"getPopupContainer\\" on-change=\\"handleSelectChange(value)\\">\n            <es-select-option value=\\"10\\">10 条/页</es-select-option>\n            <es-select-option value=\\"20\\">20 条/页</es-select-option>\n            <es-select-option value=\\"30\\">30 条/页</es-select-option>\n            <es-select-option value=\\"40\\">40 条/页</es-select-option>\n        </es-select>\n        <div ng-if=\\"showQuickJumper==='true'\\" class=\\"ant-pagination-options-quick-jumper\\">\n            跳至<input type=\\"text\\" ng-blur=\\"handleBlur($event)\\" ng-keypress=\\"onKeyPress($event)\\" />页\n        </div>\n    </li>\n</ul>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<ul ng-class=\\\"'ant-pagination'+(size==='small'?' mini':'')\\\">\\n    <li class=\\\"ant-pagination-total-text\\\" ng-if=\\\"showTotal()\\\">{{handleShowTotal()}}</li>\\n    <li ng-class=\\"'ant-pagination-prev'+(state.current===1?' ant-pagination-disabled':'')\\" ng-click=\\"handlePrev()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"LeftOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li ng-repeat=\\"(key, value) in state.pageNumList track by key\\" ng-class=\\"''+getItemLinkClassName(value)\\" ng-click=\\"handleClick(value)\\">\n            <a ng-if=\\"value!=='prev'&&value!=='next'\\">{{value}}</a>\n            <a ng-if=\\"value==='prev'||value==='next'\\" class=\\"ant-pagination-item-link\\">\n                <div class=\\"ant-pagination-item-container\\">\n                    <es-icon ng-if=\\"value==='prev'\\" type=\\"DoubleLeftOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <es-icon ng-if=\\"value==='next'\\" type=\\"DoubleRightOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <span class=\\"ant-pagination-item-ellipsis\\">•••</span>\n                </div>\n            </a>\n        </li>\n    <li ng-class=\\"'ant-pagination-next'+(state.current===state.pageNum?' ant-pagination-disabled':'')\\" ng-click=\\"handleNext()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"RightOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li class=\\"ant-pagination-options\\">\n        <es-select ng-if=\\"showSizeChanger==='true'\\" class=\\"ant-pagination-options-size-changer\\" size=\\"{{size}}\\" value=\\"10\\" get-popup-container=\\"getPopupContainer\\" on-change=\\"handleSelectChange(value)\\">\n            <es-select-option value=\\"10\\">10 条/页</es-select-option>\n            <es-select-option value=\\"20\\">20 条/页</es-select-option>\n            <es-select-option value=\\"30\\">30 条/页</es-select-option>\n            <es-select-option value=\\"40\\">40 条/页</es-select-option>\n        </es-select>\n        <div ng-if=\\"showQuickJumper==='true'\\" class=\\"ant-pagination-options-quick-jumper\\">\n            跳至<input type=\\"text\\" ng-blur=\\"handleBlur($event)\\" ng-keypress=\\"onKeyPress($event)\\" />页\n        </div>\n    </li>\n</ul>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?");
 /***/ }),
@@ -9,7 +9,8 @@
 <body>
     <div ng-app="esNgAntd" ng-controller="mainCtrl">
         <div class="container" style="padding: 50px">
-            <es-pagination default-current="1" total="1" on-change="handleChange(page, pageSize)" show-quick-jumper="true" show-size-changer="true"></es-pagination>
+            <es-pagination default-current="1" total="{{total}}" on-change="handleChange(page, pageSize)"
+                show-quick-jumper="true" show-size-changer="true" show-total="showTotal(total)"></es-pagination>
             <!-- <es-pagination size="small" default-current="1" total="50" on-change="handleChange(page, pageSize)" show-quick-jumper="true" show-size-changer="true"></es-pagination> -->
         </div>
     </div>
@@ -18,10 +19,17 @@
     <script>
         angular
             .module("esNgAntd")
-            .controller("mainCtrl", function ($scope) {
+            .controller("mainCtrl", function ($scope, $timeout) {
+                $scope.total = 1;
                 $scope.handleChange = function (page, pageSize) {
                     console.log(page, pageSize)
                 }
+                $scope.showTotal = function (total) {
+                    return `Total ${total} items`;
+                }
+                $timeout(()=>{
+                    $scope.total = 80
+                }, 2000)
             });
     </script>
 </body>
-<ul className={"ant-pagination"+(size==="small"?" mini": "")}>
+<ul className={"ant-pagination" + (size === "small" ? " mini" : "")}>
+    <li className="ant-pagination-total-text" ng-if="showTotal()">{handleShowTotal()}</li>
     <li className={"ant-pagination-prev" + (state.current === 1 ? " ant-pagination-disabled" : "")} onClick={this.handlePrev}>
         <button type="button" class="ant-pagination-item-link">
             <es-icon type="LeftOutlined"></es-icon>
@@ -17,6 +17,7 @@ class Pagination {
         showQuickJumper: Boolean,
         showSizeChanger: Boolean,
         size: String,
+        showTotal: Function,
     };
     state = {
@@ -27,6 +28,16 @@ class Pagination {
         pageNumList: null,
     };
+    watch = {
+        total: function (newVal, oldVal) {
+            if (newVal && oldVal) {
+                this.state.total = Number(newVal);
+                this.state.pageNum = this.getPageNum();
+                this.state.pageNumList = this.getPageNumList();
+            }
+        }
+    }
+
     constructor() {
         esNgAntd.createStyle("ant-pagination", style);
         this.state.total = Number(this.props.total || 0);
@@ -39,6 +50,12 @@ class Pagination {
         this.state.pageNumList = this.getPageNumList();
     }
+    handleShowTotal() {
+        return this.props.showTotal({
+            total: this.state.total
+        })
+    }
+
     getItemLinkClassName(value) {
         if (typeof value === "number") {
             return (
@@ -8,11 +8,11 @@ module.exports = {
         // bpms
         // path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
         // boss
-        path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
+        // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
         // mvo
         // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
         // local
-        // path: path.resolve(__dirname, "dist"),
+        path: path.resolve(__dirname, "dist"),
         filename: "ng-antd.js",
     },
     module: {