标签: angular-datatables

在jquery数据表中,我可以禁用特定的列排序依据

"aoColumnDefs": [{
                'bSortable': false,
                'aTargets': [0, 7]
            }]

任何人都知道如何在角度JS中做到这一点？

<table class="custom-table" datatable="ng" dt-options="dtOptions" id="contacts-list-table">
</table>

myApp.controller("ListCtr", ['DTOptionsBuilder', function(DTOptionsBuilder) {
  $scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C<"clear">lfrtip') 
}])

这段代码隐藏了我的搜索栏,但无法隐藏我的第一列和第四列的排序功能？

这是我的问题:datatable插件只接受我相信的数组,但我的API返回一个带有数组的对象.我想弄清楚我是否需​​要提取这些信息(如何？)或者插件是否有一些方法可以帮助我(有一个):

    //the datatable plugin expects the following JSON structure
        [
            {
                "ID":"a5f415a7-3d4f-11e5-b52f-b82a72d52c35",
                "Record":1,
                "HostName":"SRX552P"
            }
        ]

    //my PHP server returns the following JSON structure:
        {
            "status":"success",
            "message":"data retrieved",
            "data":[
                    {
                        "ID":"a5f415a7-3d4f-11e5-b52f-b82a72d52c35",
                        "Record":1,
                        "HostName":"SRX552P"
                    }
                   ]                
        }    

    var allData = null;
    //this is my angularjs service where I am grabbing all the 'data':
        function getAllData() {
            dataservice.get('table001').then(function(data){
                allData = data;
            });         
            return allData;
        }

    //it looks like my issue is exactly what this post describes:
    http://stackoverflow.com/questions/27797435/accessing-json-data-in-angularjs-datatables-using-dtoptions

    //but applying ".withDataProp('data.data')" didn't work …

我试图运行"ng build",我遇到了以下错误.

"node_modules/@angular/material/core/typings/common-behaviors/common-module.d.ts(9,10)中的错误:错误TS2305:模块'"../Frontend/node_modules/@angular/platform-b​​rowser/platform-b​​rowser"'没有导出成员'HammerLoader'."

pacakge.json包含"@ angular/platform-b​​rowser"和"@ angular/material".我正在尝试使用这里的角料表.

我无法理解为什么会出现这个错误以及可能的解决方案.

我想使用分页插件angular-datatable.我用bower安装它但它不起作用.它给出了以下错误

TypeError:$ elem.hide不是postLink上的Object.showLoading(http:// localhost:8000/vendor/angular-datatables.js:698:15)中的函数(http:// localhost:8000/vendor/angular- datatables.js:47:31)在nodeLinkFn上的http:// localhost:8000/vendor/angular.js:8783:44 at invokeLinkFn(http:// localhost:8000/vendor/angular.js:8789:9)http:// localhost:8000/vendor/angular.js:8289:11)在compositeLinkFn(http:// localhost:8000/vendor/angular.js:7680:13)的compositeLinkFn(http:// localhost:8000 /) vendor/angular.js:7684:13)在compositeLinkFn(http:// localhost:8000/vendor/angular.js:7684:13)在compositeLinkFn(http:// localhost:8000/vendor/angular.js:7684:13)的compositeLinkFn(http:// localhost:8000 /) vendor/angular.js:7684:13)

我使用Zero配置,这是我使用的html代码

<table datatable="" class="row-border hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Foo</td>
            <td>Bar</td>
        </tr>
        <tr>
            <td>123</td>
            <td>Someone</td>
            <td>Youknow</td>
        </tr>
        <tr>
            <td>987</td>
            <td>Iamout</td>
            <td>Ofinspiration</td>
        </tr>
    </tbody>
</table>

我试图在我的项目中实现angular-datatables,但它返回"TypeError:无法读取属性'aDataSort'的undefined

我在用

Angular js版本1.4.9.

Jquery版本2.1.1

DataTable版本1.10.10

参考网站

角数据表

我的Html代码

<div class="col-md-12" ng-controller="WithAjaxCtrl as showCase"> <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table></div>

我的Angular js控制器代码

angular.module( 'admin.package', [
'ui.router',
'ui.bootstrap',
'datatables',
'datatables.bootstrap',
'ngResource',
'plusOne'
]).controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) {
      UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) { 
        if(results.status==200){
        var vm = this;
        vm.dtOptions = DTOptionsBuilder.fromSource(results.data.packages)
            .withPaginationType('full_numbers');
        vm.dtColumns = [
           DTColumnBuilder.newColumn('id').withTitle('id'),
            DTColumnBuilder.newColumn('package_name').withTitle('Packag Name'),
            DTColumnBuilder.newColumn('amount').withTitle('Amount'),
            DTColumnBuilder.newColumn('package_duration').withTitle('Amount'),
            DTColumnBuilder.newColumn('currency').withTitle('validity')

        ];
        console.log(vm.dtColumns);
        console.log( vm.dtOptions);
      }else{
             alert('You are not a authorized user');
          }
        }, function(reason) {
            console.log(reason);
        });
    }

提前致谢

您好我正在使用angularjs创建一个应用程序,并使用数据表js创建ASP.NET MVC.

我一直在使用的数据表与帮助的角度JS实现表显示数据此文章.

但我想在html中使用相同的功能与静态的列名绑定数据,如:

在文章中,作者使用以下方法完成了

<table id="entry-grid" datatable="" dt-options="dtOptions" 
       dt-columns="dtColumns" class="table table-hover">
</table>

但是我希望按照我的数据使用ng-repeat使用相同的功能,这样做:

<table id="tblusers" class="table table-bordered table-striped table-condensed datatable">
  <thead>
    <tr>
      <th width="2%"></th>
      <th>User Name</th>
      <th>Email</th>
      <th>LoginID</th>
      <th>Location Name</th>
      <th>Role</th>
      <th width="7%" class="center-text">Active</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in Users">
      <td><a href="#" ng-click="DeleteUser(user)"><span class="icon-trash"></span></a></td>
      <td><a class="ahyperlink" href="#" ng-click="EditUser(user)">{{user.UserFirstName}} {{user.UserLastName}}</a></td>
      <td>{{user.UserEmail}}</td>
      <td>{{user.LoginID}}</td>
      <td>{{user.LocationName}}</td>
      <td>{{user.RoleName}}</td>
      <td class="center-text" ng-if="user.IsActive == true"><span class="icon-check2"></span></td>
      <td class="center-text" ng-if="user.IsActive == false"><span class="icon-close"></span></td>
    </tr>
  </tbody>
</table>

我还想在按钮中单击添加新记录使用相同的功能在表格中添加新列.

可能吗？

如果是的话怎么可能会很好,如果有人在jsfiddle或任何编辑器中向我展示,那么事先谢谢.

请下载在Visual Studio Editor中创建的源代码以进行演示

我试图用控制器中的数组动态填充<mdt-column>内部<mdt-header-row>.这段代码似乎不能正常工作:

hide-column-by-default="c.selector_hidden"

加载表时,不显示默认列.某些列设置为默认值,并从"列选择器"中排除,因此即使选择了选择器中的所有列,也不会显示这些列.

当我...columnSelector: false}...在表卡中设置它时会显示我的列,但是选择列的功能已经消失了!？

我怎样才能解决这个问题？

这是mdt-header-row:

<mdt-header-row>
<mdt-column 
hide-column-by-default="c.selector_hidden" 
exclude-from-column-selector="c.selector_exclude" 
column-sort="c.sort" 
sortable-rows-default="c.sort_default" 
column-key="{{c.key}}"  
align-rule="{{c.align}}" 
column-definition="{{c.definition}}" 
ng-repeat="c in tableHeader"><span>{{c.name}}</span></mdt-column>

</mdt-header-row>

数据来自控制器中的此数组:

$scope.tableHeader = [
        {
            name: 'Dessert (100g serving)',
            definition: '',
            align: 'left',
            sort: true,
            sort_default:false,
            hidden: false,
            selector_exclude:false,
            selector_hidden:false
        },...

我也为它创建了一个分支:https: //codepen.io/anon/pen/JJQyKN？editors = 1111

我目前正在使用角度数据表.

如何在其他语言中查看表格的界面？

我的意思是"显示条目","搜索:","显示20个条目中的1到10个"文字以西班牙语为例.

我在ngx-datatable中为列添加多个支柱时遇到了一些问题:

columns = [
  { prop: 'semesterName', name: '?????', resizeable: false },
  { prop: 'eventName', name: '????', resizeable: false },
  { prop: 'when', name: '???? ????', resizeable: false },
  { prop: 'lecturerName', name: '????', resizeable: false },
  { prop: 'hugName', name: '???', resizeable: false },
];

我需要在一列中显示两个道具.就像一列中的'eventName'和'when'一样.

该模型:

export class Course {
  semester: string;
  semesterName: string;
  courseObject: string;
  course: string;
  courseName: string;
  eventObject: string;
  event: string;
  eventName: string;
  hugName: string;
  dayOfWeek: string;
  dayOfWeekNum: string;
  where: string;
  when: string;
  lecturerName: string; …

我要求在数据表之外发生更改/事件时替换所有列。

数据表第一次显示选定的列（来自事件）。如果我选择第二个，它不会显示，但 dtOptions 中的列会发生变化，但不会显示。我想清除视图问题，但我尝试使用销毁它对我不起作用。有人请帮助我实现这一目标。

HTML代码：

<div id="data-table-grid-slide">
    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>
</div>

数据表的角度代码：

import {Component, ViewChild, OnInit, Input, AfterViewInit, OnDestroy, Output, EventEmitter} from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
import { ColumnObject } from '../data-tables-net/model/data-tables-model';
import { HttpClient } from '@angular/common/http';
import { DtServiceService} from '../data-tables-net/dt-service.service';
import { WindowRef} from '../services/WindowRef';

declare var $;
@Component({
  selector: 'app-data-tables-net',
  templateUrl: './data-tables-net.component.html',
  styleUrls: ['./data-tables-net.component.css']
})
export class DataTablesNetComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('dataTable', …