Лучший способ сделать нумерацию страниц на переднем конце - PullRequest
Новая
       50

Лучший способ сделать нумерацию страниц на переднем конце

0 голосов
/ 18 марта 2011

У меня есть таблица, в которой есть данные для 30-60 строк.Я хотел бы разбить это на передний конец.По сути, что-то вроде: 

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

jQuery будет оружием для этого, я считаю.Любые хорошие учебники / советы, как это сделать?Что запомнить и т. Д.

Ответы [ 2 ]

0 голосов
/ 10 октября 2016

В angularJ вы можете следовать этому подходу, как мы делаем в Oodles Technologies,

Предположим, что их 3000-4000 единиц, которые вам нужно показать с помощью директивы UI-select.обычно, если вы связываете более 500 записей в окне выбора или в пользовательском интерфейсе, веб-сайт застревает на некоторое время, если вы щелкнете в поле выбора или выберите пользовательский интерфейс, так как решить эту проблему?Чтобы решить эту проблему, вы должны сделать две вещи: - 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>

Сейчасдобавить фильтр limitTo в "ui-select-choices"

Теперь создайте директиву, которая определит, что пользователь достиг нижней части списка. 

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);
                }
            });
        }
    };
});

Позволяет использовать вышеупомянутоедиректива в пользовательском интерфейсе.добавьте 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;
})

Надеюсь, это поможет

0 голосов
/ 18 марта 2011

Если вы хотите сделать все на стороне клиента, этот плагин должен хорошо справиться с задачей: http://tablesorter.com

...