custom-dataview.js

;(function ( $, window, undefined ) {
    /*
        Handle data layer of the tables.
    */
    var CustomDataView = function(options) {
        $.extend(this.defaults, options);
    }

    CustomDataView.prototype = {
        data: {}
        , filters: {}
        , defaults: {
            url: null
            , limit: 20 // Fetch {number} item per request
            , order_by: null
        }
        , onDataLoading: new Slick.Event()
        , onDataLoaded: new Slick.Event()
        , getItem:function(index) {
            return this.data.objects[index];
        }
        , getLength: function() {
            if (!this.data.objects) return 0;

            return this.data.meta.total_count;
        }
        , getItemMetadata: function(index) {
            return null;
        }
        , setFilters: function(filters) {
            this.filters = filters;
        }
        , clear: function() {
            this.data = {};
        }
        , loadData: function(offset, limit) {
            var that = this;
            var requestData = $.extend(
                {offset:offset, limit: limit}
                , this.filters
            );

            this.onDataLoading.notify({from: offset, to: offset + limit});

            this.req = $.ajax({
                url: this.defaults.url,
                type: 'GET',
                cache: true,
                data: requestData
            }).done(function(res, status, xhr) {
                // TODO: res.data butigo'ya ozel
                that.data.meta = that.data.meta || res.data.meta;
                that.data.objects = that.data.objects || res.data.objects;

                for (var i=0, len=res.data.objects.length; i<len; i++) {
                    that.data.objects[offset + i] = res.data.objects[i];
                    that.data.objects[offset + i].index = offset + i; // SlickGrid nedds index
                };

                console.log('Items fetched.Notifying:',{from: offset, to: offset + limit});
                that.onDataLoaded.notify({from: offset, to: offset + limit});
                that.req = null;
            });

            return this.req;
        },
        ensureData: function(from, to) {
            var objects = this.data.objects || []
                , limit;

            limit = this.defaults.limit;

            // Mostly coiped from slick.remotemodel.js
            if (this.req) {
                this.req.abort();
                for (var i = this.req.fromPage; i <= this.req.toPage; i++) {
                    objects[i * limit] = undefined;
                }
            }

            var fromPage = Math.floor(from / limit);
            var toPage = Math.floor(to / limit);

            while (objects[fromPage * limit] !== undefined && fromPage < toPage) {
                fromPage++;
            }

            while (objects[toPage * limit] !== undefined && fromPage < toPage) {
                toPage--;
            }

            if (fromPage > toPage || ((fromPage == toPage) && objects[fromPage * limit] !== undefined)) {
                // TODO:  look-ahead
                console.log('Already exist.Notify',{from: from, to: to});
                this.onDataLoaded.notify({from: from, to: to});
                return;
            }

            from = fromPage * limit;
            to = ((toPage - fromPage) * limit) + limit;

            var request = this.loadData(from, to);

            // Usin above for clear items if request abort.
            request.fromPage = fromPage;
            request.toPage = toPage;
        }
    }

    $.extend(true, window, { Slick: { Data: { CustomDataView: CustomDataView }}});

}(jQuery, window));

data.json

{
  "meta": {
    "limit": 1,
    "offset": 0,
    "total_count": 50,
    "next": "/v1/orders?limit=1&offset=1",
    "previous": null
  },
  "objects": [
    {
      "date_added": "2014-02-12T17:23:25.126000",
      "basket_amount_tax_included": 195.90000012,
      "history": [
        "/v1/order-history/240"
      ],
      "installment_ratio": 0.0,
      "invoice_number": "",
      "date_updated": "2014-02-12T17:23:25.126000",
      "delivery_slip_datetime": null,
      "shipping_amount_tax_included": 0.0,
      "initial_paid_amount_tax_included": 90.89,
      "installment_count": 1,
      "gateway": {
        "name": "Freeorder"
      },
      "customer": {
        "last_name": "b",
        "favourite_colors": [],
        "first_name": "Hande",
        "id": 379562,
        "resource_uri": "/v1/customers/379562",
      },
      "id": 132614,
      "paid_amount_tax_included": 90.89,
      "last_history": {
        "transaction_id": null,
        "employee": null,
        "id": 240,
        "status_msg": "Sipariş Hazırlanıyor",
        "date_added": "2014-02-12T17:23:34.162000",
        "paid_amount_tax_included": 90.89,
        "order": "/v1/orders/132614",
        "status": {
          "type": 1,
          "name": "Sipariş Hazırlanıyor",
          "id": 2,
          "is_valid": true,
          "template": "",
          "send_email": true,
          "color": "9EF69E",
          "resource_uri": "/v1/statuses/2",
          "slug": "preparation_in_progress"
        },
        "resource_uri": "/v1/order-history/240"
      },
      "delivery_slip_number": "",
      "invoice_datetime": null,
      "initial_exchange_amount_tax_included": 0.0,
      "discount_amount_tax_included": 0.0,
      "resource_uri": "/v1/orders/132614"
    }
  ]
}

order-list-page.js

$(function(){

    var formatters = {
        id: function(row, cell, value, columnDef, dataContext) {
            var url = bg.globals.OrderDetailViewUrl.replace('111', value);
            return '<a href="{href}">{id}</a>'.replace('{href}', url).replace('{id}', value);
        },
        customer: function(row, cell, customer, columnDef, dataContext) {
            var url = bg.globals.CustomerEditViewUrl.replace('111', customer.id)
            , name = customer.first_name + ' ' + customer.last_name

            return '<a href="'+ url +'">'+ name +'</a>';
        },
        date: function (row, cell, value, columnDef, dataContext) {
            return value;
        },
        gateway: function (row, cell, value, columnDef, dataContext) {
            return value.name;
        },
        status: function (row, cell, value, columnDef, dataContext) {
            return '<span style="background-color:#'+ value.status.color +';">'+ value.status_msg +'</span>';
        }
    }

    var columns = [
        {id: "id", name: "#", field: "id", formatter: formatters.id},
        {id: "customer", name: "Customer", field: "customer", formatter: formatters.customer},
        {id: "gateway", name: "Gateway", field: "gateway", formatter: formatters.gateway},
        {id: "state", name: "State", field: "last_history", formatter: formatters.status},
        {id: "date", name: "Date", field: "date_added", formatter: formatters.date}
    ];

    var options = {
        enableCellNavigation: true
        , showHeaderRow: true
        , headerRowHeight: 30
        , explicitInitialization: true
    };

    var loadingIndicator = $('.loading-indicator');
    var $grid = $("#order-list");

    var dataLoader = new Slick.Data.CustomDataView({'url': 'api.hedehodo.com/orders/'})

    // TODO: window.
    window.grid = new Slick.Grid("#order-list", dataLoader, columns, options);

    grid.autosizeColumns();

    grid.onHeaderRowCellRendered.subscribe(function (e, args) {
        $(args.node).empty();
        $("<input type='text'/>")
           .data("columnId", args.column.id)
           .val(columnFilters[args.column.id])
           .appendTo(args.node);
    });

    dataLoader.onDataLoading.subscribe(function() {
        loadingIndicator
            .css("position", "absolute")
            .css("top", $grid.position().top + $grid.height() / 2 - loadingIndicator.height() / 2)
            .css("left", $grid.position().left + $grid.width() / 2 - loadingIndicator.width() / 2);

        loadingIndicator.show();
    });

    dataLoader.onDataLoaded.subscribe(function(e, args){
        console.log('Data loaded',args);

        for (var i = args.from; i <= args.to; i++) {
            grid.invalidateRow(i);
        }

        grid.updateRowCount();
        grid.render();

        loadingIndicator.fadeOut();
    });

    grid.onViewportChanged.subscribe(function () {
        var vp = grid.getViewport();
        dataLoader.ensureData(vp.top, vp.bottom);
    });

    grid.init();
    grid.onViewportChanged.notify();
});