Пагинация в JqGrid

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Изменим представление из предыдущей темы следующим образом:

@{
    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',

В итоге мы получим грид с элементами постраничной навигации:

Пагинация и pager в JqGrid

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850