在devexpress模板中为Datatable定制`paging`模板

Question

我收到了如下模拟信息：（附有图片）

以上分页要求将表格的底部和顶部放置在表格的底部和顶部。但是无法找到实现这一目标的正确方法。请有人帮我这样做吗？

这是我当前的模板：

<dx-data-grid
    id="gridContainer"
    [dataSource]="courseList | async"
    (onInitialized)="onInitialized($event)"
    keyExpr="Id"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnResizingMode]="columnResizingMode"
    [columnMinWidth]="150"
    [columnAutoWidth]="true"
    [(columns)]="columns"
    (onRowPrepared)="onRowPrepared()"
    [showBorders]="true"
    (onEditingStart)="logEvent('EditingStart')"
    [rowAlternationEnabled]="true"
    (onInitNewRow)="logEvent('InitNewRow')"
    (onRowInserting)="logEvent('RowInserting')"
    (onRowInserted)="logEvent('RowInserted')"
    (onRowUpdating)="logEvent('RowUpdating')"
    (onRowUpdated)="logEvent('RowUpdated')"
    (onRowRemoving)="logEvent('RowRemoving')"
    (onRowRemoved)="logEvent('RowRemoved')">
    <!-- show filter options -->
    <dxo-header-filter [visible]="showHeaderFilter"></dxo-header-filter>
    <!-- show search by column -->
    <dxo-filter-row [visible]="showFilterRow" [applyFilter]="currentFilter"></dxo-filter-row>

    <dxo-editing
    mode="row"
    [allowUpdating]="true"
    [allowDeleting]="true">
    </dxo-editing>

    <dxo-paging
        [pageSize]="10"
        [pageIndex]="1"> <!-- Shows the second page -->
    </dxo-paging>
    <dxo-pager>

    </dxo-pager>
    <dxo-pager
        [showInfo]="true"
        infoText="Page #{0}. Total: {1} ({2} items)"
        [showPageSizeSelector]="true"
        [allowedPageSizes]="[10, 20, 50, 100]"
        [showNavigationButtons]="true">
    </dxo-pager>



</dx-data-grid>

我的ts文件：

ngOnInit(){

        this.columns = [
            {
                dataField: "Id",
                caption:'Idxx',
                allowEditing: false,
                alignment:"left",
                allowHeaderFiltering : false,
                selectedFilterOperation:"contains",
                editorOptions :{
                    showClearButton :true
                }

            },
            {
                dataField: "Name",
                allowEditing: true,
                editorOptions :{
                    showClearButton :true
                }
            },
            {
                dataField: "Description",
                allowEditing: true,
                editorOptions :{
                    showClearButton :true
                }
            },
            {
                dataField: "CreatedBy",
                allowEditing: true,
                editorOptions :{
                    showClearButton :true
                }
            }
        ]
}

特别是寻找前端诱人的方法。如果有演示，那将节省我的时间！

谢谢。