Question

我试图在我的spring MVC / Angularjs Web应用程序中使用ngTable（使用eclipse）。一切似乎都很好：

在我的javascript文件中以JSON格式从我的@RestController检索外部数据
显示包含所有行的表（使用jsp视图）
显示排序，过滤和分页内容（使用jsp视图）

但是所有行都显示在第一页（而不仅仅是前10页）中，当我点击表格标题对排序字段进行排序或输入时，没有任何反应。

我遵循了这个ngTable example，但它没有正常工作。

希望你能帮助我。请宽容，这是我的第一篇文章。

这是我的代码：

JS：

var app = angular.module('app',["ngTable", "ngResource"]);

(function() {

app.controller ('ListeExec', ListeExec);
ListeExec.$inject = ["NgTableParams", "$resource"];

function ListeExec(NgTableParams, $resource) {

    //debugger;

    var svc = $resource("executions/all");

    this.ExecTable = new NgTableParams({
          count: 10, // count per page
          sorting: { date_nj6_str : 'desc' }
      },{   getData: function (params) {
                return svc.query().$promise.then(function (data) {
                    params.total(data.length); // recal. page nav controls
                    return data;
                });
            }
    });

}
})();

JSP：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Liste des exécutions NJ6</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.7.0/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"></script>

<script type="text/javascript" src="js/Executions_angular.js"></script>

<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
    crossorigin="anonymous">
<link rel="stylesheet"; href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.css">
</head>
<body>

    <div class="container" ng-app="app" ng-controller="ListeExec as lex">

        <h1>Liste des éditions de bulletins de paie NJ6</h1>

        <div id="listexecutions" class="table-responsive-xl">

            <table ng-table="lex.ExecTable" class="table table-bordered table-hover table-striped" show-filter="true">
                <tr ng-repeat="exc in $data track by exc.nupro">
                    <td data-title="'#'">{{ $index + 1 }}</td>
                    <td data-title="'Nupro'" filter="{nupro: 'text'}" sortable="'nupro'"><a ng-href="DetailExec?nupro={{ exc.nupro }}">{{ exc.nupro }}</a></td>
                    <td data-title="'Nudoss ZO'" sortable="'nudoss_zo'">{{ exc.nudoss_zo }}</td>
                    <td data-title="'Date NJ6'" filter="{date_nj6_str: 'text'}" sortable="'date_nj6_str'">{{ exc.date_nj6_str }}</td>
                    <td data-title="'Société'" filter="{code_societe: 'text'}" sortable="'code_societe'">{{ exc.code_societe }}</td>
                    <td data-title="'Utilisateur'" filter="{code_user: 'text'}" sortable="'code_user'">{{ exc.code_user }}</td>
                    <td data-title="'Nombre de bulletins'" filter="{ nbre_bull: 'number'}" sortable="'nbre_bull'">{{ exc.nbre_bull }}</td>
                    <td data-title="'Dispatch'"><img style="width:30%; height:auto;" ng-src="{{exc.temoin_dispatch && 'img/ok-icon.png' || 'img/close-icon.png'}}"></td>
                    <td data-title="'Envoi Docapost'"><img style="width:30%; height:auto;" ng-src="{{exc.temoin_envoi && 'img/ok-icon.png' || 'img/close-icon.png'}}"></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

结果在浏览器中： browser view

ngtable外部数据排序，过滤和分页无法正常工作

0 个答案: