How can implement Lode more...?

ionic-v1
1

Hi All,
How can implement load more??
I have 100 record which is coming from database… and while loading first time i want to display 10 record only. On click of Load More it should load more 10 record(10+10)… and so on…
Can any one help me…??

2

Hi, this is simple example list controller:

angular.module(‘app.Controllers’)
.controller(‘ListController’, function ($scope) {

var m_list;

this.Init = function(list){
            m_list = list;
            $scope.List = m_list.ToArray();
            m_list.Init();
        };

$scope.Refresh = function () {
            m_list.Init()
                .then(function () {
                    return m_list.LoadNextPage()
                })
                .then(function(){
                    $scope.$broadcast(‘scroll.refreshComplete’);
                })
                .catch(function(e){
                    $scope.$broadcast(‘scroll.refreshComplete’);
                    base.Alert(e);
                });
        };
        $scope.CanLoadMore = function(){
            return m_list.CanLoadNextPage();
        };
        $scope.LoadMore = function(){
             m_list.LoadNextPage()
                .then(function(){
                     $scope.$broadcast(‘scroll.infiniteScrollComplete’);
                 })
                .catch(function(e){
                     $scope.$broadcast(‘scroll.infiniteScrollComplete’);
                     base.Alert(e);
                 });
        };
    });

So then I use list class, which has database string and set limit and offset for database:

angular.module(‘app.Data’)
.factory(‘VirtualDbList’, [’$q’, ‘List’, ‘Dictionary’, ‘Class’, ‘Database’, ‘DbSqlQuery’, ‘TypeHelper’, function ($q, List, Dictionary, Class, Database, DbSqlQuery, TypeHelper) {
        var VirtualDbList = function (queryString, columnsTypes, searchBy, filters) {
            List.call(this);
            this.QueryString = queryString;
            this.ColumnTypes = columnsTypes;
            this.SearchBy = searchBy;
            this.Filters = filters;
            this.ActiveFilters = new Dictionary();
            this.SearchString = “”;

this.Limit = 0;
            this.Offset = 0;
            this.IsMore = false;
        };
        Class.Inherit(VirtualDbList, List);

VirtualDbList.prototype.Init = function () {
            this.Clear();
            this.Limit = 50;
            this.Offset = 0;
            this.IsMore = true;

var self = this;
            return Database.Query((new DbSqlQuery(“Settings”).WhereIn(‘Key’, this.Filters.Keys()).Sql))
                .then(function (values) {
                    values.Each(function (index, item) {
                        self.ActiveFilters.Add(this.Filters[index], item)
                    });
                });
        };
        VirtualDbList.prototype.CanLoadNextPage = function(){
            return this.IsMore;
        };
        VirtualDbList.prototype.LoadNextPage = function() {
            var virtualDbList = this;

var query = new DbSqlQuery("").PlainSql(this.QueryString);

if(!TypeHelper.IsEmptyString(this.SearchString))
                query.WhereLike(this.SearchBy, ‘’%’ + this.SearchString + ‘%’’);

this.ActiveFilters.KeyValuePairs().Each(function (index, item) {
                query = query.Where(item.Key + ‘=’ + item.Value);
            });

return Database.MapQuery(query.Take(this.Limit.toString()).Skip(this.Offset.toString()).Sql, this.ColumnTypes)
                .then(function(items){
                    if(items.Count() < virtualDbList.Limit)
                        virtualDbList.IsMore = false;
                    return virtualDbList.OnLoadNext(items)
                        .then(function (items) {
                            virtualDbList.AddRange(items.Collection);
                            virtualDbList.Offset += items.Count();
                        });
                });
        };
        VirtualDbList.prototype.OnLoadNext = function(items){ return $q.when(items); };
        return VirtualDbList;
    }]);

DbSqlQuery is my class for create database queries. If something isn’t clear please ask.

3

Hey,

you need an endpoint of your backend or you have to build a database query that uses limit and something like an offset.
Offset is the skip-value and limit how many items you want to select.

e.g.

  1. request - send offset and limit = 0, 10
  2. request - 10, 10
    …
    and so on
    you can combine that easy with ionics collection-repeat and infinite-scroll.
    If you only uses lists or ng-repeats you dom will explode if you are always putting all items in the dom.
    Collection-repeat solves this problem and shows only visible dom elements.
    And infinite scroll will handle your lazy loading ;).

Greetz, bengtler

4

Thanks for reply… :slight_smile: