aardio 文档

Pagination 分页

Pagination 是分页 UI 控件，只负责页码、页大小、总数与切换事件；它不会自动切分 Table 数据。实际项目中通常在 ValueChanged 事件里重新请求或重新切片数据，然后更新 Table 的 DataSource。

基本示例

import win.ui;
var winform = win.form(text="AntdUI Pagination";right=760;bottom=420)
winform.add(
    hostTable={cls="custom";left=20;top=20;right=730;bottom=330;z=1};
    hostPage={cls="custom";left=20;top=345;right=730;bottom=385;z=2}
)

import dotNet.AntdUI;
import System.Data;

var grid = AntdUI.Table(winform.hostTable);
var page = AntdUI.Pagination(winform.hostPage);

page.Total = 100;
page.PageSize = 10;

var loadPage = function(current,pageSize){
    var dt = System.Data.DataTable();
    dt.Columns.Add("id");
    dt.Columns.Add("name");

    var start = (current - 1) * pageSize + 1;
    for(i=start;start + pageSize - 1;1){
        var row = dt.NewRow();
        row["id"] = tostring(i);
        row["name"] = "项目 " + i;
        dt.Rows.Add(row);
    }
    grid.DataSource = dt;
}

loadPage(1,page.PageSize);

page.ValueChanged = function(sender,e){
    loadPage(e.Current,e.PageSize);
}

winform.show();
win.loopMessage();

常用属性

页大小选项

import dotNet;
page.PageSizeOptions = dotNet.int([10,20,50,100]);

事件

page.ValueChanged = function(sender,e){
    // e.Current 当前页
    // e.PageSize 每页条数
    loadPage(e.Current,e.PageSize);
}

page.ShowTotalChanged = function(sender,e){
    return e.PageSize + " / " + e.Total + " 条，共 " + e.PageTotal + " 页";
}

与 Table 配合的建议

  1. 将“取数据/切片数据”的逻辑封装为函数，例如 loadPage(current,pageSize)。
  2. 初始化时调用一次 loadPage(1,page.PageSize)。
  3. 在 page.ValueChanged 中调用 loadPage(e.Current,e.PageSize)。
  4. 如果数据来自远程接口，建议在回调中发起异步请求，完成后再更新 grid.DataSource。

常见坑

Markdown 格式