Odoo version: 10

I have a new view created in Odoo 10. There is details of the view:

# Action Model
from odoo import fields,models

class ActionWindowView(models.Model):
_inherit = "ir.actions.act_window.view"

view_mode = fields.Selection(selection_add = [('vertical_list','Vertical List')])

#View Model

class Views(models.Model):
_inherit = "ir.ui.view"

type = fields.Selection(selection_add = [('vertical_list','Vertical List')])

Every view work with custom template, depending of the function to execute. Example:   List of users that depend on a project , List of projects than depend to a specific partner.

This is the js  file ofthe new view:

odoo.define("ijob_views.vertical_list",function(require){
"use strict";

var common = require('web.list_common');
var core = require('web.core');
var data = require('web.data');
var data_manager = require('web.data_manager');
var View = require('web.View');
var Dialog = require('web.Dialog');
var FormRenderingEngine = require('web.FormRenderingEngine');
var Model = require('web.DataModel');
var common = require('web.list_common');
var Pager = require('web.Pager');
var utils = require('web.utils');
var pyeval = require('web.pyeval');

var _lt = core._lt;
var QWeb = core.qweb;

var VerticalListView = View.extend({
_template: 'VerticalListView',
display_name: _lt('Vertical List'),
icon: 'fa-cogs',

events: {
'click .show-more':'_showMore',
'change .select_list_status':'isotopFilter',
'click .filter-btn a':'_filterBtn',
'click .toggle-btn':'_togleBTN',
'click .circle_click':'_circleObject',
},

init: function() {
var self = this;
this._super.apply(this, arguments);
this.records = new common.Collection();
this.fields = this.fields_view.fields;
this.context = this.dataset.context;
this.default_view_id = undefined;
this.widgets_registry = core.form_custom_registry; 

//Solo para menú de Mis Trabajos del Freelance. Esto es con el sentido de tener varias opciones en una
//Misma pantalla
this.ijob_invitation = false;
this.ijob_proposal = false;
this.ijob_project = false;
this.limit = 10;
this.offset = 0;
},

start:function(){
var self = this;
var model = new Model(self.model)
var search = self.ViewManager.action.domain || []; 

//The name of view template is set by context in the action  view
var view_template = self.context['view_vertical'] || 'VerticalListView';
var dataset = self.dataset; 

 //When start function, load the specific data of model. 
model.query([])
.filter(search)
.context(self.context || {})
.offset(self.offset)
.limit(self.limit)
.all()
.then(function(records){
self.$el.html(QWeb.render(view_template, {
'records': records,
'project':self.context['project_name'] || "",
'title_name_template':self.context["title_name_template"],
}));
});
return this._super();
},


do_show: function() {
this.do_push_state({});
return this._super();
},
 //This is a filter to hide specific result by state in a dropdwon list.
isotopFilter : function(e){
var filterValue = $(e.target).find(":selected").attr("data-filter");

//Oculto Todos
$(".list-group-projects").addClass("hidden");

if(filterValue == '*'){
$("div.hidden").slice(0, 10).removeClass("hidden");
}else{
//Quitar hidden de clase en especifico
$(filterValue).slice(0, 10).removeClass("hidden");
}

},
 //This show next 10 objects in the list when is hidden.
_showMore: function(e){
e.preventDefault();

var filterValue = $(".select_list_status").find(":selected").attr("data-filter");

if (filterValue == '*'){
$("div.hidden").slice(0, 10).removeClass("hidden");
if($("div.hidden").length == 0){
showTooltip();
}
}else{
$("div.hidden"+filterValue).slice(0, 10).removeClass("hidden");
if($("div.hidden"+filterValue).length == 0){
showTooltip();
}
}

function showTooltip(){
$("#message").show("slow");
setTimeout(hideTooltip, 3000)
};

function hideTooltip(){
$("#message").hide("slow");
};
},

//This function execute a python function or call an action to redirect of other page

 _circleObject:function(e){ 
e.preventDefault();
var self = this;
var target = $(e.target);
var model = new Model(self.model);

var att_name = target.prop("name");
var id = target.attr("id_general");
var type_tag = target.prop("type");
var name_module = target.attr("name_module");

if(!id){
id = target.parent("a").attr("id_general");
att_name = target.parent("a").prop("name");
type_tag = target.parent("a").prop("type");
name_module = target.parent("a").attr("name_module");
}

var dataset = self.dataset;
var local_context = {
active_model: self.model,
active_id: parseInt(id),
active_ids: [parseInt(id)]
};

self.do_push_state({});
var ctx = pyeval.eval('context', new data.CompoundContext(dataset.get_context(), local_context));
if (type_tag == 'object'){
if (id && att_name){
model.call(att_name,[[parseInt(id)]]).done(function(result){
if(result.type == 'ir.actions.act_window'){
console.log("Do Action");
console.log(data);
var action = {
type: result.type,
res_model: result.res_model,
res_id: result.res_id,
views: result.views || [[result.view_id || false,result.view_mode]],
view_type : result.view_type,
view_mode : result.view_mode,
context: result.context || {},
domain: result.domain || [],
target: result.target
}
self.do_action(action);
}

});
}
}else if(type_tag == 'action'){
if (id && att_name && name_module){
self.rpc("/web/action/load", {
action_id: name_module+"."+att_name,
context: ctx
}).done(function(result) {
var c = new data.CompoundContext(local_context).set_eval_context(ctx);
if (result.context) {
c.add(result.context);
}
result.context = c;
console.log("Result");
console.log(result);
return self.do_action(result);
});
}
}
},

_togleBTN:function(){
$('.filter-btn').toggleClass('open');
},

_filterBtn:function(){
$('.filter-btn').removeClass('open');
},
});

//Finnaly the new View is register.

 core.view_registry.add('vertical_list', VerticalListView); 

return VerticalListView;
});

#This is an example of a view in xml.

<!--View Vertical Invitation-->
<record id="contracts_vertical_views" model="ir.ui.view"> 
<field name="name">hr.contract.view</field>
<field name="model">hr.contract</field>
<field name="arch" type="xml">
<vertical_list>
//I set the view without field, because all the data is get in js function load.
</vertical_list>
</field>
</record>

#In the action is the name of the view_template

<record id="project_vertical_work_action" model="ir.actions.act_window"> 
<field name="name">Mis Trabajos</field>
<field name="res_model">project.project</field>
<field name="view_mode">vertical_list</field>
<field name="view_type">form</field>
<field name="context">{'view_vertical':'VerticalListViewWork'}</field>
<field name="help" type="html">
</field>
</record>

And in static/src/xml/   the views are defined ( VerticalListViewWork and others )

I want to know, how to work with offset and pager in this list view. 

Thanks.