🎨 https://github.com/siyuan-note/siyuan/issues/10964

app/src/protyle/render/av/action.ts

@@ -54,7 +54,8 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             rowFooterElement.style.transform = "";
         }
         blockElement.removeAttribute("data-render");
-        blockElement.dataset.pageSize = (parseInt(blockElement.dataset.pageSize) + parseInt(blockElement.querySelector('[data-type="set-page-size"]').getAttribute("data-size"))).toString();
+        const bodyElement = hasClosestByClassName(event.target, "av__body") as HTMLElement;
+        bodyElement.dataset.pageSize = (parseInt(bodyElement.dataset.pageSize) + parseInt(bodyElement.querySelector('[data-type="set-page-size"]').getAttribute("data-size"))).toString();
         avRender(blockElement, protyle);
         event.preventDefault();
         event.stopPropagation();

app/src/protyle/render/av/gallery/render.ts

@@ -11,6 +11,7 @@ import {avRender, genTabHeaderHTML, getGroupTitleHTML, updateSearch} from "../re
 import {processRender} from "../../../util/processCode";
 import {getColIconByType, getColNameByType} from "../col";
 import {getCompressURL} from "../../../../util/image";
+import {getPageSize} from "../groups";
 
 interface ITableOptions {
     protyle: IProtyle,
@@ -63,7 +64,7 @@ const getGalleryHTML = (data: IAVGallery, selectItemIds: string[], editIds: stri
                 ariaLabel += escapeAttr(`<div class="ft__on-surface">${data.fields[fieldsIndex].desc}</div>`);
             }
             if (cell.valueType === "checkbox") {
-                cell.value["checkbox"].content = data.fields[fieldsIndex].name||getColNameByType(data.fields[fieldsIndex].type)
+                cell.value["checkbox"].content = data.fields[fieldsIndex].name || getColNameByType(data.fields[fieldsIndex].type);
             }
             galleryHTML += `<div class="av__cell${checkClass} ariaLabel" data-wrap="${data.fields[fieldsIndex].wrap}" 
 data-empty="${isEmpty}" 
@@ -107,7 +108,7 @@ const renderGroupGallery = (options: ITableOptions) => {
         if (group.groupHidden === 0) {
             group.fields = (options.data.view as IAVGallery).fields;
             avBodyHTML += `${getGroupTitleHTML(group, group.fields.length)}
-<div data-group-id="${group.id}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getGalleryHTML(group, options.resetData.selectItemIds, options.resetData.editIds)}</div>`;
+<div data-group-id="${group.id}" data-page-size="${group.pageSize}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getGalleryHTML(group, options.resetData.selectItemIds, options.resetData.editIds)}</div>`;
         }
     });
     if (options.renderAll) {
@@ -253,11 +254,13 @@ export const renderGallery = async (options: {
 
     let data: IAV = options.data;
     if (!data) {
+        const avPageSize = getPageSize(options.blockElement);
         const response = await fetchSyncPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
             id: options.blockElement.getAttribute("data-av-id"),
             created,
             snapshot,
-            pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined,
+            pageSize: avPageSize.unGroupPageSize,
+            groupPaging: avPageSize.groupPageSize,
             viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
             query: resetData.query.trim()
         });
@@ -280,22 +283,21 @@ export const renderGallery = async (options: {
         });
         return;
     }
-    if (!options.blockElement.dataset.pageSize) {
-        options.blockElement.dataset.pageSize = view.pageSize.toString();
-    }
     const bodyHTML = getGalleryHTML(view, selectItemIds, editIds);
     if (options.renderAll) {
         options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
     ${genTabHeaderHTML(data, resetData.isSearching || !!resetData.query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
     <div>
-        <div class="av__body">
+        <div class="av__body" data-page-size="${view.pageSize}">
             ${bodyHTML}
         </div>
     </div>
     <div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
 </div>`;
     } else {
-        options.blockElement.querySelector(".av__body").innerHTML = bodyHTML;
+        const bodyElement = options.blockElement.querySelector(".av__body") as HTMLElement;
+        bodyElement.innerHTML = bodyHTML;
+        bodyElement.dataset.pageSize = view.pageSize.toString();
     }
     afterRenderGallery({
         resetData,

app/src/protyle/render/av/groups.ts

@@ -7,6 +7,25 @@ import {fetchSyncPost} from "../../../util/fetch";
 import {Menu} from "../../../plugin/Menu";
 import {objEquals} from "../../../util/functions";
 
+export const getPageSize = (blockElement: Element) => {
+    const groupPageSize: {
+        [key: string]: {
+            pageSize: string
+        }
+    }[] = [];
+    let unGroupPageSize: string;
+    blockElement.querySelectorAll(".av__body").forEach((item:HTMLElement) => {
+        const id = item.dataset.groupId;
+        const pageSize = item.dataset.pageSize;
+        if (id) {
+            groupPageSize.push({[id]: {pageSize}});
+        } else if (!unGroupPageSize) {
+            unGroupPageSize = pageSize;
+        }
+    });
+    return {groupPageSize, unGroupPageSize};
+};
+
 export const setGroupMethod = async (options: {
     protyle: IProtyle;
     fieldId: string;

app/src/protyle/render/av/openMenuPanel.ts

@@ -51,7 +51,7 @@ import {setGalleryCover, setGalleryRatio, setGallerySize} from "./gallery/util";
 import {
     bindGroupsEvent, bindGroupsNumber,
     getGroupsHTML,
-    getGroupsMethodHTML, getGroupsNumberHTML, getLanguageByIndex,
+    getGroupsMethodHTML, getGroupsNumberHTML, getLanguageByIndex, getPageSize,
     goGroupsDate,
     goGroupsSort,
     setGroupMethod
@@ -76,10 +76,12 @@ export const openMenuPanel = (options: {
         return;
     }
     const avID = options.blockElement.getAttribute("data-av-id");
+    const avPageSize = getPageSize(options.blockElement);
     fetchPost("/api/av/renderAttributeView", {
         id: avID,
         query: (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
-        pageSize: parseInt(options.blockElement.getAttribute("data-page-size")) || undefined,
+        pageSize: avPageSize.unGroupPageSize,
+        groupPaging: avPageSize.groupPageSize,
         viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW)
     }, (response) => {
         avPanelElement = document.querySelector(".av__panel");

app/src/protyle/render/av/render.ts

@@ -17,6 +17,7 @@ import {isMobile} from "../../../util/functions";
 import {renderGallery} from "./gallery/render";
 import {getFieldsByData, getViewIcon} from "./view";
 import {openMenuPanel} from "./openMenuPanel";
+import {getPageSize} from "./groups";
 
 interface ITableOptions {
     protyle: IProtyle,
@@ -470,11 +471,13 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
             }
             const created = protyle.options.history?.created;
             const snapshot = protyle.options.history?.snapshot;
+            const avPageSize = getPageSize(e);
             fetchPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
                 id: e.getAttribute("data-av-id"),
                 created,
                 snapshot,
-                pageSize: parseInt(e.dataset.pageSize) || undefined,
+                pageSize: avPageSize.unGroupPageSize,
+                groupPaging: avPageSize.groupPageSize,
                 viewID: e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
                 query: resetData.query.trim(),
                 blockID: e.getAttribute("data-node-id"),
@@ -489,10 +492,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
                     renderGroupTable({blockElement: e, protyle, cb, renderAll, data: response.data, resetData});
                     return;
                 }
-                if (!e.dataset.pageSize) {
+                const avBodyHTML = `<div class="av__body" data-page-size="${data.pageSize}" style="float: left">
-                    e.dataset.pageSize = data.pageSize.toString();
-                }
-                const avBodyHTML = `<div class="av__body" style="float: left">
     ${getTableHTMLs(data, e)}
 </div>`;
                 if (renderAll) {
@@ -662,12 +662,18 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
             } else if (operation.action === "setAttrViewBlockView") {
                 const viewTabElement = item.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${operation.id}"]`) as HTMLElement;
                 if (viewTabElement) {
-                    item.dataset.pageSize = viewTabElement.dataset.page;
+                    item.querySelectorAll(".av__body").forEach((bodyItem: HTMLElement) => {
+                        bodyItem.dataset.pageSize = viewTabElement.dataset.page;
+                    });
                 }
             } else if (operation.action === "addAttrViewView") {
-                item.dataset.pageSize = "50";
+                item.querySelectorAll(".av__body").forEach((bodyItem: HTMLElement) => {
+                    bodyItem.dataset.pageSize = "50";
+                });
             } else if (operation.action === "removeAttrViewView") {
-                item.dataset.pageSize = item.querySelector(`.av__views > .layout-tab-bar .item[data-id="${item.getAttribute(Constants.CUSTOM_SY_AV_VIEW)}"]`)?.getAttribute("data-page");
+                item.querySelectorAll(".av__body").forEach((bodyItem: HTMLElement) => {
+                    bodyItem.dataset.pageSize = item.querySelector(`.av__views > .layout-tab-bar .item[data-id="${item.getAttribute(Constants.CUSTOM_SY_AV_VIEW)}"]`)?.getAttribute("data-page");
+                });
             } else if (operation.action === "sortAttrViewView" && operation.data === "unRefresh") {
                 const viewTabElement = item.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${operation.id}"]`) as HTMLElement;
                 if (viewTabElement && !operation.previousID && !viewTabElement.previousElementSibling) {

app/src/protyle/render/av/row.ts

@@ -94,14 +94,16 @@ export const updateHeader = (rowElement: HTMLElement) => {
 };
 
 export const setPage = (blockElement: Element) => {
-    const pageSize = parseInt(blockElement.getAttribute("data-page-size"));
+    const avType = blockElement.getAttribute("data-av-type") as TAVView;
-    if (pageSize) {
+    blockElement.querySelectorAll(".av__body").forEach((item: HTMLElement) => {
-        const avType = blockElement.getAttribute("data-av-type") as TAVView;
+        const pageSize = item.dataset.pageSize;
-        const currentCount = blockElement.querySelectorAll(avType === "table" ? ".av__row:not(.av__row--header)" : ".av__gallery-item").length;
+        if (pageSize) {
-        if (pageSize < currentCount) {
+            const currentCount = item.querySelectorAll(avType === "table" ? ".av__row:not(.av__row--header)" : ".av__gallery-item").length;
-            blockElement.setAttribute("data-page-size", currentCount.toString());
+            if (parseInt(pageSize) < currentCount) {
+                item.dataset.pageSize = currentCount.toString();
+            }
         }
-    }
+    });
 };
 
 /**
@@ -316,7 +318,9 @@ const updatePageSize = (options: {
     if (options.currentPageSize === options.newPageSize) {
         return;
     }
-    options.nodeElement.setAttribute("data-page-size", options.newPageSize);
+    options.nodeElement.querySelectorAll(".av__body").forEach((item: HTMLElement) => {
+        item.dataset.pageSize = options.newPageSize;
+    });
     const blockID = options.nodeElement.getAttribute("data-node-id");
     transaction(options.protyle, [{
         action: "setAttrViewPageSize",