Angular企業級開發(10)-Smart Table插件開發

1.Smart Table內置的分頁功能

Smart Table是基於AngularJS模塊特性開發出來的一款優秀的表格組件，默認就支持過濾、排序等核心功能。開發者基於它也可以開發插件，滿足個性化需求。比如分頁、排序數據、通過Ajax獲取等。

Smart Table通過Custom Pagination插件可以完成分頁功能：

Custom pagination

運行效果如下：

html代碼結構：

<table st-table="displayed" class="table table-striped" st-table="ctrl.tableDataList" st-pipe="ctrl.getTableData">
            <thead st-search-watch="ctrl.searchObject">
                <tr>
                    <th st-ratio="20" st-sort="firstName">first name</th>
                    <th st-ratio="20" st-sort="lastName">last name</th>
                    <th st-ratio="10" st-sort="age">age</th>
                    <th st-ratio="30" st-sort="email">email</th>
                    <th st-ratio="20" st-sort="balance">balance</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in ctrl.tableDataList">
                    <td st-ratio="20">{{row.firstName}}</td>
                    <td st-ratio="20">{{row.lastName | uppercase}}</td>
                    <td st-ratio="10">{{row.age}}</td>
                    <td st-ratio="30">{{row.email}}</td>
                    <td st-ratio="20">{{row.balance | currency}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" class="text-center">
                        <div st-items-by-page="10" st-pagination=""></div>

                       
                    </td>
                </tr>
            </tfoot>
        </table>

官方默認分頁插件的效果
每頁顯示多少條數數據，通過設置st-items-by-page。其實這個在同一個系統中，這個是一個公共的功能，所有的表格都需要。

2.實際項目需求

• 顯示首頁、上一頁、下一頁、尾頁
• 可以跳轉到特定的頁
• 顯示當前數據第M條-第N條數據
• 顯示表格總條數
• 支持選擇按每頁多少條數據顯示。一般是10，25，50，100四個維度。

3.自定義

基於以上需求，需要開發者自定義插件。

插件主要分三大模塊來完成，分別是：

1. 1-10/12條 每頁顯示下拉[10,25,50,100]條
2. 首頁、上一頁、分頁顯示、下一頁、尾頁
3. 跳轉到特定的頁

步驟1：視圖里面使用了st-idp和st-total-count指令。

<div st-idp st-total-count="ctrl.total"></div>

步驟2：stIdp指令接收1個參數，是stTotalCount。

st-dip.html中相應的html代碼如下：

<div  ng-if="stTotalCount>0"  class="pull-left">{{getFromItemIndex()}}-{{getToItemIndex()}}/{{stTotalCount}}條&nbsp;&nbsp;每頁顯示<select  ng-model="stItemsByPage" ng-options="item for item in [10,25,50,100]" ng-change="displayLengthChange(stItemsByPage)"></select>條</div>'

指令代碼：

 .directive('stIdp', ['stConfig', function (stConfig) {
        //display length
        //information
        //pagination
        return {
            restrict: 'AE',
            require: '^stTable',
            scope: {
                stTotalCount: '='
            },
            templateUrl: 'assets/lib/smart-table/st-idp.html',
            link: function (scope, element, attrs, ctrl) {
                scope.currentPage = 1;
                scope.numPages = 0;
                
                scope.stItemsByPage = scope.stItemsByPage ? +(scope.stItemsByPage) : stConfig.pagination.itemsByPage;

                //頁碼改變時，修改當前頁碼數，和總頁數。
                scope.$watch(function () {
                    return ctrl.tableState().pagination;
                }, function () {
                    scope.currentPage = Math.floor(ctrl.tableState().pagination.start / ctrl.tableState().pagination.number) + 1;
                    scope.numPages = ctrl.tableState().pagination.numberOfPages;
                }, true);


                scope.getFromItemIndex = function () {
                    if (scope.stTotalCount === 0) {
                        return 0;
                    } else {
                        return (scope.currentPage - 1) * scope.stItemsByPage + 1;
                    }

                };

                scope.getToItemIndex = function () {
                    if (scope.stTotalCount === 0) {
                        return 0;

                    } else {
                        return scope.currentPage >= scope.numPages ? scope.stTotalCount : scope.currentPage * scope.stItemsByPage;
                    }
                };

                scope.displayLengthChange = function (stItemsByPage) {
                    scope.stItemsByPage = stItemsByPage
                };

            }
        };
    }])

步驟3：顯示首頁、上一頁、分頁、下一頁和尾頁，以及調整到特定頁

template代碼如下：

'<nav ng-if="pages.length >= 2">',
        '<ul class="pagination">',
        '<li><a style="float:left;" ng-click="selectPage(1)">首頁</a></li>',
        '<li class="previous" ng-class={"disabled":currentPage===1} ng-disabled="currentPage===1"><a ng-click="currentPage===1 || selectPage(currentPage - 1)">上一頁</a></li>',
        '<li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a href="javascript: void(0);" ', 'ng-click="selectPage(page)">{{page}}</a></li>',
        '<li style="float:right;"><span><page-select></page-select> / {{numPages}}頁</span></li>',
        '<li><a style="float:right;" ng-click="selectPage(numPages)">尾頁</a></li>',
        '<li class="next" ng-class="{disabled:currentPage>=numPages}" ng-disabled="currentPage>=numPages"><a ng-click="currentPage===numPages || selectPage(currentPage + 1)" >下一頁</a></li>',
        '</ul>',
        '</nav>'

因為是通過st-template加載的對應視圖，所以在custom-page.html中可以使用Smart Table內置的方法select()。在源碼stPagination.js中有以下代碼：

//view -> table state
        scope.selectPage = function (page) {
          if (page > 0 && page <= scope.numPages) {
            ctrl.slice((page - 1) * scope.stItemsByPage, scope.stItemsByPage);
          }
        };

同時跳轉到特定頁時，我們使用了page-select指令。指令代碼如下:

.directive('pageSelect', function () {
        return {
            restrict: 'E',
            template: '<input type="text" class="select-page" ng-model="inputPage" ng-change="selectPage(inputPage)">',
            link: function (scope, element, attrs) {
                scope.$watch('currentPage', function (c) {
                    scope.inputPage = c;
                });
            }
        }
    });

調用的還是底層的selectPage()方法。

4.總結

通過以上代碼分析，開發者完成了一個smart table plugin的開發，一方面開發者要熟悉smart table原生的分頁邏輯，同時需要了解smart table提供的相應API。

Smart Table

demo代碼