Ng-table: tableParams.reload () no recarga los datos del filtro

Creado en 27 ene. 2014  ·  30Comentarios  ·  Fuente: esvit/ng-table

Estoy usando tableParams.reload () (y params.total (filterData.length)) que recarga la tabla con los nuevos datos externos, pero las selecciones en los filtros "select" y "select-multiple" no cambian. tableParams.reload () debería llamar a las funciones "filter-data" de nuevo, ¿no? ¿Hay otra forma de lograr esto?

Comentario más útil

Mis datos se cargan correctamente en DOM, pero cuando obtengo los datos del servidor y quiero actualizar la tabla ng mediante tableParams.reload (), no refleja el resultado, pero cuando hago clic en ordenar o paginar, refleja el resultado.
¿Qué problema puede ser este?

Todos 30 comentarios

Hola. En primer lugar, gracias por el proyecto.
Tengo el mismo problema. Necesito actualizar filtros con datos obtenidos de un servidor, pero no tengo idea de cómo activar la función de datos de filtro.

Descubrí que si declaras tus datos directamente dentro de la función getData, parece actualizar la tabla.
Entonces ..... getData: function ($ diferir, params) {
var data = $ scope.yourdata;
var orderData = ...............................
}

Mis datos se cargan correctamente en DOM, pero cuando obtengo los datos del servidor y quiero actualizar la tabla ng mediante tableParams.reload (), no refleja el resultado, pero cuando hago clic en ordenar o paginar, refleja el resultado.
¿Qué problema puede ser este?

Me gustaría respaldar lo que sugirió

Tuve el mismo problema con @developersatish.
Espere una resolución a este problema.

Hola a todos. Recientemente comencé a usar ngTable. Estoy teniendo un problema similar, especialmente con ngTables anidadas y recargando datos separados de los datos principales. aquí hay una idea rápida:

controlador principal:

var parentData = [...];

$ scope.details = -1

$ scope.showDetails = function (id) {
$ scope.details = id;
};

// ngTable ////////
$ scope.tableParams = new ngTableParams ({
page: 1, // mostrar la primera página
recuento: 10, // recuento por página
clasificación: {
id: 'asc' // clasificación inicial
}
}, {
total: parentData.length, // longitud de los datos
getData: function ($ diferir, params) {
// usa filtro angular incorporado
var orderData = params.sorting ()?
$ filter ('orderBy') (parentData, params.orderBy ()):
parentData;
$ diferir.resolver (OrderData.slice ((params.page () - 1) * params.count (), params.page () * params.count ()));
}
});

en el html tengo un ng-clic para enviar la identificación a esto y cambiar el alcance de los detalles.

Controlador infantil (tabla secundaria que se relaciona con el primer controlador):

var childData = [...];

$ alcance. $ padre. $ reloj ('detalles', función () {
console.log ("lo hiciste aquí");
$ scope.tableParams2.reload ();
});

// child ngTable ////////
$ scope.tableParams2 = new ngTableParams ({
page: 1, // mostrar la primera página
recuento: 10, // recuento por página
clasificación: {
id: 'asc' // clasificación inicial
}
}, {
total: childData.length, // longitud de los datos
getData: function ($ diferir, params) {
// usa filtro angular incorporado
var orderData = params.sorting ()?
$ filter ('orderBy') (childData, params.orderBy ()):
childData;
$ diferir.resolver (OrderData.slice ((params.page () - 1) * params.count (), params.page () * params.count ()));
},
$ alcance: {$ datos: {}}
});

Puedo ver el cambio cuando hago clic, pero mi tabla secundaria no se actualiza. No estoy seguro de si esto ayuda, pero creo que está relacionado.

Hola,
También tengo los mismos problemas que @developersatish. Los datos de la tabla solo se actualizan después de ordenar o filtrar la tabla. ¿Existe alguna solución a este problema?

Tengo un problema similar.

En un evento de clic, comienzo a recuperar datos de un servidor (múltiples llamadas).
Entonces tengo un bucle for y allí tengo solicitudes GET y almaceno los resultados que regresan en una variable de alcance que quiero trazar en una tabla asincrónica.

Sin embargo, al hacer clic, creo una instancia de mi tabla de la siguiente manera:

`$scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            Country: 'asc' // initial sorting
        }
    }, {
        total: $scope.continentTableData.length, // length of data
        getData: function($defer, params) {
            for (var i = 0; i < numberOfCountries; i++) {
                try {
                    var country = $("path[class*=" + $scope.currentContinentCountries[i].toUpperCase() + "]")[0].__data__.properties.name;
                    MapService.getInfographicsData(2013, country, function(infrographicsData) {
                        counter++;
                        // debugger;
                        var cpi = infrographicsData[0].data.CPI;
                        var trace = infrographicsData[1].data;
                        var countryName;

                        if (cpi == null) {
                            countryName = trace.Ref_Country;
                        } else {
                            countryName = cpi.Country;
                        }

                        var joinedData = {
                            Country: countryName,
                            Cpi: cpi,
                            Trace: trace
                        }
                        $scope.continentData.push(joinedData);

                        $scope.continentTableData = $scope.continentData;

                        // if (counter==numberOfCountries-1) {
                        //     console.log("tier");
                            $timeout(function() {
                            // update table params
                            params.total($scope.continentTableData.length);
                            // set new data
                            console.log("new data set");
                            $defer.resolve($scope.continentTableData);
                        }, 1500);
                        // };

                    });
                } catch (e) {
                    // console.log(e);
                    continue;
                }                    
            }

            // $scope.$apply();
        }
    });`

como en el ejemplo de ngTable con ajax. Sin embargo, no se muestra nada en la tabla (nunca se llama a getData).

Si hago clic en "actualizar" tableParams, la tabla comienza a cargar todo excepto que cada elemento está duplicado.

¿Alguna idea?

@developersatish Pude reflejar nuevos datos del servidor copiando la funcionalidad adjunta a los botones de paginación.

$scope.tableParams.count(1);

Puse esto en la devolución de llamada de mi solicitud.

myRequest().then(function(response) {
    $scope.data = response;
    $scope.tableParams.total($scope.data.length);
    $scope.tableParams.count(1);
});

Editar:

En mi publicación original, el 1 en $scope.tableParams.count(1) debería ser reemplazado por una variable que contenga el valor establecido en count en ngTableParams .
Consulte http://embed.plnkr.co/harWG3J6OlNHzbOu0e6S/preview para ver un ejemplo de trabajo.

Dado que este es el resultado de búsqueda principal para este problema, incluiré lo que hice para mi solución. Simplemente almacené en mi $ scope la matriz de objetos {id, title} que se usa como argumento para defer.resolve en la función filter-data. (podría estar / probablemente esté vacío inicialmente). Luego puede actualizar esa matriz en cualquier momento y los cambios se reflejarán en la selección del filtro. Así que lo actualizo cuando mi llamada ajax devuelve la respuesta del servidor.

También en mi caso, el conjunto de datos de la tabla se expande (aumenta) a medida que el usuario expande el rango de búsqueda. Esto requiere que también modifique (aplique una diferencia a) los filtros de selección.

Intenté eso pero no funciona. ¿Puedes pegar tu ejemplo de trabajo?

Hola chicos,
Tengo el mismo problema que @almaplayera , tengo un escenario como

1. Los datos de filtro utilizados en el menú desplegable provienen del servicio.

2. Y para actualizar los mismos datos tengo una sección desde donde el usuario puede agregar nuevas entradas / actualizar las existentes.

3. Después de agregar / actualizar las entradas de agregar / editar la sección filterdata para el menú desplegable, ese menú desplegable debe actualizarse una vez que la tabla se esté recargando.

Estoy haciendo esto para que los datos de mi empresa se filtren -

screen4ngtable

Después de eso, llamé al método getCompany en los datos de filtro de mi vista -

screen5ngtable

¿Alguien puede sugerir alguna solución para actualizar mis datos de filtro con los datos recientes del servicio o proporcionar algunos ejemplos para casos de uso similares?

@esvit : intenté obtener mis datos en la devolución de llamada getData en ngTablePrams y los vinculé a $ scope después de eso, intenté pasar la misma variable a los datos de filtro en la vista, algo como @israelidanny sugerido en https://github.com/esvit / ng-table / pull / 342 pero eso tampoco me funciona. :(

PD: estoy haciendo tableParams.reload (); después de agregar y editar.

Ya no tengo mi código porque cambié de ng table antes de cometer algo. Sin embargo, yendo de memoria:

Las funciones de filtro (su función getCompany) solo se invocan una vez en la tabla init. Por lo tanto, debe aplicar cambios a la matriz de datos resuelta siempre que haya cambios de registro y angular aplicará esos cambios al dom.

$scope.company_filter = [];

$scope.getCompanyFilter = function(data) {
  var def = $q.defer();
  companyService.getAll().success(function(response) {
    $scope.updateCompanyFilter(response.data);
    def.resolve($scope.company_filter);
  });
  return def;
};

$scope.updateCompanyFilter = function(data) {
  $scope.company_filter.length = 0;
  for (i in data) {
    $scope.company_filter.push({
        'id': data[i].id,
        'title': data[i].name
    });
  }
};

// Then wherever you refresh your table data, just call updateCompanyFilter(data).
// Or you could micro manage the filter array when you do adds/deletes instead of reseeding it every time.

<td ... filter-data="getCompanyFilter($column)" >

Una vez más, podría estar equivocado ya que han pasado unos meses.

¿Se solucionó este problema en la última versión de ng-table?

¿Alguien podría proporcionar un código de ejemplo?

No creo que lo sea.

Ahora bien, no creo que sea demasiado difcil hacer el
La función controller.loadFilterData está disponible para ser llamada desde el
tablParams. Entonces podrá llamar a esto cuando las listas cambien en
su aplicación.

C

El viernes 19 de junio de 2015 a las 6:59 a. M., RachithaShetty [email protected]
escribió:

¿Se solucionó este problema en la última versión de ng-table?

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/esvit/ng-table/issues/186#issuecomment -113384084.

: +1: @kyleboyle : tu solución es

Parece que la resolución de este problema (Pull request 403: https://github.com/esvit/ng-table/pull/403) se fusionó en v0.4.2, pero el cambio que hizo se ha revertido desde entonces.

En la línea 549 de ng-table.js cambiar

$ scope. $ watch ('params. $ params', function (newParams, oldParams) {
a
$ scope. $ watch ('[params. $ params, params.data]', function (newParams, oldParams) {

Esto resolvió el problema con los datos que se actualizaban, pero la tabla no se actualizaba para representar los cambios.
Parece que este error se reintrodujo en esta confirmación: https://github.com/esvit/ng-table/commit/9189e987fba90b07ffc6b17c982961ad65edf725#diff -6aca4bc06732c0635eb9860dc6cd040fL490

Desafortunadamente, $watch 'ing params.data causa problemas en ciertas circunstancias:

cuando los elementos dentro de params.data son complejos e incluyen referencias circulares, $watch 'ing _by value_ provoca una excepción de desbordamiento de pila cuando angular.copy crea un clon profundo.

Creo que una versión más reciente de angular.copy soluciona este problema en particular, sin embargo, sigue siendo una mala idea mirar params.data _by value_ por razones de rendimiento.

@kyleboyle ¡ Este código funciona perfectamente! ¡Gracias! Y agregar la función inArray puede filtrar los duplicados.

    $scope.manufacturer_filter = [];
    $scope.getManufactFilter = function(column){
        var def = $q.defer();
        ResourseAPI.query(function(data){
            $scope.updateManufactFilter(data.devices);
            def.resolve($scope.manufacturer_filter);
        });
        return def;
    };
    $scope.updateManufactFilter= function(data) {
        var arr = [];

        angular.forEach(data, function (item) {
            if (inArray(item.manufacturer, arr) === -1) {
                arr.push(item.manufacturer);
                $scope.manufacturer_filter.push({
                    'id': item.manufacturer,
                    'title': item.manufacturer
                });
            }
        });
    };

    var inArray = Array.prototype.indexOf ?
    function (val, arr) {
        return arr.indexOf(val);
    } :
    function (val, arr) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === val) return i;
        }
        return -1;
    };

@kyleboyle Tu solución es genial.
¿Alguien sabe si podría implementar algo similar pero usando ng-table-dynamic?
Carga columnas dinámicamente mediante javascript.

Ejemplo:

var column = {
    title: 'Example',
    sortable: 'example',
    filter: 'example',
        filterData: .....,
    show: true,
    field: 'example'
};

¿Qué debería establecer la propiedad filterData? ¿O hay otra forma de recargar los filtros de datos?

Hay muchas formas diferentes de especificar la matriz que el filtro de selección utilizará como fuente de datos. Cada uno de estos métodos se aplica tanto a ng-table como a ng-table-dynamic .

¿Quizás el siguiente ejemplo de código pueda ayudarlo a resolver algo?

http://codepen.io/christianacca/pen/JdqjxB?editors=101

Buena muestra, pero no encuentro la solución a mi problema. En todos los ejemplos, los datos se cargan solo una vez (sincronizados o asincrónicos) pero no se vuelven a cargar.

Un ejemplo de lo que obtengo es:
Tengo dos columnas: Países y ciudades, cada una con un filtro.
Entonces:

  • Cuando el filtro de país es nulo, el servidor solicita todas las ciudades.
  • Cuando se selecciona el filtro de país, pregunte al servidor cuál es la única ciudad que aplica ese país y actualice la columna filterData of cities.

¿Se entiende? Lo siento por mi ingles.

Gracias por la respuesta.

@kyleboyle ninguna de estas soluciones funciona para mí (ni siquiera estoy haciendo ningún filtrado) y lo tomo como una señal de mala calidad del código que la tabla no se actualiza cuando lo hacen los datos subyacentes. ¿A qué solución de mesa angular te cambiaste?

@BartoGabriel Creo que lo que intentas hacer es posible. Un tipo con el que trabajé resolvió el problema creando su propia plantilla de filtro que hizo exactamente lo que usted dijo. Anuló la plantilla select.html de manera similar al siguiente ejemplo: http://codepen.io/christianacca/pen/xGeWGX?editors=101

Lo siento, no puedo ser más útil, ¡solo presioné por tiempo!

Oh, por cierto, el tipo que mencioné, usó el ui-select2

@christianacca gracias por tu ayuda. Fue muy útil.
Cuando tenga la solución la compartiré.

Frio :-)

Hola chicos, ¿mi solución es totalmente incorrecta o @kyleboyle es solo una mejor alternativa?

@telwing tu solución no funcionó para mí, pero tampoco lo hizo @kyleboyle 's. Sin embargo, en realidad no estoy haciendo ningún filtrado. Solo estoy ordenando datos de una matriz, $ scope.users. Cuando elimino un elemento de esa matriz y llamo a reload () en los parámetros de la tabla, no sucede nada. Es realmente sorprendente que algo como esto sea tan complicado a menos que me falte algo básico.

También tengo los mismos problemas que @ developersatish.También intenté configurar el recuento de tableParams pero mi llamada a la función getdata solo en la carga de la página mientras filtraba los datos por lista desplegable no es capaz de llamar a esta función

$ scope.tableParams = new ngTableParams ({
page: 1, // mostrar la primera página
recuento: 8, // recuento por página
clasificación: {
LastSeen: 'desc' // clasificación inicial
},
filtro: {
PatientName: '', // filtro inicial
},
}, {
filterSwitch: verdadero,
getData: function ($ diferir, params) {
// usa filtro angular incorporado
var filterData = params.filter ()?
$ filter ('filtro') ($ scope.items, params.filter ()):
$ scope.items;

        var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
        params.total(orderedData.length); // set total for recalc pagination
        $scope.tableParams.count(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));



    }
});
¿Fue útil esta página
0 / 5 - 0 calificaciones