Как решить jquery сортируемый каждой функции после vue-js pagination axios callback? - PullRequest
Новая
       40

Как решить jquery сортируемый каждой функции после vue-js pagination axios callback?

0 голосов
/ 30 декабря 2018

Я хочу получить массив строк Position, когда я использую сортировку jquery в моем коде vue-js.все работает нормально, но когда я перехожу на следующую или предыдущую страницу с текущей страницы (с пагинацией ajax) на целевом массиве строк строк, конфликт позиции с массивом строк текущей позиции Position !!Похоже, что массив текущей и новой строк строки Position будет смешанным!но когда я использую inspect element, все хорошо, и нет проблем, в то время как функция .each в jquery ui не может правильно получить новые строки Position.

Я использую 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] ✓

1 Ответ

0 голосов
/ 30 декабря 2018

Я сам нашел это

Я должен использовать: 

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

вместо: 

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