Question

我正在制作一个仪表板，其中我有一张分页表。使用md-data-table（在https://github.com/daniel-nagy/md-data-table上找到）创建的这个表（angular-material）显示项目信息，并有几个字段，如：

项目编号
项目名称
项目预算
项目状态

我正在使用（http://johnny.github.io/jquery-sortable/）上找到的jQuery可排序插件，以便能够使用拖放更改表格列的顺序。这非常有效，我可以更改列的顺序，下面的数据也可以更改位置。

一旦我将表格从第1页更改为第2页，就会出现问题。记住列标题顺序，但数据显示不正确。例如，如果我将项目状态与项目预算交换，则状态将显示在预算下，预算将显示在状态下。一旦我从第2页返回到第1页，数据也会以不正确的顺序显示在那里。

这是一个例子：

我认为这个问题与我的html告诉桌子应该如何排序和填充的事实有关，但我可能是错的。如果您在过去遇到过类似的问题，请告诉我哪里出错，以及解决此问题的最佳方法是。

我的表头看起来如下（这是我用来通过拖放来改变列的顺序）：

<thead md-head class="sorted_head" md-order="myOrder" 
 style="width:100%">
        <tr md-row style="background-color:rgba(0,74,102,0.6)">
            <th class="doColor" md-column>
                <span>Nr.</span>
            </th>
            <th md-column>
                <span>Project Name</span>
            </th>
            <th md-column md-numeric>
                <span>Budget</span>
            </th>
            <th md-column md-numeric>
                <span>Status</span>
            </th>
</thead>

我的表体如下所示：

<tbody md-body data-ng-switch on="dayDataCollapse[$index]" style="background-color: rgba(0,74,102,0.1)">
        <tr class="clickableRow" ng-class-odd="'oddRow'" ng-class-even="'evenRow'" style="padding: 0!important"
            md-row md-select="project"
            md-select-id="title" md-auto-select
            ng-repeat-start="project in filtered = (projects.data | orderBy : myOrder | filter:projectSearch) |
            limitTo: query.limit: (query.page - 1) * query.limit">
            <td md-cell>{{project.project_nr}}</td>
            <td md-cell style="padding-left:5px!important"
                ng-class="{selectedProject : project.selected == true}"
                ng-click="project.selected = !project.selected"
                ng-bind-html="decodeHTML(project.title)"></td>
            <td md-cell ng-show="budget_checked">€ {{project.budget_indication}}</td>
            <td md-cell ng-show="performance_checked" class="clickableRow clickableHover"
                ng-click="showCpiDialog($event, project)"><i
                    class="material-icons">
                fiber_manual_record</i>{{project.total_cpi[project.total_cpi.length-1].cpi > 0 ?
                project.total_cpi[project.total_cpi.length-1].cpi * 100 : ' ' | ceil}}
            </td>
</tbody>

我的表格分页如下：

<md-table-pagination
        id="paginationId"
        md-size="15"
        md-limit="query.limit"
        md-limit-options="[15, 30, 45, 75, 100]"
        md-page="query.page"
        md-total="{{filtered.length}}"
        md-page-select
        ng-click="saveSelectedRows()">
</md-table-pagination>

jQuery代码（使用另一个太大而无法添加的文件）：

var oldIndex;
    $('.sorted_head tr').sortable({
        containerSelector: 'tr',
        itemSelector: 'th',
        // placeholder: '<tr md-row class="placeholder">test</tr>',
        vertical: false,
        onDragStart: function ($item, container, _super) {
            oldIndex = $item.index();
            $item.appendTo($item.parent());
            _super($item, container);
        },
        onDrop: function  ($item, container, _super) {
            var field, newIndex = $item.index();

            if(newIndex != oldIndex) {
                $item.closest('table').find('tbody tr').each(function (i, row) {
                    row = $(row);
                    if(newIndex < oldIndex) {
                        row.children().eq(newIndex).before(row.children()[oldIndex]);
                    } else if (newIndex > oldIndex) {
                        row.children().eq(newIndex).after(row.children()[oldIndex]);
                    }
                });
            }

            _super($item, container);
        }
    });

jQuery可以在AngularJS表中使用分页

0 个答案: