AngularJs 数据表动态表变化答案

【问题标题】：AngularJs datatable dynamic table changeAngularJs 数据表动态表变化
【发布时间】：2015-07-19 13:30:53
【问题描述】：

我正在做一个项目，我想做一些对我来说是新的事情。我是 AngularJS 的新手，也是角度数据表的新手。

我从here 获得了角度数据表，这对我来说有点棘手，因为我真的不知道如何使用它。例子对我来说不是很容易解释。

我想做什么：

我有一个单独的页面，左侧有一些复选框
在右侧我想要一个数据表，其中包含用户单击复选框后服务器提供的数据
数据表必须动态更改，因为取决于请求，我有其他数据表标头。例如，当用户单击“角色”返回的对象只有 2 个字段 id 和角色时，我想呈现角色列而不是 id。当用户点击“用户”时，服务器返回的数据有多个对象，这些对象具有更多的字段，例如：“accNonExp”、“accNonLocked”、“email”、“username”等。

我该怎么做？

这是我现在的conde：

js:

depo.controller('masterMainController', ['$scope', '$http', function ($scope, $http) {
    $scope.listOfTables = null;
    $scope.tableData = {};

    $scope.onClick = function(){
        $scope.tableData = getTableData($scope.valueSelected);
    };

    $http.post('/master/listOfTables').success(function (response) {
        $scope.listOfTables = response;
        console.log(response);
    });

    function getTableData(table) {
        $http.post('/master/tableData/' + table).success(function (response) {
            console.log(response);
            return response;
        });
    }

    $scope.dataTable = function(DTOptionsBuilder, DTColumnBuilder) {
        var vm = this;
        vm.dtOptions = DTOptionsBuilder.fromJson($scope.tableData)
            .withPaginationType('full_numbers');
/*        vm.dtColumns = [
            DTColumnBuilder.newColumn('id').withTitle('ID'),
            DTColumnBuilder.newColumn('firstName').withTitle('First name'),
            DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
        ];*/
    }
}]);

JSP：

<%@ include file="/WEB-INF/views/includes/onlyForLoggedUsers.jsp" %>
<html>
<head>
    <title>Main Master</title>
</head>
<script content="text/javascript" src="/res/custom_script/admin/masterMain.js"></script>
<body ng-app="depo">
<div class="container-fluid" ng-controller="masterMainController">
    <p class="logout_paragraph">Logged as <strong>${pageContext.request.userPrincipal.name}</strong> | <a
            id="logout_link" onclick="formSubmit()">Logout</a></p>

    <form action="/logout" method="post" id="logoutForm" style="display: none;">
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
    </form>
    <div class="jumbotron">
        <h2>Welcome !</h2>
    </div>
    <div>
        <div id="divChkListOfTables" class="admin_left_menu pre-scrollable col-md-2">
            <div id="chkListOfTables" class="admin_tables_list radio">
                <h4>Tables</h4>
                <label ng-repeat="table in listOfTables.tables" class="admin_tables_list_chk_box">
                    <input type="radio" name="chkTablesRadio" ng-model="$parent.valueSelected" ng-change="onClick()"
                           ng-value="table" class="radio-button"> {{table}}
                </label>
            </div>
        </div>
        <div id="admin_data_table" class="col-md-10">
            <table datatable="dataTable" dt-options="masterMainController.dtOptions" dt-columns="masterMainController.dtColumns" class="row-border hover">

            </table>

        </div>
    </div>
</div>
</body>
</html>

Spring RestController：

@RestController
@RequestMapping(value = "/master")
public class MasterMainRest {

    @Autowired
    UnitService unitService;

    @Autowired
    RoleService roleService;

    @Autowired
    UsersService usersService;

    @RequestMapping(value = "/listOfTables", method = RequestMethod.POST)
    public MasterTablesDTO getListOfTables(){
        List<String> tables = new ArrayList<>();
        tables.add("unit");
        tables.add("role");
        tables.add("users");

        MasterTablesDTO masterTablesDTO = new MasterTablesDTO();
        masterTablesDTO.setTables(tables);

        return masterTablesDTO;
    }

    @RequestMapping(value = "/tableData/{table}", method = RequestMethod.POST)
    public List getTablesData(@PathVariable String table){
        List list = null;
        switch (table){
            case "unit":
                list = unitService.findAll();
                break;
            case "role":
                list = roleService.findAll();
                break;
            case "users":
                list = usersService.findAll();
                break;
        }
        return list;
    }

}

当我到达这个页面时，我遇到了这个错误：

TypeError: Cannot read property 'aDataSort' of undefined
    at U (jquery.dataTables.min.js:63)
    at xa (jquery.dataTables.min.js:67)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:91)
    at Function.n.extend.each (jquery-2.1.3.min.js:2)
    at n.fn.n.each (jquery-2.1.3.min.js:2)
    at m [as dataTable] (jquery.dataTables.min.js:83)
    at h.fn.DataTable (jquery.dataTables.min.js:159)
    at Object.g [as renderDataTableAndEmitEvent] (angular-datatables.min.js:6)
    at Object.h [as doRenderDataTable] (angular-datatables.min.js:6)
    at Object.d.render (angular-datatables.min.js:6)

是的，我知道这个错误是因为 $scope.tableData 是空的，或者这是我在某些论坛上看到的。我怎样才能使第一个复选框被选中，并且 $scope.tableData 加载了根据该复选框选中的数据？

提前谢谢你！

【问题讨论】：

标签： javascript jquery angularjs datatables

【解决方案1】：

由于 getTableData(table) 函数没有返回任何值 $scope.tableData 如您所述未定义。这是因为 AJAX 请求是异步的。

要解决此问题，您必须在填充 $scope.tableData 的位置提供对 $http 成功的回调。要了解更多关于 q 实现的 promises checkout angulars 文档：

https://docs.angularjs.org/api/ng/service/$q

这样的事情应该可以解决它。

$scope.onClick = function(){
    getTableData($scope.valueSelected).success(function(response) {
        $scope.tableData = response.data 
    });
};

function getTableData(table) {
    return $http.post('/master/tableData/' + table);
}

【讨论】：

在我的 conde 中，当我点击其中一个复选框时，onClick 正在返回数据
当然，但是在您提供的代码中，您没有正确设置 $scope.tableData。正如我提到的，$http.post 方法不返回任何数据，而是返回一个包含成功方法的承诺。在我的示例中，您可以看到我在传递给该成功方法的回调中设置了 $scope.tableData。