javascript - data - Cómo recargar angularJs ng-table

ng-table angular 4

Question

Tengo una mesa ng. Tengo varias tablas ng dentro de un controlador. Les estoy dando atributos dinámicos, es decir, ng-table = "tableParams2" o ng-table = "tableParams3", etc. Estoy haciendo una solicitud de ajax al hacer clic en el botón para actualizar los datos. Mi solicitud http se está enviando al backend. Al hacer clic en 3-4 veces, veo en la consola que mi tabla está recargada. Después de los datos, mis datos permanecen constantes, no veo el contenido recargado en la tabla. A continuación se muestra mi código:

Html:

<button ng-click="qualifyX(2)" ></button>

<div class="dragable modal hide fade ui-draggable in" id="ptn_popup" aria-hidden="false" data-backdrop="false">
<div class="modal-header">
    <a class="close" data-dismiss="modal" data-original-title="" title="">×</a>
    <h4>Possible matched Companies</h4>
</div>
<div class="modal-body" style="padding: 10px;">
    <div id="ptn_qualify_res" class="grid-view">
        <div class="summary"></div>
        <table ng-table="tableParams2" show-filter="true" class="items table table-striped table-bordered table-condensed">
            <tr ng-repeat="business in $data">
                <td data-title="''Primary Trading Name''" sortable="''primary_trading_name''" filter="{ ''primary_trading_name'': ''text'' }">
                    {{business.primary_trading_name}}
                </td>
                <td data-title="''Primary Entity Name''" sortable="''primary_entity_name''" filter="{ ''primary_entity_name'': ''text'' }">
                    {{business.primary_entity_name}}
                </td>
                <td data-title="''Business Name(s)''" sortable="''business_names''" filter="{ ''business_names'': ''text'' }">
                    {{business.business_names}}
                </td>
                <td data-title="''Other Trading Name(s)''" sortable="''other_trading_names''" filter="{ ''other_trading_names'': ''text'' }">
                    {{business.other_trading_names}}
                </td>
                <td data-title="''State''" sortable="''state''" filter="{ ''state'': ''text'' }">
                    {{business.state}}
                </td>
                <td style="width:70px;">
                    <a data-dismiss="modal" href="javascript:void(0)" data={{business.business_id}} class="ptn_qualify_view_link">
                        <button type="button" class="btn btn-mini"><i class="icon-eye-open"></i> View &nbsp;</button>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="modal-footer">
    <a data-dismiss="modal" class="btn" id="yw11" href="javascript:void(0);" data-original-title="" title="">Close</a>
</div>
</div>

App.js

$scope.qualifyX = function(busID) {
    var penModal = $(''#popups_container'' + busID + '' #pen_popup'');
    var pen = $(''#popups_container'' + busID).next().find(''input#Custombusiness_primary_entity_name'').val();
    var selectors = {pen: pen, penModal: penModal};
    $http.get(getPtnData + ''?ptn='' + selectors.ptn).success(function(data) {
        selectors.ptnModal.find(''#ptn_qualify_res'').removeClass(''grid-view-loading'').addClass(''grid-view'');
        $scope[''tableParams'' + busID] = new ngTableParams(
                {
                    page: 1, // show first page
                    count: data.length, // count per page
                    sorting:
                            {
                                primary_trading_name: ''asc''     // initial sorting
                            }
                }, {
            total: 0, // length of data
            getData: function($defer, params) {
                var filteredData = params.filter() ?
                        $filter(''filter'')(data, params.filter()) :
                        data;
                var orderedData = params.sorting() ?
                        $filter(''orderBy'')(filteredData, params.orderBy()) :
                        data;

                params.total(orderedData.length); // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        }); 
    });
};

Cree un Plunker algo similar, en cada clic quiero volver a cargar la tabla con datos nuevos.

Answer 1

En caso de que alguien más golpee esto. Creé mi propio filtro que crea una nueva matriz de tamaño.

solía

$scope.tableParams.total(data.length)

para actualizar la longitud antes de volver a cargar la tabla.

Answer 2

Estaba teniendo un problema muy similar en el que mi tabla se estaba procesando pero no se estaba recargando en una acción. Lo que debe hacer es volver a cargar $ scope.tableParams cada vez que se haga clic en el botón. Una forma sencilla de hacer esto es envolver $ scope.tableParams.reload () en una función y luego llamar a esa función cuando se hace clic en el botón.

código del controlador:

$scope.doSearch = function () {
    $scope.tableParams.reload();
}

código HTML:

<button ng-click="doSearch()">Search</button>

Answer 3

Este código funciona para mí, escríbalo en su función, donde obtiene sus datos dinámicos

  $scope.tableParams.reload();
  $scope.tableParams.page(1);
  $scope.tableParams.sorting({});

Answer 4

Resolví finalmente el problema.

Cuando recibí los datos de actualización de la tabla, es necesario volver a cargar la tabla de la siguiente manera:

$scope.tableData = data;

$scope.tableParams.total($scope.tableData.length);
$scope.tableParams.reload();