Question

我想用jqGrid进行分页，我正在使用以前已经从服务器加载的json数组，因此我没有对服务器进行调用。我正在使用Jade和angularjs。以下我正在使用的代码。玉：

 .col-md-12.grid     
        div(mp-grid="gridControlesTecnicos",
            mp-grid-pager="grid_pager_controlestecnicos",
            mp-grid-model="modDCT.grid.model",
            mp-grid-data="modDCT.grid.data",
            mp-grid-options="modDCT.grid.options")

JS代码：

  /*global appModule */
"use strict";
(appModule.lazy || appModule).controller("DetalleControlesTecnicos", ["$scope", "GridControlesTecnicosSrv", "$modalInstance", "$translate", "datosModal", "$rootScope",
    function($scope, GridControlesTecnicosSrv, $modalInstance, $translate, datosModal, $rootScope) {
        var modDCT = this;
        this.paginacion = {
            pageSize: 5,
            page: 1
        };
        console.log(modDCT.paginacion.page);
        datosModal = datosModal || {};
        modDCT.controlesTecnicos = datosModal.controlesTecnicos;

        function Cancelar() {
            $modalInstance.dismiss();
        }

    function updateDatosPaginacion(newPag, oldPag) {
        if (angular.isObject(newPag) && angular.isObject(oldPag)) {
            modDCT.paginacion = angular.copy(newPag);
            var grid = angular.element("#gridControlesTecnicos");
            if (newPag.page !== oldPag.page) {
                grid.setGridParam("page", newPag.page);
            }
            if (newPag.pageSize !== oldPag.pageSize) {
                grid.setGridParam("rowNum", newPag.pageSize);
            }
        }
    }

    function refrescar() {
        var grid = angular.element("#gridControlesTecnicos");
        var rowNum = grid.getGridParam("rowNum");
        var page = grid.getGridParam("page");
        modDCT.paginacion.page = Number(page);
        modDCT.paginacion.pageSize = Number(rowNum);
    }

    function onInit() {
        modDCT.titulo = "Controles técnicos";
        modDCT.buttonCancelar = datosModal.buttonCancelar || $translate("EmisionHogar.ModalControlesTecnicos.ControlesTecnicosButtonCancelar");
        modDCT.close = Cancelar;
        modDCT.grid = {
            model: undefined,
            data: [],
            options: GridControlesTecnicosSrv.getOptions(refrescar, modDCT)
        };
        modDCT.reloadGrid = true;
    }
    onInit();
}
]);

服务：

  /*global appModule, JSON */
"use strict";
(appModule.lazy || appModule).service("GridControlesTecnicosSrv", ["$filter", "$translate", "$timeout",
    function($filter, $translate, $timeout) {
        function emptyFormatter(val) {
            if (val === undefined || val === null || val === "" || (angular.isString(val) && val.trim() === "")) {
                return "-";
            } else {
                return $filter("uppercase")(val);
            }
        }
    function getOptions(refrescar, modDCT) {
        return {
            colModel: [{
                label: "Codigo", //$translate("ControlesTecnicos.columnas.codigo"),
                name: "codigo",
                index: "codigo",
                width: "150",
                sortable: true,
                formatter: emptyFormatter
            }, {
                label: "Tipo", //$translate("ControlesTecnicos.columnas.tipo"),
                name: "tipo",
                index: "tipo",
                width: "200",
                sortable: true,
                formatter: emptyFormatter
            }, {
                label: "Descripcion", //$translate("ControlesTecnicos.columnas.descripcion"),
                name: "descripcion",
                index: "descripcion",
                width: "200",
                sortable: true,
                formatter: emptyFormatter
            }],
            viewrecords: false,
            rowNum: modDCT.paginacion.pageSize,
            rowList: [5, 10, 15],
            autoencode: true,
            refresh: true,
            datatype: function(postdata) {
                if (modDCT.reloadGrid) {
                    modDCT.reloadGrid = false;
                    var jsonData = {
                        page: modDCT.paginacion.page || 1,
                        total: Math.ceil((modDCT.controlesTecnicos.length || 0) / (modDCT.paginacion.pageSize || 10)) || 1,
                        records: modDCT.controlesTecnicos.length || 0,
                        rows: modDCT.controlesTecnicos || []
                    };
                    angular.element("#gridControlesTecnicos")[0].addJSONData(jsonData);
                }
            },
            autowidth: true,
            height: "auto",
            shrinkToFit: false,
            emptyRecords: $translate("ControlesTecnicos.sinResultados"),
            pagerpos: "left",
            pgtext: "<span>{0}/{1}</span>",
            onSortCol: function() {
                $timeout(function() {
                    refrescar();
                });
            },
            onPaging: function() {
                $timeout(function() {
                    refrescar();
                });
            },
            gridComplete: function() {
                var firstPager = angular.element("#first_grid_pager_controlestecnicos")
                if (firstPager && firstPager.length > 0) {
                    angular.element("#first_grid_pager_controlestecnicos").remove();
                    angular.element("#last_grid_pager_controlestecnicos").remove();
                    angular.element("#prev_grid_pager_controlestecnicos").before(angular.element("#next_grid_pager_controlestecnicos"))
                    angular.element(".ui-separator").remove();
                }
            }
        };
    }
    return {
        getOptions: getOptions
    };
}
]);

充满记录的表，但分页不起作用。这是表格的图片：

Answer 1

我只需要在modDCT.reloadGrid = true;和refrescar()之后添加updateDatosPaginacion。

如何在jqGrid中进行分页？

1 个答案: