Question

当我在vue-js代码中使用可排序的jQuery时，我想获取行位置数组。一切正常，但是当我从目标页面行数组位置当前页面转到当前页面的下一页或上一页时（与ajax分页）与当前页面行数组位置冲突！看来当前页面和新页面行的数组位置会混合！但是当我使用inspect元素时，一切都很好，没有问题，而jQuery ui的.each函数无法正确获取新行的位置。

我正在使用Laravel 5.6，PHP 7.2，Vue-js 2.5，Jquery 2.0.3，Jquery ui 1.12.1

            <tbody class="sortableTbody">
            <tr class="sortableTr" v-for="(item, index) in items" :data-position ="item.position"> <td class="txtc">@{{ item.name }}</td> </tr>
            </tbody>

            $(".sortableTbody").sortable({
              axis:'y',cursor: "move", update : function(event, ui){
                var namearrays = [];
                $('.sortableTbody tr.sortableTr').each(function(index,element) {
                   console.log($(this).data('position'));
                });
              }
            });

==============

            pagination is Page 1 (Before using sortable):
            <tbody class="sortableTbody">
            <tr class="sortableTr"><td data-position="1">Name1</td></tr>
            <tr class="sortableTr"><td data-position="2">Name2</td></tr>
            <tr class="sortableTr"><td data-position="3">Name3</td></tr>
            <tr class="sortableTr"><td data-position="4">Name4</td></tr>
            <tr class="sortableTr"><td data-position="5">Name5</td></tr>
            </tbody>
            Array is : [1,2,3,4,5] ✓


            pagination is Page 1 (After using sortable):
            <tbody class="sortableTbody">
            <tr class="sortableTr"><td data-position="2">Name2</td></tr>
            <tr class="sortableTr"><td data-position="3">Name3</td></tr>
            <tr class="sortableTr"><td data-position="1">Name1</td></tr>
            <tr class="sortableTr"><td data-position="4">Name4</td></tr>
            <tr class="sortableTr"><td data-position="5">Name5</td></tr>
            </tbody>
            Result of Page1  : [2,3,1,4,5] ✓

==============

            pagination is Page 2 (Before using sortable):
            <tbody class="sortableTbody">
            <tr class="sortableTr"><td data-position="6">Name6</td></tr>
            <tr class="sortableTr"><td data-position="7">Name7</td></tr>
            <tr class="sortableTr"><td data-position="8">Name8</td></tr>
            <tr class="sortableTr"><td data-position="9">Name9</td></tr>
            </tbody>
            Array is : [6,7,8,9] ✓

            pagination is Page 2 (After using sortable):
            <tbody class="sortableTbody">
            <tr class="sortableTr"><td data-position="7">Name7</td></tr>
            <tr class="sortableTr"><td data-position="6">Name6</td></tr>
            <tr class="sortableTr"><td data-position="8">Name8</td></tr>
            <tr class="sortableTr"><td data-position="9">Name9</td></tr>
            </tbody>
            Result of Page2 : [3,2,8,9] χ ( confilicts Page1 and Page2 array )

==============

            while it must be [7,6,8,9] ✓

Answer 1

我自己找到了

我必须使用：

console.log( $(this).attr('data-position') );

而不是：

console.log( $(this).data('position') );

vue-js分页axios回调后如何解决jquery可排序的每个函数？

1 个答案: