Use the Pager with wijwizard

You can use the wijpager and wijwizard widgets together to create a paged navigation system. You can use either the "nextpreviousFirstLast" mode or the "numeric" mode for the pager widget. This topic will demonstrate how to use the two widgets together with the pager mode set to "numeric".

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<div id="pages">
    <div>
          <p>
                Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                Nunc tristique tempus lectus.</p>
    </div>
    <div>
          <p>
                Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
                massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
                luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
                aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
                in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
                nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
                convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
                felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div>
          <p>
                Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
                pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
                Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
                nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
                pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
                enim, pretium nec, feugiat nec, luctus a, lacus.</p>
          <p>
                Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
                ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing
                velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula
                faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
                sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor
                ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
                commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit
                hendrerit.</p>
    </div>
    <div>
          <h4>
                Studio Enterprise</h4>
          <p>
                Seven platforms, hundreds of controls, one studio. Build awesome desktop, Web, and
                mobile apps with our tools for WinForms, WPF, ASP.NET, Silverlight, iPhone, Mobile,
                and ActiveX.</p>
    </div>
    <div>
          <h4>
                Studio for WinForms</h4>
          <p>
                Over 65 .NET controls, including the ones you can't get anywhere else. Studio for
                WinForms can handle anything, from a grid with a million rows to a chart with unlimited
                points.</p>
    </div>
    <div>
          <h4>
                Studio for WPF</h4>
          <p>
                Studio for WPF offers everything from advanced data binding to rich data visualizations
                included in grids, schedulers, charts, reports, and more.</p>
    </div>
    <div>
          <h4>
                Studio for ASP.NET</h4>
          <p>
                Do more with less code. Over 45 styled, supercharged, and easy-to-use controls built
                on Web standards including CSS and XHTML.</p>
    </div>
    <div>
          <h4>
                Studio for Silverlight</h4>
          <p>
                Industrial strength Silverlight controls you cannot find anywhere else. Download
                ComponentOne Studio for Silverlight, play, and watch the Web shine.</p>
    </div>
    <div>
          <h4>
                Studio for iPhone</h4>
          <p>
                Use your existing ASP.NET skill set and take your Web apps to the iPhone. ComponentOne
                Studio for iPhone gives you the iPhone UX.</p>
    </div>
</div>

Add the following <div> DOM element to create the pager:
```
<div id="pager">
</div>
```

Use the following script to initialize both widgets:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#pages").wijwizard({
            navButtons: 'none'
        });
        $("#pager").wijpager({
            pageCount: $("#pages").wijwizard('count'),
            pageIndex: $("#pages").wijwizard('option', 'activeIndex'),
            mode: "numeric",
            pageindexchanged: function () {
                var pageIndex = $("#pager").wijpager("option", "pageIndex");
                $("#pages").wijwizard({ activeIndex: pageIndex });
            }
        });
    });
    </script>

Run your project. The two widgets should resemble the image below: