Install
npm install no-page-datatable-footer --save
Basic Example
import { NoPageDatatableFooterModule } from 'no-page-datatable-footer';
const noPageFooterSettings: any = {
labels: {
showNumber: '显示行数',
statistical: '正在统计',
total: '共',
line: '行',
page: '页'
}
};
@NgModule({
declarations: [
...
],
imports: [
...
NoPageDatatableFooterModule.forRoot(noPageFooterSettings),
],
providers: [
...
]
})Graphql
<ngx-datatable
ngxNoPageFooterGraphqlWatcher
[isRetainCurrentPageQuery]="true"
class="material"
[footer]="footer"
[count]="currentNumber"
headerHeight="40"
[columnMode]="'force'"
[rows]="labelList"
[loadingIndicator]="loading"
[selectionType]="'checkbox'"
[selectAllRowsOnPage]="false"
[ngxQuery]="ngxQuery"
externalPaging="true"
(loadValue)="getLabel($event)"
>
<ngx-datatable-column
[width]="30"
[sortable]="false"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="false"
[checkboxable]="false"
>
</ngx-datatable-column>
<ngx-datatable-column
[resizeable]="false"
[draggable]="false"
[sortable]="false"
name="姓名"
prop="name"
>
<ng-template let-row="row" ngx-datatable-cell-template>
<span title="{{row.name}}">{{row.name}}</span>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
<hr />
<nopage-datatable-footer
#footer
[page]="page"
[currentNumber]="currentNumber"
[totalNumber]="totalNumber"
[sizeList]="sizeList"
(getTotal)="getTotal()"
>
</nopage-datatable-footer>Restful
<ngx-datatable
ngxNoPageFooterWatcher
class="material"
[footer]="footer"
[count]="currentNumber"
headerHeight="40"
[columnMode]="'force'"
[rows]="labelList"
[loadingIndicator]="loading"
[selectionType]="'checkbox'"
[selectAllRowsOnPage]="false"
[ngxQuery]="ngxQuery"
externalPaging="true"
(loadValue)="getLabel($event)"
>
<ngx-datatable-column
[width]="30"
[sortable]="false"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="false"
[checkboxable]="false"
>
</ngx-datatable-column>
<ngx-datatable-column
[resizeable]="false"
[draggable]="false"
[sortable]="false"
name="姓名"
prop="name"
>
<ng-template let-row="row" ngx-datatable-cell-template>
<span title="{{row.name}}">{{row.name}}</span>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
<hr />
<nopage-datatable-footer
#footer
[page]="page"
[currentNumber]="currentNumber"
[totalNumber]="totalNumber"
[sizeList]="sizeList"
(getTotal)="getTotal()"
>
</nopage-datatable-footer>Properties
page - [?Page]
Initialize the paging condition information
currentNumber - [number]
current pageSize
totalNumber - [number]
total number
sizeList - [?array[number]]
pageSize menu
disabledAll - [?boolean]
disabled menuSize and pre/next button
debounceDueTime - [number]
debounce delay time milliSecond
checkTurnPage - [Function]
a function return boolean which check can turn page
saveState - [boolean]
true save query condition else not
Outputs
getTotal - [getTotal()]
get total number from sever
More details
look at src -> app