knockout js pagination jquery ui modal

How to make paging using KnockoutJS and jquery UI dialog.

<a id="atest" class="btn btn-primary" href="#">Click to open the dialog</a> 
<div id="testfordialog" class="hidden">
    <div id="test" class="container">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: pagedItems">
                <tr>
                    <td data-bind="text: id"></td>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: phone"></td>
                </tr>
            </tbody>
        </table>
        <ul class="pager">
            <li data-bind="css: {'disabled': !previousPageEnabled()}"> <a href="#" data-bind="click: previousPage">Previous</a>

            </li>
            <li data-bind="css: {'disabled': !nextPageEnabled()}"> <a href="#" data-bind="click: nextPage">Next</a>

            </li>
        </ul>
    </div>

var StaticDataExample1 = function(data){
    // stuff I care about
    this.items = ko.observableArray(data);
    
    // pager related stuff
    // ---------------------------------------------
    this.currentPage = ko.observable(1);
    this.perPage = 5;
    this.pagedItems = ko.computed(function(){
        var pg = this.currentPage(),
            start = this.perPage * (pg-1),
            end = start + this.perPage;
        return this.items().slice(start,end);
    }, this);
    this.nextPage = function(){
        if(this.nextPageEnabled())
            this.currentPage(this.currentPage()+1);
    };
    this.nextPageEnabled = ko.computed(function(){
        return this.items().length > this.perPage * this.currentPage();
    },this);
    this.previousPage = function(){
        if(this.previousPageEnabled())
            this.currentPage(this.currentPage()-1);
    };
    this.previousPageEnabled = ko.computed(function(){
        return this.currentPage() > 1;
    },this);
};
    
var model = new StaticDataExample1(data);

ko.applyBindings(model, document.getElementById("test"));
    
$(document).on("click", "[id*=atest]", function () {
    $("#test").dialog({
        height: 420,
        width: 430,
        modal: true,   
        buttons: [{
            text: "Cancel",
            tabIndex: -1,
            click: function () {
               $(this).dialog("close");
           }
        }],
        close: function () {
        },
        open: function () {
            model.currentPage(1);
        }
    });
});

DEMO