jQWidgets jqxDataTable goToPage() 方法介绍

goToPage() 方法是在 jQWidgets 的 jqxDataTable 组件中用于跨页操作的方法。当你需要跳转到特定页时，这个方法将会很有用。

语法

$('#dataTable').jqxDataTable('goToPage', index);

其中，index 是一个数字类型的参数，代表跳转到其中的一个页面。索引是从 0 开始，例如，如果你要跳转到第二页，则 index 应该设置为 1。

示例

在下面的示例中，将会演示如何使用 goToPage 方法跳转到第二页：

$(document).ready(function() {

  // 准备数据
  var data = new Array();
  var firstNames = ["Sheryl", "Patrick", "Janet", "Ellen", "Joan", "Kimberly", "Eric", "Kevin", "Alice", "Steven"];
  var lastNames = ["Meadows", "Parker", "Gates", "Howard", "Flores", "Silva", "Barnes", "Coleman", "Reed", "Black"];
  var addresses = ["880 Holmes Lane", "8987 French Street", "962 Fieldstone Drive", "721 Maryland Avenue", "2852 Bond Street",
    "671 Janet Street", "3124 Better Street", "8834 Pleasant Hill Road", "3414 Browns Hill Road", "883 Oakwood Circle"
  ];
  var cities = ["Watauga", "Burlingame", "Mcminnville", "Pasadena", "Woodland Hills", "Woodbridge", "Sterling Heights",
    "Kenner", "Muncie", "Bourbonnais"
  ];
  var countries = ["Belarus", "United States", "Cuba", "Brazil", "China", "Russia", "United States", "Egypt", "Sweden", "Belarus"];
  for (var i = 0; i < 10; i++) {
    var row = {};
    row["firstName"] = firstNames[i];
    row["lastName"] = lastNames[i];
    row["address"] = addresses[i];
    row["city"] = cities[i];
    row["country"] = countries[i];
    data[i] = row;
  }

  var source = {
    localData: data,
    dataType: "array",
    dataFields: [{
        name: 'firstName',
        type: 'string'
      },
      {
        name: 'lastName',
        type: 'string'
      },
      {
        name: 'address',
        type: 'string'
      },
      {
        name: 'city',
        type: 'string'
      },
      {
        name: 'country',
        type: 'string'
      }
    ]
  };

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

  // 初始化 DataTable
  $("#dataTable").jqxDataTable({
    width: 600,
    source: dataAdapter,
    pageable: true,
    pagerButtonsCount: 10,
    pageable: true,
    pageSize: 2,
    selectionMode: 'singleRow',
    columns: [{
        text: 'First Name',
        dataField: 'firstName',
        width: 150
      },
      {
        text: 'Last Name',
        dataField: 'lastName',
        width: 150
      },
      {
        text: 'Address',
        dataField: 'address'
      },
      {
        text: 'City',
        dataField: 'city'
      },
      {
        text: 'Country',
        dataField: 'country'
      }
    ]
  });

  // 跳转到第二页
  $('#dataTable').jqxDataTable('goToPage', 1);
});

这个示例首先建立了一个数据源，包含了一些用户的基本信息。然后，将这个数据源绑定到 jqxDataTable 上，设置了每页显示 2 行数据，启用了翻页功能。在最后面，通过调用 goToPage 方法跳转到第二页。可以看到，最初显示的是第一页的数据，但是立刻就跳转到了第二页。

总结

goToPage 方法可以帮助你在 jqxDataTable 组件中轻松跳转到特定页。这个方法非常简单易用，只需要为其提供一个数字类型的参数即可实现跳转。