无法使用 Kendo UI 网格使用后端分页

Question

我很难使用 Kendo UI 网格实现服务器端分页。我有一个 POST 路由 /worklist 当我向它提供参数时它会产生 return 结果但是我无法使用 Kendo UI 网格，我在网上搜索了很多，但我找不到任何有用的东西。这是当我使用 Postman 向它提供参数时 return 由 URL 编辑的结果。

{"header":{"cursor":{"pageable":{"sort":null,"offset":0,"pageSize":5,"pageNumber":0},"page":0,"size":5,"numberOfElements":5,"totalElements":26315,"totalPages":5263},"filter":{"dobFrom":null,"dobTo":null,"inFacility":null,"inICURoom":null,"isICUBaby":null,"hasDocumentWaitingApproval":null,"hasNotification":null,"statusInfoCompleted":false,"statusToBeScreened":false,"statusConsentRequired":false,"statusSecondScreeningDateRequired":false,"statusSecondScreeningDateGiven":false,"statusAppointmentDateRequired":false,"statusAppointmentDateGiven":false,"statusReferredToENT":false,"statusFirstHourOfRehabGiven":false,"statusHaRecommended":false,"riskFactorCode":null,"facilityFollowingPatient":true,"readyToBeScreened":false,"restrictToMyPatientList":false}},"rows":[{"patientId":43101,"patientName":"LAUZON, FLORENCE","sex":"F","statusIcon":"KARAN_ICON","birthDate":"2014-07-22","decesedDate":null,"ramq":"LAUF14572215","mrn":"3009796","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 4 mois","motherMaidenName":null,"phoneNumber":"(514)260-8227","address":"1425 RUE UNION","city":"SAINTE-CATHERINE","postalCode":"J5C 1G8","status":"Réussite - fin du PQDSN","statusDate":"2014-08-12"},{"patientId":43102,"patientName":"BETOURNAY, KEITH","sex":"M","statusIcon":"KARAN_ICON","birthDate":"2014-08-18","decesedDate":null,"ramq":"BETK14081812","mrn":"3010677","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 3 mois","motherMaidenName":null,"phoneNumber":"(514)451-7657","address":"1735 RANG DUMAS","city":"ORMSTOWN","postalCode":"J0S 1K0","status":"Réussite - fin du PQDSN","statusDate":"2014-08-24"},{"patientId":43103,"patientName":"BETOURNAY, MARLY","sex":"F","statusIcon":"KARAN_ICON","birthDate":"2014-08-18","decesedDate":null,"ramq":"BETM14581814","mrn":"3010678","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 3 mois","motherMaidenName":null,"phoneNumber":"(514)451-7657","address":"1735 RANG DUMAS","city":"ORMSTOWN","postalCode":"J0S 1K0","status":"Réussite – surveillance en audiologie recommandée","statusDate":"2014-09-04"},{"patientId":43104,"patientName":"CLIMACO-DOS SANTOS, MATHEO","sex":"M","statusIcon":"KARAN_ICON","birthDate":"2014-07-21","decesedDate":"2015-03-24","ramq":"CLIM14072117","mrn":"3011417","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 4 mois","motherMaidenName":null,"phoneNumber":"(438)403-2806","address":"1448, RUE TARDIVEL","city":"LAVAL","postalCode":"H7K 0C2","status":"Décédé","statusDate":"2015-03-24"},{"patientId":43105,"patientName":"CHAGNON, BB DE SINDY","sex":"F","statusIcon":"KARAN_ICON","birthDate":"2014-08-04","decesedDate":null,"ramq":null,"mrn":"3011180","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 4 mois","motherMaidenName":null,"phoneNumber":"(450)793-2578","address":"72 DION","city":"SAINT-LIBOIRE","postalCode":"J0H 1R0","status":"Réussite – surveillance en audiologie recommandée","statusDate":"2014-09-04"}]}

这是明确提到我需要前五个结果时的结果，我如何通过 kendo UI 网格显示它，我正在使用 pageSize 和 total 记录变量但没有运气。这是我的 jQuery Kendo UI 代码

$('#grid').kendoGrid({
        dataSource: {
            transport: {
                read: function (options) {
                   $.ajax({
                       type: "POST",
                       contentType: "application/json",
                       url: "worklist",
                       dataType: 'json',
                       cache: false
                   })
                }
            },
            serverPaging: true,
            timeout: 600000,
            pageSize: 10,
        },
        schema: {
            total: '26315',
            model: {
                fields: {
                    patientName: { type: 'string'},
                    birthDate: { type: 'string'},
                    phoneNumber: { type: 'string'},
                    ramq: { type: 'string'},
                    address: { type: 'string'},
                    mrn: { type: 'string'}
                }
            }
        },
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [
            {
                field: "patientName",
                title: 'Patient name'
            },
            {
                field: "birthDate",
                title: 'BirthDate'
            },
            {
                field:"ramq",
                title:"RAMQ"
            },
            {
                field:"address",
                title: "Address"
            },
            {
                field:"mrn",
                title: "MRN"
            }]
    });

});

使用这个，在我的网络选项卡中，我不断收到 404 未找到，显然库没有为请求提供任何参数，但是我确实看到空的 Kendo UI 网格显示在 page.Thanks 上寻求帮助

Answer 1

经过与队友的进一步协商，我找到了解决办法。似乎你必须创建一个 dataSource 并且在参数中你只需要发送以下 {page: dataSource._page - 1, size: dataSource._pageSize}

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
           $.ajax({
               type: "POST",
               contentType: "application/json",
               url: "worklist",
               dataType: 'json',
               cache: false,
               data:JSON.stringify({page: dataSource._page - 1, size: dataSource._pageSize})
           }).done(function (result) {
               options.success(result);
            }).fail(function (httpRequest, textStatus, errorThrown) {
                alert("Error: " + textStatus + " " + errorThrown + " " + httpRequest);
            })
        }
    }, 
    schema: {
        data: function (result) {
            return result.rows;
        },
        total: function (result) {
            return result.header.cursor.totalElements;
        },
        model: {
            fields: {
                patientName: { type: 'string'},
                birthDate: { type: 'string'},
                phoneNumber: { type: 'string'},
                ramq: { type: 'string'},
                address: { type: 'string'},
                mrn: { type: 'string'}
            }
        },
    },
    
    pageSize: 15,
    serverPaging: true,
    timeout: 600000,
    
});
// Kendo Grid
$(document).ready(function() {
    
    $('#grid').kendoGrid({
        dataSource: dataSource,
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [
            {
                field: "patientName",
                title: 'Patient name'
            },
            {
                field: "birthDate",
                title: 'BirthDate'
            },
            {
                field:"ramq",
                title:"RAMQ"
            },
            {
                field:"address",
                title: "Address"
            },
            {
                field:"mrn",
                title: "MRN"
            }
        ]
    });

});

无法使用 Kendo UI 网格使用后端分页

Unable to use backend pagination using Kendo UI Grid

jquery

kendo-ui