You can easily add paging navigation to the wijgrid widget. This example demonstrates how you can create a pageable grid by setting the allowPaging, pageSize and pagerSettings options. See the grid > Paging sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/grid/Paging for an example.
Complete the following steps:
<head> tags of the page. You can find the latest version of the Wijmo dependencies at http://wijmo.com/downloads/cdn/.<body> tags of the page, just after @RenderBody():
<div class="main demo">
<table id="demo"></table>
<div class="demo-options">
<div class="option-row">
<label for="pagerPosition">
Position</label>
<select id="pagerPosition">
<option>bottom</option>
<option>top</option>
<option selected="selected">topAndBottom</option>
</select>
</div>
<div class="option-row">
<label for="pagerMode">
Mode</label>
<select id="pagerMode">
<option>nextPrevious</option>
<option>nextPreviousFirstLast</option>
<option>numeric</option>
<option>numericFirstLast</option>
</select></div>
<div class="option-row">
<label for="pageSize">
Page size</label>
<select id="pageSize">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">5</option>
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
</div>
This markup will add content for a table.
</div> tag you added in the previous step, enter the following jQuery script to initialize the wijgrid widgets:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#demo").wijgrid({
allowPaging: true,
pageSize: 5,
pagerSettings: { position: "topAndBottom" },
data: [
[27, 'Canada', 'Adams, Craig', 'RW', 'R', 32, 2009, 'Seria, Brunei'],
[43, 'Canada', 'Boucher, Philippe', 'D', 'R', 36, 2008, 'Saint-Apollinaire, Quebec'],
[24, 'Canada', 'Cooke, Matt', 'LW', 'L', 30, 2008, 'Belleville, Ontario'],
[87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L', 21, 2005, 'Cole Harbour, Nova Scotia'],
[1, 'United States', 'Curry, John', 'G', 'L', 25, 2007, 'Shorewood, Minnesota'],
[9, 'Canada', 'Dupuis, Pascal', 'W', 'L', 30, 2008, 'Laval, Quebec'],
[7, 'United States', 'Eaton, Mark', 'D', 'L', 32, 2006, 'Wilmington, Delaware'],
[26, 'Ukraine', 'Fedotenko, Ruslan', 'LW', 'L', 30, 2008, 'Kiev, U.S.S.R.'],
[29, 'Canada', 'Fleury, Marc-Andre', 'G', 'L', 24, 2003, 'Sorel, Quebec'],
[32, 'Canada', 'Garon, Mathieu', 'G', 'R', 31, 2009, 'Chandler, Quebec'],
[2, 'United States', 'Gill, Hal', 'D', 'L', 34, 2008, 'Concord, Massachusetts'],
[28, 'Canada', 'Godard, Eric', 'RW', 'R', 29, 2008, 'Vernon, British Columbia'],
[3, 'United States', 'Goligoski, Alex', 'D', 'L', 23, 2004, 'Grand Rapids, Minnesota'],
[55, 'Russia', 'Gonchar, Sergei (A)', 'D', 'L', 35, 2005, 'Chelyabinsk, U.S.S.R.'],
[13, 'United States', 'Guerin, Bill', 'RW', 'R', 38, 2009, 'Worcester, Massachusetts'],
[42, 'Canada', 'Jeffrey, Dustin', 'C', 'L', 21, 2007, 'Sarnia, Ontario'],
[48, 'Canada', 'Kennedy, Tyler', 'C', 'R', 22, 2004, 'Sault Ste.Marie, Ontario'],
[14, 'Canada', 'Kunitz, Chris', 'LW', 'L', 29, 2009, 'Regina, Saskatchewan'],
[58, 'Canada', 'Letang, Kristopher', 'D', 'R', 22, 2005, 'Montreal, Quebec'],
[65, 'United States', 'Lovejoy, Ben', 'D', 'R', 25, 2008, 'Canaan, New Hampshire'],
[71, 'Russia', 'Malkin, Evgeni (A)', 'C', 'L', 22, 2004, 'Magnitogorsk, U.S.S.R.'],
[14, 'Canada', 'Minard, Chris', 'C', 'L', 27, 2007, 'Owen Sound, Ontario'],
[44, 'United States', 'Orpik, Brooks', 'D', 'L', 28, 2001, 'San Francisco, California'],
[81, 'Slovakia', 'Satan, Miroslav', 'RW', 'L', 34, 2008, 'Jacovce, Czechoslovakia'],
[4, 'United States', 'Scuderi, Rob', 'D', 'L', 30, 1998, 'Syosset, New York'],
[11, 'Canada', 'Staal, Jordan', 'C', 'L', 20, 2006, 'Thunder Bay, Ontario'],
[17, 'Czech Republic', 'Sykora, Petr', 'RW', 'L', 32, 2007, 'Plzen , Czechoslovakia'],
[22, 'United States', 'Taffe, Jeff', 'LW', 'L', 28, 2007, 'Hastings, Minnesota'],
[25, 'Canada', 'Talbot, Maxime', 'C', 'L', 25, 2002, 'LeMoyne, Quebec'],
[15, 'Canada', 'Zigomanis, Michael', 'C', 'R', 28, 2008, 'Toronto, Ontario']
],
columns: [
{ headerText: "Number" }, { headerText: "Nationality" }, { headerText: "Player" }, { headerText: "Position" },
{ headerText: "Handedness" }, { headerText: "Age" }, { headerText: "Acquired" }, { headerText: "Birthplace" }
]
});
$("#pagerPosition").change(function (e) {
var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
pagerSettings.position = $(e.target).val();
$("#demo").wijgrid("option", "pagerSettings", pagerSettings);
});
$("#pagerMode").bind("change", function (e) {
var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
pagerSettings.mode = $(e.target).val();
$("#demo").wijgrid("option", "pagerSettings", pagerSettings);
});
$("#pageSize").bind("change", function (e) {
$("#demo").wijgrid("option", "pageSize", parseInt($(e.target).val()));
});
});
</script>
This will initialize the grid and set the pager settings.
What You've Accomplished
Press F5 to run the application; observe that the grid can be paged. Select different values from the Position, Mode, and Page size drop-down boxes to change the way that paging is displayed.