Как реализовать сортировку данных в Vue + ASP. NET?

Question

Я создал простую таблицу в Vue. js, которая отображает все данные в моей базе данных, и я хочу иметь функцию сортировки.

Она должна срабатывать, когда я нажимаю на заголовок таблицы ( «Дженис Баранг»). Является ли это возможным? Это таблица

Это услуга в C#: (Он извлекает все данные из базы данных)

public async Task<List<JenisBarangModel>> GetAllJenisBarang(int pageIndex, int itemPerPage, string filterByJenisBarang)
{
    var query = this._timurRayaDbContext
        .TbJenisBarang
        .AsQueryable();

    if (string.IsNullOrEmpty(filterByJenisBarang) == false)
    {
        query = query
            .Where(Q => Q.NamaJenisBarang.ToLower().Contains(filterByJenisBarang));
    }

    var jenisBarangData = await query
        .Select(Q => new JenisBarangModel
        {
            IDJenisBarang = Q.IdjenisBarang,
            NamaJenisBarang = Q.NamaJenisBarang
        })
        .Skip((pageIndex - 1) * itemPerPage)
        .Take(itemPerPage)
        .AsNoTracking()
        .ToListAsync();

    return jenisBarangData;
}

Часть шаблона

<template>
  <div>
    <div>
      <br />
      <h3 class="text-center">List Jenis Barang</h3>
      <button class="btn btn-success float-left" type="button" @click="addNewJenisBarang">
        <fa-icon icon="plus-square"></fa-icon>
        Input Jenis Barang Baru
      </button>
    </div>
    <br />
    <div>
      <h6 class="text-right">
        Tampilkan <select v-model="pageSizes"> </select> jenis barang per halaman
      </h6>
      <table class="table table-bordered table-hover">
        <thead class="thead-dark">
          <tr>
            <th scope="col" class="text-center">No.</th>
            <th scope="col" class="text-center">Jenis Barang</th>
            <th scope="col" class="text-center">Ubah</th>
            <th scope="col" class="text-center">Hapus</th>
          </tr>
          <tr class="thead-light">
            <th colspan="4" class="text-center">
              <span>Cari: </span>
              <input class="col-md-4" placeholder="Cari berdasarkan jenis barang" type="text" v-model="filterByJenisBarang" @change="fetch()" />
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="text-center" v-for="(jenisBarang,index) in jenisBarangList" :key="index">
            <td>{{index + 1}}</td>
            <td>{{jenisBarang.namaJenisBarang}}</td>
            <td>
              <a class="btn btn-warning" :href="'/update-jenis-barang?idJenisBarang='+jenisBarang.idJenisBarang">
                <fa-icon icon="edit"></fa-icon>
              </a>
            </td>
            <td>
              <button class="btn btn-danger" @click="deleteJenisBarang(jenisBarang)">
                <fa-icon icon="trash"></fa-icon>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="row">
        <div class="col-md-10">
          <ul class="pagination">
            <li v-for="page in totalPage" class="page-item">
              <button @click="changePage(page)">{{page}}</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

Часть скрипта

<script lang="ts">
import Vue from 'vue';
    import Component from 'vue-class-component';
    import { TimurRayaService, JenisBarangModel } from '../services/NSwagService';
    import { ValidationObserver } from 'vee-validate';
    import swal from 'sweetalert2';
    @Component({
        created: async function (this: JenisBarang) {
            await this.fetch();
        }
    })
    export default class JenisBarang extends Vue {
        service: TimurRayaService = new TimurRayaService();

        jenisBarangList: JenisBarangModel[] = [];

        newJenisBarang: JenisBarangModel = {
            idJenisBarang: 0,
            namaJenisBarang: ''
        }

        filterByJenisBarang = '';
        pageIndex = 1;
        itemPerPage = 5;
        totalData = 1;
        totalPage = 1;

        async fetch(): Promise<void> {
            this.totalData = await this.service.getTotalJenisBarang();
            this.totalPage = Math.ceil(this.totalData / this.itemPerPage);

            this.jenisBarangList = await this.service.getJenisBarang(this.pageIndex, this.itemPerPage, this.filterByJenisBarang);
        }

        async changePage(page: number): Promise<void> {
            this.pageIndex = page;
            await this.fetch();
        }
    }
</script>

Любая помощь будет значимой, спасибо!

Answer 1

Я бы создал вычисляемое свойство, которое сортирует по возрастанию или по убыванию на основе логического значения. Затем используйте вычисленное свойство в своем шаблоне. Примерно так:

<script>
export default {
  data () {
    return {
      sortDesc: true
    };
  },
  computed: {
    sortedList () {
      return this.jenisBarangList
        .sort((a,b) => this.sortDesc ? a.key - b.key : b.key - a.key)
    }
  },
  methods: {
    toggleSort () {
      this.$set(this, 'sortDesc', !this.sortDesc)
    }
  }
}
</script>

Answer 2

Вы можете отсортировать бэкэнд с помощью .OrderBy(x => x.NamaJenisBarang). Вы можете делать очень похожие вещи и в интерфейсе

jenisBarangList.sort(), а также вы можете использовать пользовательскую функцию для сортировки jenisBarangList.sort(function(a, b){return a-b})