jsgrid open modal w grid

issue with paging

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>
<button type="button" id="selectTodos">Seleccionar Todos</button>
<button type="button" id="saveSettings">Imprimir</button>

JavaScript

var db = {

        loadData: function(filter) {
            return $.grep(this.clients, function(client) {
                return (!filter.Nombre || client.Nombre.indexOf(filter.Nombre) > -1);
            });
        }

    };
    
    var selectedItems = [];
 
    var selectItem = function(item) {
        selectedItems.push(item);
    };
 
    var unselectItem = function(item) {
        selectedItems = $.grep(selectedItems, function(i) {
            return i !== item;
        });
    };

    window.db = db;

db.clients = [
    {
    		"Cuenta": "194596",
        "Nombre": "Benja Menchaca",
        "Carrera": "Ingeniería",
        "Responsable": "Alejandro Guzman",
        "Gafete": true
    },
    {
        "Cuenta": "194596",
        "Nombre": "Pedro Rollo",
        "Carrera": "Ingeniería",
        "Responsable": "Alejandro Guzman",
        "Gafete": false
    }
];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
 
        filtering: true,
        editing: false,
        sorting: true,
        paging: true,
        autoload: true,
 
        pageSize: 2,
        pageButtonCount: 5,
 
        deleteConfirm: "quieres borrar al cliente ?",
 
        controller: db,
 
        fields: [
        		{ name: "Cuenta", type: "number", width: 50, filtering: false},
            { name: "Nombre", type: "textarea", width: 150, filtering: true },
            { name: "Carrera", type: "textarea", width: 50, filtering: false},
            { name: "Responsable", type: "text", width: 200, filtering: false},
            {itemTemplate: function(_, item) {
                    return $("<input>").attr("type", "checkbox")
                            .prop("checked", $.inArray(item, selectedItems) > -1)
                            .on("change", function () {
                            $(this).is(":checked") ? selectItem(item) : unselectItem(item);
                            });
                },
                align: "center",
                width: 50
           ...