Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Изменим представление из предыдущей темы следующим образом:
@{ Layout = null; } <html> <head> <title>jqGrid</title> <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="~/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script> <script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="~/Scripts/i18n/grid.locale-ru.js" type="text/javascript"></script> <style> .ui-jqgrid .ui-pg-input {height:20px;} </style> </head> <body> <h2>jQGrid</h2> <table id="jqg"></table> <div id="jpager"></div> <script type="text/javascript"> $(document).ready(function () { $("#jqg").jqGrid({ url: '@Url.Action("GetData")', datatype: "json", colNames: ['Id', 'Название', 'Автор', 'Год', 'Цена'], colModel: [ { name: 'Id', index: 'Id', width: 30, stype: 'text' }, { name: 'Name', index: 'Name', width: 150, sortable: true}, { name: 'Author', index: 'Author', width: 150, sortable: true }, { name: 'Year', index: 'Year', width: 100, sortable:false }, { name: 'Price', index: 'Price', width: 80, align: "right", sortable: true } ], rowNum: 5, // число отображаемых строк rowList: [10, 20, 30], pager: '#jpager', loadonce:true, // загрузка только один раз sortname: 'Id', // сортировка по умолчанию по столбцу Id sortorder: "desc", // порядок сортировки caption: "Список Книг" }); }); </script> </body> </html>
В отличие от предыдущего примера здесь добавлен еще один скрипт - скрипт локализации grid.locale-ru.js, который установился в проект вместе с другими файлами JqGrid в каталог Scripts/i18n. При необходимости можно выбрать любой другой файл локализации. В частности, есть также локализации для белорусского и украинского языков. Кроме того, можно самим создать на основе имеющейся собственную локализацию.
Также на страницу добавлен новый элемент, который будет содержать функционал пагинации: <div id="jpager"></div>
А в определении грида указывается, что именно в этом элементе будет применяться пагинация для грида: pager: '#jpager',
В итоге мы получим грид с элементами постраничной навигации: