📜  jQWidgets jqxDataTable goToNextPage() 方法(1)

📅  最后修改于: 2023-12-03 15:16:53.245000             🧑  作者: Mango

jQWidgets jqxDataTable goToNextPage() 方法

简介

goToNextPage() 方法是 jQWidgets 的 jqxDataTable 窗口中用于将当前页指针向前移动至下一页的方法。该方法仅在jqxDataTable控件中可用。

用法

goToNextPage() 方法调用添加到需要执行此操作的函数中。

$('#dataTable').jqxDataTable('goToNextPage');
参数

该方法不接受任何参数。

返回值

该方法不返回任何数据。

使用示例

以下示例演示了如何使用 goToNextPage() 方法在 jqxDataTable 窗口中将当前页指针向前移动至下一页。

$(document).ready(function () {
    var data = new Array();
    for (var i = 0; i < 10; i++) {
        var row = {};
        row["Name"] = "Name " + i;
        row["Age"] = i;
        row["Address"] = "Address " + i;
        data.push(row);
    }

    var source = {
        localData: data,
        dataType: "array",
        dataFields:
        [
            { name: "Name", type: "string" },
            { name: "Age", type: "int" },
            { name: "Address", type: "string" }
        ]
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#dataTable").jqxDataTable(
        {
            width: 500,
            pageable: true,
            pagerButtonsCount: 2,
            source: dataAdapter,
            columns: [
                { text: "Name", dataField: "Name" },
                { text: "Age", dataField: "Age" },
                { text: "Address", dataField: "Address" }
            ]
        });

    $("#nextBtn").on("click", function () {
        $('#dataTable').jqxDataTable('goToNextPage');
    });
});

在上面的示例中,当单击 #nextBtn 按钮时,将调用 goToNextPage() 方法将当前页指针向前移动至下一页。注意:该示例还包括了一个 jqxDataTable 的初始化,用于展示如何将 DataTable 与数据适配器 Source 结合使用。