1

30 ～ 60 行のデータを含むテーブルがあります。これをフロントエンドにページ付けしたいと思います。基本的に次のようなもの：

First 1 2 3 4(<current) 5 6 .. 15(<last page) Last

jQuery は、このための武器になると私は信じています。これを行うための良いチュートリアル/アドバイスはありますか? 覚えておくべきことなど

4

2 に答える 2

0

angularJs では、Ooodles Technologies で行っているように、このアプローチに従うことができます。

UI-select ディレクティブで表示する必要があるエンティティが 3000 ～ 4000 あるとします。通常、選択ボックスまたは UI 選択で 500 を超えるエントリをバインドすると、選択ボックスまたは UI 選択をクリックすると、Web サイトがしばらく動かなくなります。この問題を解決するにはどうすればよいですか? この問題を解決するには、次の 2 つのことを行います。

Ui select のページネーション

<ui-select ng-model="education.clg" name="clg" theme="select2" append-to-body="true" sortable="true"  >
                  <ui-select-match placeholder="Select institution/university">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} >
                                 <div ng-bind-html="college.name | highlight: $select.search"></div>
                  </ui-select-choices>
         </ui-select>

"ui-select-choices" に limitTo フィルターを追加します。

ここで、ユーザーがリストの下に到達したことを判断するディレクティブを作成します。

angular.module('app',[]).directive('scrollDetector', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var raw = element[0];
            element.bind('scroll', function () {
                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                  console.log("end of list");
                    scope.$apply(attrs.scrollDetector);
                }
            });
        }
    };
});

上記のディレクティブを ui-select で使用してみましょう。ディレクティブに scroll-detector=loadMore() を追加

 <ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} >
          <div ng-bind-html="college.name | highlight: $select.search" | limitTo:currentElement" scroll-detector="loadMore()">     </div>
         </ui-select-choices>

ここで、コントローラーの currentElement を初期化します $scope.currentElement=20; 同じコントローラに loadMore() 関数を追加

$scope.loadMore=function(){
  console.log("loadMore");
  $scope.currentElement=$scope.currentElement+20;
}

ユーザーがリストの一番下に到達すると、これは 20 ずつ増加します。現在の要素を 20 にリセットしたい場合は、ユーザーが ui-select の外側をクリックした場合に、以下の行を使用して元に戻します。

var myDiv=angular.element(document.querySelector('#myDiv'));
myDiv.click(function(){
  // reset back to 20
  $scope.currentElement=20;
})

それが役に立てば幸い

于 2016-10-10T11:50:21.803 に答える
0

クライアント側ですべてを行いたい場合は、このプラグインが非常にうまく機能するはずです: http://tablesorter.com

于 2011-03-17T22:54:38.410 に答える