프런트 엔드에서 페이지 매기기를 수행하는 가장 좋은 방법

Question

30-60 행의 데이터가있는 테이블이 있습니다. 프런트 엔드에서 페이지 매김을하고 싶습니다. 기본적으로 다음과 같습니다.

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

jQuery는 내가 믿는이 무기입니다. 좋은 자습서/조언이 작업을 수행하는 방법은 무엇입니까? 무엇을 기억하는 등

Answer 1

클라이언트 측에서 모든 작업을 수행하려면이 플러그인이 아주 잘 트릭을 수행해야합니다 우리가 재밌겠 기술에서와 http://tablesorter.com AngularJS와에서

Answer 2

, 당신은,

을이 방법을 따를 수를

UI 선택 지시문을 사용하여 표시해야하는 3000-4000 개의 엔티티라고 가정합니다. 일반적으로 선택 상자 또는 UI 선택 항목에 500 개 이상의 항목을 바인딩하는 경우 선택 상자 또는 UI 선택을 클릭하면이 문제를 해결하는 방법으로 웹 사이트가 잠시 멈추게됩니까? 중위는 두 가지로이 문제가 당신을 해결하기 위해 : - 경고 컨트롤러는 사용자가 UI에서

매김을 선택

목록의 맨 아래에 도달 1. limitTo 필터 2. 지시

<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 - 선택 - 선택"에서 필터 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에 사용합니다. 지시문 스크롤 검출기를 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; 이것은 (20)에서의 경우 사용자 리치 바닥을 증가시킬 것이다

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

동일한 컨트롤러 loadMore() 함수를 추가 . 사용자가 옆을 클릭하면 currrent 요소를 다시 20로 재설정하려면 ui-select를 사용하십시오. 아래 라인을 사용하여 다시 재설정하십시오. 행 중 일부는 hidded받을 수 있도록

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

은 ..이