标签: ngtable

我从后端获取数据列表并使用ng-table显示它.问题是它没有显示分页控件.以前,当我使用虚拟数据显示ng-table时,分页工作完全正常.有人可以帮帮我吗？

这是我的HTML:

<table ng-table="tableParams" show-filter="true" class="table">
            <thead>
                    <tr>
                            <th ng-repeat="column in columns" ng-show="column.visible"
                                    class="text-center" ng-class="{
                                    'sort-asc': tableParams.isSortBy(column.field, 'asc'),
                                    'sort-desc': tableParams.isSortBy(column.field, 'desc'),
                                    'sortable': !$first
                                    }"
                                    ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
                                    <div>{{column.title}}</div>
                            </th>
                    </tr>

            </thead>
            <tr ng-repeat="user in data | filter:searchText">

                    <td width="30" style="text-align: left">
                            <input type="checkbox" ng-model="checkboxes.items[user.id]" />
                    </td>

                    <td data-title="'Email Id'" class="text-center" sortable="email" ng-show="columns[1].visible">
                            <span>{{user.email}}</span>
                    </td>
                    <td data-title="'User Karma'" class="text-center" sortable="userkarma" ng-show="columns[2].visible">
                            <span>{{user.userkarma}}</span>
                    </td>
                    <td data-title="'Date Joined'" class="text-center" sortable="datejoined" ng-show="columns[3].visible">
                            <span>{{user.datejoined}}</span>
                    </td>
                    <td data-title="'Unsubscribed'" class="text-center" sortable="status" ng-show="columns[4].visible">
                            <span>{{user.unsubscribed}}</span> …

我正在使用ng-table来设置自定义分页控件.我想要一个只允许有效页码的输入.到目前为止我有现有的分页.

script(type="text/ng-template" id="ng-table-pagination-input")
  div(class="ng-cloak ng-table-pager" ng-if="params.data.length")
    br
    ul(ng-if="pages.length" class="pagination ng-table-pagination")
      li(ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type")
        a(ng-switch-when="prev" ng-click="params.page(page.number)" href="")
          span «
        a(ng-switch-when="next" ng-click="params.page(page.number)" href="")
          span »

如何让输入控件在那里正常工作？

我正在尝试使用ngTables使用AJAX调用对数据进行排序和过滤.目前我能够使用ng-repeat复制数据,但我的排序功能都不适用.我引用了这个示例http://plnkr.co/edit/zuzcma?p=info并且能够使用mock.js文件使其工作,但是现在我正在使用我加载到我的网络服务器上的文件我似乎无法让它发挥作用.

我相信答案很简单,感谢任何帮助.我附加了我的标记,以显示我的控制器和html文件的样子.谢谢大家,如果您需要更多信息,请告诉我们!

以下是我引用的API的一些链接.

http://bazalt-cms.com/ng-table/

http://bazalt-cms.com/ng-table/example/6

HTML:

<div ng-controller="myController">
  <table ng-table="tableParams" show-filter="true" class="table table-condensed">
    <tr ng-repeat="user in data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
    </tr>
  </table>
</div>

控制器:

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

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

 $http.get('http://jsondata.com/myjson.json')
  .success(function(data, status) {
    $scope.data = data;
  });

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        foo: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data …

我正在尝试应用ngTable directive到我的Rails应用程序,但无法正确使用它.我仍然是角色的新手,这个指令似乎记录很差(虽然有很多很好的例子).

所以我有一个名为$scope.users包含我需要的所有用户信息的数组(例如像这样),它来自a $resource query().

我需要把它变成一个表格:

1. 排序
2. 分页
3. 从一个输入过滤(就像在这里完成)

有人可以提供解决方案,或者至少提供一些如何将它们放在一起的建议吗？

UPDATE

因此,在irc频道的wafflejock的帮助下,我已经能够整合一些功能.这是插件.

还有什么不对:

1. 每次更改页面,排序或其他任何内容时,都会请求json数据集.这是一个巨大的请求,所以我需要它以某种方式缓存.
2. 我需要能够操纵控制器中的数据集来更改值并在需要时删除用户.仍然不知道如何实现这一点.

我使用ng-table创建了一个应用程序,应用程序工作正常,使用ng-table生成了表.我面临的问题是表排序不起作用.我的代码如下所示

工作演示

HTML

<table ng-table="tableParams" class="table">
        <tr ng-repeat="user in myValues">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
</table>

脚本

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    $scope.myValues = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: …

我在ngTable中使用groupBy,但现在我需要在表中进一步分组:

$scope.tableParams = new ngTableParams({
    count: 100,
    sorting: {
        PremiumElementGroup: 'desc',
        PremiumElement: 'desc',
        LegalEntity: 'asc',
        SettlementCurrency: 'asc'
    }
}, {
    counts: [],
    groupBy: 'PremiumElementGroup' <--- only allows one level of grouping...
    , getData: function ($defer, params) {
        var orderedData = $filter('orderBy')($scope.section.PremiumCessionOverrides, params.orderBy());
        $defer.resolve(orderedData);
    }
});

我能做些什么来实现我的目标吗？还是我可以用的另一个网格工具？

全部,我正在使用网格的ng-table.我正在使用以下代码段来设置列.

<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center">{{people.accessID}}</td>

但我无法将列标题居中对齐,而是列数据.

以下是Access ID标头的源代码段.

<th ng-repeat="column in $columns" ng-class="{ 'sortable': parse(column.sortable), 'sort-asc': params.sorting()[parse(column.sortable)]=='asc', 'sort-desc': params.sorting()[parse(column.sortable)]=='desc' }" ng-click="sortBy(column, $event)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header  sortable"> <!-- ngIf: !template --><div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)" class="ng-binding ng-scope">Access ID</div><!-- end ngIf: !template --> <!-- ngIf: template --> </th>

问题是,如何将ng-table中特定列的Header居中对齐？

我使用ng-table在表视图中显示所有值.在备注栏中显示的消息(表的最后一列)是巨大的.所以,我显示的很少.当用户将鼠标悬停在单元格上时,我想在工具提示中显示整个消息.我试图在title属性中设置它,但它不起作用.

示例代码:http://plnkr.co/edit/I4nCTNhMfxgbBX7Zjxs9？p = preview

<table ng-table="tableParams" class="table">
        <tr ng-repeat="doc in $data">
        <td data-title="'#'" sortable="doc_name">{{$index + 1 }}</td>
        <td data-title="'Visa Type'" sortable="'type'">{{doc.type}}</td>
        <td data-title="'Country'" sortable="'country'">{{doc.country}}</td>
        <td data-title="'Starting Date'" sortable="'start_date'">{{doc.start_date}}</td>
        <td data-title="'Expired Date'" sortable="'end_date'">{{doc.end_date}}</td>
        <td data-title="'Remarks'" sortable="'remarks'" title="{{doc.remarks}}">
        {{doc.remarks | limitTo: 15 }} {{doc.remarks.length > 15 ? '...' : ''}}
        </td>
        </tr>
</table>

请建议我如何使用HTML标题属性显示工具提示.

我需要显示一个5列表数据,其中3列标题类似于下面的屏幕截图(请igonre表格中第1列用黄色星号).

帮助我解决下面给出的几个问题.

1. 当我在thead中提供显式标头值以执行3的colspan时last 3 runs,我没有得到过滤器.
2. 它是做使用选择滤波器正确的/最佳途径filterStatusFor0($column),filterStatusFor1($column)和filterStatusFor2($column)在我的代码？

ngtable

<div class="col-md-8">
    <table ng-table="taskDetailTableParams" show-filter="true" class="table upgradeTaskDetailTable text-left table-bordered">
        <thead>
            <th>Task Name</th>
            <th>Type of Task</th>
            <th colspan="3">Last 3 runs</th>
        </thead>
        <tbody>            
            <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
                <td data-title="'Task Name'" class="text-left col-sm-4 col-md-4 col-lg-4" header-class="text-left" filter="{ 'name': 'text' }" sortable="'name'">{{ item.name }}</td>
                <td data-title="'Type of Task'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'type': 'text' }" sortable="'type'">{{item.type}}</td>
                <td data-title="'latest Run'" class="text-left col-sm-2 …

我正在使用ng-table插件来分页这样的表:

$scope.ngtableParams = new ngTableParams({}, {
                counts:false,
                getData: function(params) {
                    return $http.get($rootScope.app.authApi + 'questions/' + selectedSubtopic.id).then(function(data) {
                        params.total(data.data.length);
                        return data.data;
                    });
                }
            });

每次用户点击页码时,Funnily ng-table都会调用getData()函数.并再次点击整个内容并获取所有记录并显示它们.因此,分页基本上是无用的.

我需要有一个客户端分页.是否可以使用ng-table？

试过这个

$http.get($rootScope.app.authApi + 'questions/' + selectedSubtopic.id)
                .success(function(data){
                    $scope.ngtableParams = new ngTableParams({count:5}, {
                        counts:[],
                        paginationMaxBlocks: 13,
                        paginationMinBlocks: 2,
                        total:data.length,
                        getData: function(params) {
                            return data;
                        }
                    });
                });

与上面的结果相同!