jqgrid pager

jqGrid 是一个基于jQuery的表格插件，它提供了丰富的功能和灵活性，其中包括分页。Pager 是 jqGrid 中的一个组件，它用于分页展示数据，并提供了一些操作按钮以供用户进行翻页、刷新等操作。

使用 jqGrid 的 Pager，需要在 jqGrid 的配置中设置 pager 属性为指定的 HTML 元素，例如：

$("#grid").jqGrid({
    url: "data.json",
    datatype: "json",
    colModel: [
        { name: "id", key: true },
        { name: "name" },
        { name: "age" }
    ],
    pager: "#pager"
});

上述代码中，我们将 Pager 对应的 HTML 元素设置为 id 为 pager 的元素。这样，当 jqGrid 显示的数据超过一页时，Pager 就会自动显示并提供相应的操作按钮。

Pager 还可以通过配置属性来进行自定义，例如设置每页显示多少条数据、显示哪些操作按钮等。具体的配置属性可以参考 jqGrid 的官方文档。

相关问题

jqgrid pagerCustomI

很抱歉，我的回答不完整，我补充一下。

`pagerCustomIcons` 属性用于自定义 jqGrid 分页控件的图标，示例代码如下：

$("#grid").jqGrid({
    // 其他配置项
    pager: "#pager",
    pagerCustomIcons: {
        prev: "ui-icon ui-icon-circle-arrow-w",
        next: "ui-icon ui-icon-circle-arrow-e",
        first: "ui-icon ui-icon-seek-first",
        last: "ui-icon ui-icon-seek-end"
    },
    // 其他配置项
});

在上述代码中，我们通过设置 `pagerCustomIcons` 属性来自定义分页控件的图标，其中 `prev` 表示上一页按钮的图标，`next` 表示下一页按钮的图标，`first` 表示第一页按钮的图标，`last` 表示最后一页按钮的图标。

你可以根据需要使用自己喜欢的图标，例如使用 Font Awesome 图标：

$("#grid").jqGrid({
    // 其他配置项
    pager: "#pager",
    pagerCustomIcons: {
        prev: "fa fa-angle-left",
        next: "fa fa-angle-right",
        first: "fa fa-angle-double-left",
        last: "fa fa-angle-double-right"
    },
    // 其他配置项
});

在上述代码中，我们使用了 Font Awesome 图标来自定义分页控件的图标。

jqgrid searchGrid

`searchGrid` 方法是 jqGrid 提供的一个用于触发搜索的 API，可以在 JavaScript 中调用。使用 `searchGrid` 方法，您可以在 JavaScript 中自定义搜索条件，并将其应用于 jqGrid。

下面是一个例子：

$("#grid").jqGrid({
    url: 'data.json',
    datatype: 'json',
    colModel: [
        { name: 'id', index: 'id', width: 60 },
        { name: 'name', index: 'name', width: 90 },
        { name: 'amount', index: 'amount', width: 80, align: 'right' },
        { name: 'price', index: 'price', width: 80, align: 'right' }
    ],
    jsonReader: {
        repeatitems: false,
        id: 'id'
    },
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    caption: 'My Grid',
    height: '100%',
    autowidth: true,
}).navGrid('#pager', { edit: false, add: false, del: false, search: true })
  .navButtonAdd('#pager', {
    caption: 'Custom Search',
    buttonicon: 'ui-icon-search',
    onClickButton: function () {
        var postData = { };
        postData.name = { op: 'bw', data: 'Product' };
        postData.amount = { op: 'gt', data: '100' };
        $("#grid").jqGrid('setGridParam', { postData: postData });
        $("#grid").jqGrid('searchGrid', { multipleSearch: true });
    }
});

在上面的例子中，我们设置了一个包含四个列的 jqGrid，并在 `navGrid` 中启用了搜索功能。我们还定义了一个自定义搜索按钮，当用户点击该按钮时，将触发一个 JavaScript 函数。在该函数中，我们定义了一个名为 `postData` 的对象，该对象包含要应用的搜索条件。然后，我们使用 `setGridParam` 方法将搜索条件设置为网格的 `postData` 属性。最后，我们使用 `searchGrid` 方法触发搜索，将搜索条件应用于网格。

在 `searchGrid` 方法中，我们还可以传递一个包含其他选项的对象，例如 `multipleSearch`，该选项指定是否允许多个搜索条件。

使用 `searchGrid` 方法，您可以在 JavaScript 中自定义搜索条件，并将其应用于 jqGrid，而不需要用户手动输入搜索条件。这样，您可以在网格中实现更高级的搜索功能。