标签: angular-datatables
Angular Datatables中的自定义加载
我试图在角度数据表中实现我的自定义加载.我检查了文档:https://l-lin.github.io/angular-datatables/#/overrideLoadingTpl,建议实现:
angular.module('showcase', ['datatables']).
factory('DTLoadingTemplate', dtLoadingTemplate);
function dtLoadingTemplate() {
return {
html: '<img src="images/loading.gif">'
};
}
因此,在我的自定义选项中,我在选项sLoadingRecords和sProcessing中注入加载,但不起作用.
.factory('myDTOptions', function (DTOptionsBuilder,DTLoadingTemplate) {
return {
option1: function(){
return DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(10)
.withBootstrap()
.withOption('responsive', true)
.withLanguage({
"sEmptyTable": "No hay información disponible",
"sInfo": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
"sInfoEmpty": "Mostrando 0 a 0 de 0 entradas",
"sInfoFiltered": "(filtrada de _MAX_ entradas totales)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLengthMenu": "Mostrando _MENU_ entradas",
"sLoadingRecords": DTLoadingTemplate,
"sProcessing": …推荐指数
解决办法
查看次数
Angular-Datatables在日期排序错误
我正在我的项目中使用angular-datatables插件,除日期外,它适用于所有类型.
示例DESC:
- 2016年1月1日
- 2015年1月8日
- 2015年1月8日
- 2015年1月9日
示例ASC:
- 31/12/2015
- 31/10/2015
- 22/10/2015
我在ng-repeat中使用Angular Way和日期过滤器.我怀疑它是用错误的日期格式排序的.我想根据当天排序.我怎样才能解决这个问题？
<table class="table table-hover" datatable="ng">
<thead>
<tr>
<th>Client</th>
<th>Project</th>
<th>ID</th>
<th>Inv. Date</th>
<th>Start Date</th>
<th>End Date</th>
<th>DKK ex VAT</th>
<th>CIG</th>
<th>Attention</th>
<th>Cust. Manager</th>
<th>Regarding</th>
<th>Due Date</th>
<th>Finalized</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="invoice in vm.latestInvoices.LatestInvoices">
<td>{{invoice.CompanyName}}</td>
<td>{{invoice.ProjectName}}</td>
<td>{{invoice.InvoiceID}}</td>
<td>{{invoice.InvoiceDate | date: 'dd/MM/yyyy'}}</td>
<td>{{invoice.InvoiceStart | date: 'dd/MM/yyyy'}}</td>
<td>{{invoice.InvoiceEnd | date: 'dd/MM/yyyy'}}</td>
<td>{{invoice.DKKexVAT}}</td>
<td>{{invoice.CustomerInvoiceGroup}}</td>
<td>{{invoice.Attention}}</td>
<td>Customer Manager</td>
<td>{{invoice.Regarding}}</td>
<td>{{invoice.DueDate | date: 'dd/MM/yyyy'}}</td>
<td>No</td>
<td>{{invoice.Paid}}</td>
</tr>
</tbody>
</table>
推荐指数
解决办法
查看次数
如何自定义角度数据表的样式
我是新来的角度,试图用角的DataTable库http://l-lin.github.io/angular-datatables/#/angularWay,但不知道如何控制表的风格,因为他们都是角度指令,我可以触摸里面的HTML元素吗？如下例所示,如何删除搜索框旁边的文字？我也读过API,找不到如何在buttom上隐藏datatables_info.
更新
也许我可以通过CSS隐藏它们,但似乎不可能在输入元素中添加占位符
推荐指数
解决办法
查看次数
一个组件中的多个材质分页在Angular中不起作用
我尝试创建一个包含两个dataTables的组件，每个组件都带有另一个dataSource。由于我的原因，我的表格在加载组件后不可见，*ngIf因此我无法使用它，ngAfterViewInit()而使用的是用户在Github上指出的解决方案：
private paginator: MatPaginator;
private reportingPaginator: MatPaginator;
private sort: MatSort;
private reportingSort: MatSort;
@ViewChild(MatSort) set matSort(ms: MatSort) {
this.sort = ms;
this.reportingSort = ms;
this.setDataSourceAttributes();
}
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.reportingPaginator = mp;
this.setDataSourceAttributes();
}
setDataSourceAttributes() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.reportingDataSource.paginator = this.reportingPaginator;
this.reportingDataSource.sort = this.reportingSort;
}
但是我仍然无法正常工作。当两个分页器都包含在中时，我的分页不起作用@ViewChild(MatPaginator)。如果我只包括其中一个
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.reportingPaginator = mp;
this.setDataSourceAttributes();
}
要么
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) { …typescript angular-material angular-datatables angular-material2 angular
推荐指数
解决办法
查看次数
Angular 5材料数据表排序不起作用
所以我在Angular 5应用程序中有一个工作的角度材料数据表,但是当我尝试添加排序功能时(基于这里的官方文档:https://material.angular.io/components/table/overview#sorting和例如:https://stackblitz.com/angular/dnbermjydavk？file = app%2Ftable-overview-example.html)我无法让它工作.它似乎添加了排序功能/箭头,我可以点击它,但没有任何反应.
这是我的HTML:
<div class="container">
<mat-table #table class="dataTable" *ngIf="showDataForm;else loadingTemplate" [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="titel">
<mat-header-cell *matHeaderCellDef mat-sort-header>Titel</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.titel}}</mat-cell>
</ng-container>
<ng-container matColumnDef="EADDraftingStage">
<mat-header-cell *matHeaderCellDef mat-sort-header>EADDraftingStage</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.EADDraftingStage}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let item; columns: columnsToDisplay"></mat-row>
</mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>
<ng-template #loadingTemplate>
<div>
<p>Please wait, the data is loading...</p>
<img src="../../assets/giphy.gif">
</div>
</ng-template>
<button mat-raised-button class="submitButton" …推荐指数
解决办法
查看次数
角度数据表：$(...).DataTable 不是函数
Angular 版本：6.0.4 ~ 节点版本：10.4.1 ~ NPM 版本：6.1.0
我看到这个问题问了很多次，但没有回答。
按照这些说明安装 angular-datables并尝试在表上使用该指令后，如在他们的零配置示例中，我不断收到此错误：
TypeError: $(...).DataTable 不是
angular-datatables.directive.js:42的函数
包含的样式和脚本
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
在 app.module.ts 中导入
import { DataTablesModule } from 'angular-datatables';
DataTablesModule 被添加到导入数组中。
* .component.html
<h1>View Accounts</h1>
<table class='table table-dark text-center table-striped table-hover rounded' datatable>
<thead class='thead-dark'>
<tr>
<td>#</td>
<td>Account Name</td>
</tr>
</thead>
<tbody>
<tr *ngFor='let account of db.accounts; let i = index' routerLink='/account/{{account.id}}'>
<td>{{i+1}}</td>
<td>{{account.accountHolder}}</td>
</tr>
</tbody>
</table>
推荐指数
解决办法
查看次数
如何调用角度数据表的销毁功能？
我有一个控制器,我想在一个watch方法中调用控制器中的Jquery Datatables的destroy函数:
$scope.$watch('model.SelectedWaiver', function() {
if ($scope.model.SelectedWaiver.SurchargeID != null) {
//destroy table here
$scope.getIndecies($scope.model.SelectedWaiver);
}
});
我目前没有以任何方式设置表,因为页面上有两个表:
第一:
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
//stuff
</table>
第二:
<table datatable="ng" id="secondTable" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
//stuff
</table>
我想在用户选择第一个表中的不同行时销毁此表.
jquery等价物:
<script>
$(document).ready(function() {
var table = $('#secondTable').DataTable();
});
$('#selectedWaiver').on('change', function () {
table.destroy();
});
</script>
我如何在角度中执行这部分代码？
推荐指数
解决办法
查看次数
角度数据表 - 呈现以组合来自多列的数据
我的angularjs数据表控制器代码如下所示.使用DTColumnBuilder选项,如何提供列渲染器以显示格式化数据
$scope.dtOptions = DTOptionsBuilder.fromSource(CompanyService.loadUrl()).withPaginationType('full_numbers').withOption('rowCallback', rowCallback);
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('name').withTitle('Name'),
DTColumnBuilder.newColumn('description').withTitle('Description'),
DTColumnBuilder.newColumn('active_status').withTitle('Status')
];
推荐指数
解决办法
查看次数
如何获取角度数据表中的搜索框值？
我正在使用angular datatable plugin，并且想要获取所生成的datatable附带的搜索框的值。Angular数据表有一些创建数据表的选项，但它们中的任何一个都允许我指定属性或为获得特定值而可以观察的内容。
由于我需要获取数据表的输入搜索的值，因此无法找到实现目标的方法。
那么，如何获取角度数据表中的搜索框值？
推荐指数
解决办法
查看次数
什么是 .withDOM('frtip')？
嘿，任何人都可以告诉我 .DOM() 中的“frtip”是什么，是否有任何文档可以理解这一点？
推荐指数
解决办法
查看次数