Pagination using knockout JSON data

See more:

Javascript

Knockout.js

How to modify the below javascript file to include pagination having pagenumber link so that user can straight away go the required page rather than pressing next or previous button:

$(document).ready(function () {

    var jsondata = JSON.parse(var1);
    DisplayFields = function (jsondata) {
        var viewModel = {
            d: ko.observableArray(jsondata),
            pageSize: ko.observable(10),
            pageIndex: ko.observable(0),
            previousPage: function () {
                this.pageIndex(this.pageIndex() - 1);
            },
            nextPage: function () {
                this.pageIndex(this.pageIndex() + 1);
            }
        };
        viewModel.maxPageIndex = ko.dependentObservable(function () {
            return Math.ceil(this.d().length / this.pageSize()) - 1;
        }, viewModel);
        viewModel.pagedRows = ko.dependentObservable(function () {
            var size = this.pageSize();
            var start = this.pageIndex() * size;
            return this.d().slice(start, start + size);
        }, viewModel);
        ko.applyBindings(viewModel, document.getElementById("Datasection"));
        ko.applyBindings(viewModel, document.getElementById("prevnext"));
    };
    DisplayFields(jsondata);
});

<section class="col-lg-12 paddingBottom40 paddingTop20 RecentInnovation" id="Datasection" data-bind='template: { foreach: pagedRows }'>
        <div class="row">
            <section class="col-lg-1 col-md-1 col-sm-1 col-xs-4">
                <div class="bgOrange blue text-center paddingTop10 paddingBottom10">
                    <span class="size18" data-bind="text: Views"></span>
                    <br>
                    View
                </div>
            </section>
            <section class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                <a data-bind="attr: { href: '../SitePages/IdeaDetails.aspx?ideaid=' + ID }" class="size14 green"><strong><span data-bind="    text: BusinessProblem"></span></strong></a>
                <br>
                <p class="paddingTop5">Category:<span data-bind="text: InnovationType" class="green"></span>&nbsp;&nbsp;Submitted by: <span data-bind="    text: Requester" class="green"></span>&nbsp;&nbsp;On <span data-bind="    text: Created " class="green"></span></p>
                <p class="paddingTop5">Tags: <span data-bind="text: Keywords" class="green"></span>&nbsp;&nbsp&nbsp;Domain: <span data-bind="    text: Domain" class="green"></span>&nbsp;&nbsp&nbsp;SubDomain: <span data-bind="    text: SubDomain" class="green"></span></p>
            </section>
            <section class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-right"><span data-bind="text: Status"></span><span data-bind="    css: statusCss"></span></section>
        </div>

    </section>