Ng-table: Ejemplo con clasificación, filtrado, agrupación y paginación del lado del servidor ...

+1

+1

Hola, ng-table, esta es solo una biblioteca cliente, parte del servidor que puede hacer como desee. Por ejemplo, puede buscar esta parte del código https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87

@esvit : la solicitud fue para un ejemplo completo del manejo de la tabla ng, la paginación, la clasificación, el agrupamiento, el filtrado, etc. del lado del servidor, etc. Estoy de acuerdo en que ng-table es una biblioteca cliente, pero este ejemplo realmente ayudaría porque mucho de los escenarios implican el uso de esta biblioteca cliente con datos remotos ...

@esvit, sí, todo lo que nos gustaría es algo que muestre cómo uno _debe_ hacerlo, es decir, ¿qué espera el objeto JSON ng-table?

+1
Incluso si solo una forma de interceptar los eventos de clic de filtrado, clasificación y paginación nos ayudaría a conectar el resto al servidor ... gracias

gran biblioteca por cierto ...

+1

+1

+1

+1 si hay alguna forma agradable de llamar a una función personalizada para ordenar, pero no es necesario.

Ponga ng-click = "sort (vars, directionToggle)" en el encabezado e incluso puede dejar la ordenación habilitada. A continuación, mostrará las flechas correctamente siempre que su palanca de dirección coincida con su palanca.
El filtrado es un poco más complicado, yo diría que para deshabilitar el filtrado de ng-table y agregar una entrada de filtro completamente personalizada al encabezado, entonces no necesita preocuparse por la intergeneración de ng-table.

A partir de ahí, se trata de tratar con los datos de su backend y asegurarse de que le envíen los datos correctos en el orden correcto. Luego, simplemente conecte esos datos y bam, tendrá una tabla de clasificación / filtrado ajax.

+1

En caso de que esto sea útil para comenzar, aquí hay un ejemplo de paginación del lado del servidor. El cliente envía el número de página y el tamaño de la página al servidor, y el servidor devuelve las filas de datos solo para esa página y el número total de filas como encabezado de respuesta.

    $scope.tableParams = new ngTableParams({
      page: 1, count: 10
    }, {
      getData: function($defer, params) {
        var receiveData = function(data, responseHeaders) {
          // in my case, the server returns the total number of rows as a response header
          // call params.total(...) to tell ng-table the total number of rows
          params.total(responseHeaders("count"));

          // the server returns just the data for the current page, so can send it as is
          $defer.resolve(data);
        };

        // getData gets called when you click on a different page in the pagination links.
        // get the page number and size from params.$params
        var pageNumber = params.$params.page;
        var pageSize = params.$params.count;

        // set up the query parameters as expected by your server
        var queryParams = {"paging.pageSize":pageSize, "paging.pageNumber":pageNumber};

        // send an ajax request to your server. in my case MyResource is a $resource.
        MyResource.query(queryParams, receiveData);
      }
    });

Espero que sea de ayuda para alguien.
foxdonut

+1

+1

+1

realmente bueno

Sé que es un poco tarde, pero alguien hizo un muy buen ejemplo de mostrar datos ordenados del lado del servidor:
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

No sabía que podíamos hacer esto. Esto no está tan claro en la documentación. :(

Hola foxdonut,
Tu comentario realmente ayuda por completo, pero como soy nuevo pocas cosas no me quedan claras
1 # Por qué receiveData se pasa como argumento a una función.
Cuando llamo a mi función ajax en lugar de
MyResource.query (queryParams, receiveData);
muestra datos, pero como ajax regresa más tarde, el recuento no se actualiza. Y si estoy usando la recarga dentro del código ajax, entra en un bucle infinte :(

Hola @ rbhargava25

Por qué receiveData se pasa como argumento a una función.

Porque MyResource.query es una función asincrónica. Está haciendo una solicitud al servidor, y cuando la respuesta regresa, necesitamos saber qué código ejecutar. En este caso, es para llamar a la _función de devolución de llamada_, que es receiveData .

Espero que ayude.

Muchas gracias Foxdonut ...
Usaré una solicitud http simple en lugar de Resource. Espero que funcione.