PrimeNG - 由行数设置的 p-dataTable 高度答案

【问题标题】：PrimeNG - p-dataTable height set by number of rowsPrimeNG - 由行数设置的 p-dataTable 高度
【发布时间】：2017-04-07 15:35:42
【问题描述】：

我正在尝试找到解决数据表高度的解决方案。

表格添加了分页。将页面更改为第二页，其中行数低于初始页面（在我们的示例中为第一页），dataTable 的高度将被更改。

【问题讨论】：

我也面临同样的问题。你找到解决办法了吗？
还没有。我在面板中添加了 DataTable。这样，如果在分页时更改了 DataTable 的高度，则页面中的其他组件不会移动。
我确实添加了虚拟行来获取高度。

标签： angular datatable primeng

【解决方案1】：

对我来说，它适用于以下 css 语句：

::ng-deep .ui-datatable-scrollable-view .ui-datatable-scrollable-body {
    min-height: 400px;
    border: 1px solid #D5D5D5;
}

::ng-deep 以 inside primeNg 元素为目标。 ui-datatable-scrollable-body 类的 min-height: 0px 将被您所需的最小高度覆盖。

使用两个 css 选择器而不是一个来增加 css 选择器的特异性。

我创建了以下 plunker 来说明它的工作原理。

https://plnkr.co/edit/8cFrCY?p=preview

【讨论】：

对我来说似乎不起作用。我可以请您发布您的示例，您对 dataTable 的所有内容吗？
在答案中添加了一个 plunker 示例。希望对您有所帮助。
谢谢。是的，这很有帮助。

【解决方案2】：

我还添加了前面提到的虚拟行，但是当我使用primeng的globalfilter时，问题再次出现，因此提供了如下修复：

我的 component.ts 中有两个函数 addRecordsForPagination 和 removeFunc

datatable 是primeng 表的viewchild。

ngOnInit(){
  if(this.primengtable.length%10!=0)
        while(this.primengtable.length%10!=0)
  this.primengtable.push({});
}
ngAfterContentInit(): void {
Array.from(document.querySelectorAll(".ui-paginator-page.ui-paginator-element.ui-state-default.ui-corner-all")).filter(element => {

    if(element.getAttribute("listener")!="true")
    element.addEventListener("click",(e)=>{
      element.setAttribute("listener","true");
     this.addRecordsForPagination();
     this.removeFunc();
    })
  });
} addRecordsForPagination=()=>{
let rows = this.dataTable.tableViewChild.nativeElement.children[2].children.length;

 if(rows==10)
 setTimeout(()=>{},0);

  if(this.dataTable.filteredValue)
  if(rows<10)
  for(let i=0;i<10-rows;i++){
    let tableRow = document.createElement('tr');
    var thcount =  document.querySelectorAll('thead > tr > th').length;
    for(let i=0;i<thcount;i++)
    tableRow.insertCell(-1).innerHTML="&#127;";
 this.dataTable.tableViewChild.nativeElement.children[2].insertAdjacentElement('beforeend',tableRow);

}


}removeFunc = ()=>{

Array.from(document.querySelectorAll("tr")).filter((tr)=>{
//this is specific case in my grid
  if(tr.childNodes.length<10)
  tr.parentNode.removeChild(tr);

  });
}ngAfterViewChecked(): void { 

if(this.dataTable.tableViewChild)
var rows = this.dataTable.tableViewChild.nativeElement.children[2].children.length;
if(rows>10)
this.removeFunc();
this.addRecordsForPagination();
}

【讨论】：

【解决方案3】：

对于 Primeng p-table，我在 styles.scss 中设置了最小高度，它解决了类似的问题。

.your_table_name .ui-table-scrollable-body  {
  min-height: 300px !important;
}

【讨论】：