प्राइमेंग पेजिनेटर

Question

पर कस्टम टेक्स्ट जोड़ने के लिए कैसे मैं जानना चाहता हूं कि आप पेजिनेटर पंक्ति में कस्टम टेक्स्ट जोड़ सकते हैं, अधिक विशेष रूप से, मैं चाहता हूं कि यह दाईं ओर तालिका के लिए कुल हिट हो।

Answer 1

तुम बस इसे मैन्युअल रूप से नीचे दी गई तालिका में जोड़ सकते हैं ...

<p-dataTable 
    #myCoolTable> 
... 
</p-dataTable> 
<div style="position: absolute; bottom: 5px; right: 20px;"> 
    filtered {{ myCoolTable.totalRecords }} from a total count of {{ myCoolTable.value.length }} 
</div> 

जहां totalEntriesCount सर्वर से डेटा प्राप्त करने में पर घटक द्वारा निर्धारित है ...

शैली सामान ले जाने के लिए याद रखें अपने एसएसएस/कम/सीएसएस के लिए! ;)

संपादित करें: unfiltered डेटा गणना भी मूल्य की लंबाई में संग्रहीत है। यह हो सकता है कि तालिका बाहर से उपलब्ध न हो, इसलिए आप इसे घटक में ViewChild('myCoolTable') myCoolTable; के रूप में घोषित कर सकते हैं।

Answer 2

आप पेजिनेटर पंक्ति के अंदर कस्टम टेक्स्ट नहीं जोड़ सकते हैं। लेकिन तुम कुल हिट बस में paginator नीचे पाद लेख का उपयोग कर तालिका के अंदर के रूप में

<p-footer>Total Hits:{{totalHits}}</p-footer> 

जोड़ सकते हैं नहीं तो आप उदाहरण के लिए paginator अलग बनाकर paginator ऊपर कुल हिट जोड़ सकते हैं,

<p-dataTable [value]="data" [paginator]="false">.... 
<p-column field="Col1" header="Column 1"><p-column> 
<p-footer>total Hits: {{totalHits}}</p-footer> 
</p-dataTable> 
<p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator> 

Answer 3

यह वह जगह है कस्टम पाठ या कुल पंक्तियों को जोड़ने के लिए सटीक समाधान primeng datatable (कोणीय) के लिए paginator पर भरोसा:

<p-dataTable 
    [value]="myRecords" 
    rows="10"        
    [pageLinks]="5" 
    [paginator]="false" 
    [lazy]="true" 
    [totalRecords]="totalRecordsCount" 
    (onLazyLoad)="loadData($event)" 
    [responsive]="true"> 

<p-column field="" header="test"></p-column>           
</p-dataTable> 


<div style="position: relative;"> 
    <p-paginator rows="10" 
     (onLazyLoad)="loadData($event)" 
     (onPageChange)="loadData($event)" 
     [totalRecords]="totalRecordsCount" 
     [rowsPerPageOptions]="[10, 25]"> 
    </p-paginator> 
    <span style="position: absolute; top:3px; right:5px; margin: 5px;">Total records: {{totalRecordsCount}} </span> 
</div>