Question

我正在使用angularjs ng-table模块。我想通过单击标题使表格可排序。这是相关的HTML代码。

<div ng-controller="ViewCtrl" class="container">
    <table ng-table="tableParams" class="table table-bordered">
        <thead>

        <tr>
            <th>name</th>            
            <th>changeInPercent</th>
            <th>Ratio</th>
        </tr>

        <thead>
        <tbody>
        <tr ng-repeat="stk in $data">
            <td data-title="'name'" filter="{ name: 'text'}" sortable="'name'" " >
                {{stk.name}}
            </td>
            <td data-title="'changeInPercent'" >
                {{stk.changeInPercent}}
            </td>
            <td data-title="'Ratio'" >
                {{stk.Ratio}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

相关的控制器代码如下所示;

.controller('ViewCtrl', ['$scope', '$http', 'configuration', 'ngTableParams',
    function ($scope, $http, $configuration, ngTableParams) {
        var tableData = [];
        //Table configuration
        $scope.tableParams = new ngTableParams({
            page: 1,
            count: 100
        }, {
            total: tableData.length,
            //Returns the data for rendering
            getData: function ($defer, params) {                    
                var url = $configuration.webroot + '/fsa/list?list=XXlist';
                $http.get(url).then(function (response) {
                    tableData = response.data;
                    $defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    params.total(tableData.length);
                });
            }
        });
    }])

正确显示表格数据。我希望通过单击可以对名称列进行排序。但是，名称列仍然不可移植。代码有什么问题？

Answer 1

你没有妥善关闭td：

 <td data-title="'name'" filter="{ name: 'text'}" sortable="'name'">

Answer 2

终于搞定了！

只需删除thead元素即可。它将使用您在data-title属性中提及的标题自动构建。

编辑：这是JsFiddle。您可能需要在getData中添加一些处理，如以下代码段所示：

$scope.tableParams = new ngTableParams({
  // ...
}, {
  // ...
  getData: function($defer, params) {
    // apply sorting and such 
    $scope.tableData = params.sorting() ? $filter('orderBy')($scope.tableData, params.orderBy()) : $scope.tableData;
    $scope.tableData = params.filter() ? $filter('filter')($scope.tableData, params.filter()) : $scope.tableData;
    $scope.tableData = $scope.tableData.slice((params.page() - 1) * params.count(), params.page() * params.count());
    $defer.resolve($scope.tableData);
  }
});

希望这有帮助。

Answer 3

html和控制器代码都有错误。

从html代码中删除thead和tr元素;

<div ng-controller="ViewCtrl" class="container">
    <table ng-table="tableParams" class="table table-bordered">
        <tbody>
        <tr ng-repeat="stk in $data">
            <td data-title="'name'" filter="{ name: 'text'}" sortable="'name'" " >
                {{stk.name}}
            </td>
            <td data-title="'changeInPercent'" >
                {{stk.changeInPercent}}
            </td>
            <td data-title="'Ratio'" >
                {{stk.Ratio}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

将params.sorting（）添加到控制器代码中。

.controller('ViewCtrl', ['$scope', '$http', 'configuration', 'ngTableParams',
    function ($scope, $http, $configuration, ngTableParams) {
        var tableData = [];
        //Table configuration
        $scope.tableParams = new ngTableParams({
            page: 1,
            count: 100
        }, {
            total: tableData.length,
            //Returns the data for rendering
            getData: function ($defer, params) {                    
                var url = $configuration.webroot + '/fsa/list?list=XXlist';
                $http.get(url).then(function (response) {
                    tableData = response.data;
                    tableData = params.sorting() ? $filter('orderBy')(tableData, params.orderBy()) : tableData;
                    tableData = tableData.slice((params.page() - 1) * params.count(), params.page() * params.count());   
                    $defer.resolve(tableData);
                    params.total(tableData.length);
                });
            }
        });
    }])

通过单击带有angularjs ngtable的标题，使表格标题可排序

3 个答案: