Question

我在项目中使用Angular2数据表来显示带有分页的表。

以下是图书馆https://github.com/mariuszfoltak/angular2-datatable的链接。

有人可以澄清我对#mf="mfDataTable"的疑虑吗？开发人员在他的演示中使用了mf.data来引用数据。但是当我使用那个mf。时，我的表没有填充，但是当我使用它时没有.mf，我的数据被加载了表格。

那么，我是否需要#mf="mfDataTable"或我缺少什么？

以下是我的代码。

欢呼声!!

＆＃13;

<table class="table table-striped table-hover" [mfData]="products" #mf="mfDataTable" [mfRowsOnPage]="5">
                <thead>
                    <tr>
                        <th>
                            <mfDefaultSorter by="gtin">GTIN</mfDefaultSorter>
                        </th>
                        <th>
                            <mfDefaultSorter by="fdoname_en">Name Eng</mfDefaultSorter>
                        </th>
                        <th class="no-sort hidden-sm-down">
                            <mfDefaultSorter by="fdoname_fa">Name Per</mfDefaultSorter>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of products | SearchPipe : searchText">
                        <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gtin}}</a></td>
                        <td>{{product.fdoname_en}}</td>
                        <td>{{product.fdoname_fa}}</td>
                        <td>
                            <a class="btn btn-primary" [routerLink]="['/app/master/productEdit', product.gtin]">
                                Edit
                            </a>
                        </td>
                    </tr>
                    <tr *ngIf="!products.length">
                        <td>&nbsp;</td>
                        <td colspan="6">No Records Found</td>
                    </tr>
                    <tr *ngIf="(products | SearchPipe : searchText).length === 0">
                        <td>&nbsp;</td>
                        <td colspan="6">No matches</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="12">
                            <mfBootstrapPaginator [rowsOnPageSet]="[5, 10, 25]"></mfBootstrapPaginator>
                        </td>
                    </tr>
                </tfoot>
            </table>

＆＃13;

Answer 1

您正在获取数据，因为您直接在[产品]上循环。将[products]更改为[mf.data]，然后使用datatable组件获取数据。

然后，您将能够获得排序和分页等所有优势。

<table class="table table-striped table-hover" [mfData]="products" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
        <tr>
            <th>
                <mfDefaultSorter by="gtin">GTIN</mfDefaultSorter>
            </th>
            <th>
                <mfDefaultSorter by="fdoname_en">Name Eng</mfDefaultSorter>
            </th>
            <th class="no-sort hidden-sm-down">
                <mfDefaultSorter by="fdoname_fa">Name Per</mfDefaultSorter>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let product of mf.data | SearchPipe : searchText">  /* change products to mf.data */
            <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gtin}}</a></td>
            <td>{{product.fdoname_en}}</td>
            <td>{{product.fdoname_fa}}</td>
            <td>
                <a class="btn btn-primary" [routerLink]="['/app/master/productEdit', product.gtin]">
                    Edit
                </a>
            </td>
        </tr>
        <tr *ngIf="!mf.data.length">  /* change products to mf.data */
            <td>&nbsp;</td>
            <td colspan="6">No Records Found</td>
        </tr>
        <tr *ngIf="(mf.data | SearchPipe : searchText).length === 0"> /* change products to mf.data */
            <td>&nbsp;</td>
            <td colspan="6">No matches</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="12">
                <mfBootstrapPaginator [rowsOnPageSet]="[5, 10, 25]"></mfBootstrapPaginator>
            </td>
        </tr>
    </tfoot>
</table>

使用Angular2数据表指令

1 个答案: