c# - 如何在 Vue + ASP.NET 中实现数据排序?
问题描述
我在 Vue.js 中创建了一个简单的表,它显示了我数据库中的所有数据,并且我想要一个排序功能。
当我点击表格标题('Jenis Barang')时,它应该被触发。可能吗?这是桌子
这是 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>
任何帮助都是有意义的,谢谢!
解决方案
您可以使用.OrderBy(x => x.NamaJenisBarang)
. 你也可以在前端做非常相似的事情
jenisBarangList.sort()
您还可以使用自定义函数进行排序jenisBarangList.sort(function(a, b){return a-b})
推荐阅读
- flutter - 代码管理和调用服务器颤动
- blockchain - 区块链分布式数据库
- node.js - 如何使用单个 knex 连接处理具有多个模式的(oracle)数据库连接?
- c++ - 如何在 CImg 库中使用 label() 功能
- c - 在执行 scanf 之前如何刷新 printf?
- python - 打印连接在计算机上的 USB 设备的 USB 字母和 USB 名称的 python 脚本
- c# - 计算有多少额外的增量
- r - APIM:参与者-合作伙伴相互依赖模型
- amazon-web-services - 如何在 AWS 上创建客户管理的客户主密钥 (CMK)
- django - Django Unittest如何调整client.post以在request.META中设置数据