AngularJS ng-table tiêu đề cố định

Question

Tôi đang sử dụng ng-table để hiển thị một số thông tin. Tôi muốn làm cho đầu trang và chân trang của bảng ng cố định và buộc bảng ng để vẽ các thanh cuộn trong các hàng.

Trang web tài liệu ng-table không có tài liệu hướng dẫn về cách thực hiện điều đó.

Bất kỳ ý tưởng nào?

Answer 1

Tôi không biết về chân trang nhưng tôi có yêu cầu tương tự cho tiêu đề.

này được yêu cầu trước khi @ Github: https://github.com/esvit/ng-table/issues/41

tôi đã thực hiện của riêng tôi sử dụng một plugin jquery (https://github.com/jmosbech/StickyTableHeaders).

Có một plunkr đây: http://plnkr.co/edit/KyilXo?p=preview

Về cơ bản, chúng tôi chỉ cần gọi các plugin trong chỉ thị data-fixed-table-headers khi dữ liệu đã được trả lại.

angular.module('main').directive('fixedTableHeaders', ['$timeout', fixedTableHeaders]); 

    function fixedTableHeaders($timeout) { 
     return { 
      restrict: 'A', 
      link: link 
     }; 

     function link(scope, element, attrs) { 

      $timeout(function() { 
       element.stickyTableHeaders(); 
        }, 0); 
     } 
    } 

Answer 2

Đó là giải pháp đáng tin cậy nhất mà tôi đã tìm thấy. Và tôi đã tìm kiếm hàng giờ trước khi quyết định sử dụng một plugin jQuery. Trong phiên bản của plugin mà tôi đang sử dụng, chúng tôi có thể dán tiêu đề vào vùng chứa có thể cuộn. Hãy xem plunker này cho một trường hợp sử dụng với ng-bảng:

http://plnkr.co/edit/ypBaDHIfaJWapXVs3jcU?p=preview

Javascript

app.directive('fixedTableHeaders', ['$timeout', function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $timeout(function() { 
      var container = element.parentsUntil(attrs.fixedTableHeaders); 
      element.stickyTableHeaders({ scrollableArea: container, "fixedOffset": 2 }); 
     }, 0); 
    } 
    } 
}]); 

HTML

<div id="scrollable-area"> 
     <table ng-table="tableParams" fixed-table-headers="scrollable-area"> 
     <tr ng-repeat="user in $data"> 
      <td data-title="'Name'">{{user.name}}</td> 
      <td data-title="'Age'">{{user.age}}</td> 
     </tr> 
     </table> 
</div> 

CSS

#scrollable-area { 
    height: 150px; 
    overflow-y: scroll; /* <-- here is what is important*/ 
} 
table { 
    width: 100%; 
} 
thead { 
    background: #fff; 
} 

Answer 3

giải pháp chỉ CSS này làm việc cho tôi. Chỉ cần thêm lớp table-scroll vào phần tử bảng và CSS sau:

.table-scroll thead { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 

.table-scroll tbody { 
    max-height: 150px; 
    overflow-y: auto; 
    display: block; 
    width: 100%; 
    table-layout: fixed; 
} 

.table-scroll tr { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

.table-scroll td { 
    height: 47px; // needed in order to keep rows from collapsing 
}