[Feature Request] how to use filter pagination and sorting in one table

[Fikri32]

选择要提交 issue 的库

vue-easytable

Issue 类型

Feature

Issue 标题

how to use filter pagination and sorting in one table

这个功能解决了什么问题？

how to use filter pagination and sorting in one table

你期望的 API 是什么样的？

here my code please help

<template>
  <div>
    <ve-table
      style="width: 100%"
      rowKeyFieldName="rowkey"
      :fixed-header="true"
      :columns="columns"
      :table-data="NewData"
      :sort-option="sortOption"
    />
    <div class="table-pagination">
      <ve-pagination
        :total="totalCount"
        :page-index="pageIndex"
        :page-size="pageSize"
        @on-page-number-change="pageNumberChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>
<style>
.table-pagination {
  margin-top: 20px;
  text-align: right;
}
.table-body-cell-class2 {
  background: orange !important;
  color: #fff !important;
}
</style>
<script>
export default {
  data() {
    return {
      sortOption: {
        multipleSort: true,
        sortChange: (params) => {
          console.log("sortChange::", params);
          this.sortChange(params);
        },
      },
      // real table data
      tableData: [],
      serviceData: [],
      // page index
      pageIndex: 1,
      // page size
      pageSize: 10,
    };
  },
  async mounted() {
    await this.callService();
    setInterval(() => {
      this.callService();
    }, 60000);
  },
  computed: {
    filterList() {
      let dates = [...new Set(this.tableData.map((x) => x.type))];
      let result = [];
      for (let i = 0; i < dates.length; i++) {
        result.push({ value: i, label: dates[i], selected: false });
      }
      return result;
    },
    columns() {
      return [
        {
          field: "",
          key: "a",
          title: "#",
          align: "center",
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (this.pageIndex - 1) * this.pageSize + rowIndex + 1;
          },
        },
        {
          field: "region",
          key: "b",
          title: "Region",

        },
        {
          field: "type",
          key: "c",
          title: "Type",

          // filter
            filter: {
              filterList: this.filterList,
              // filter confirm hook
              filterConfirm: (filterList) => {
                const labels = filterList
                  .filter((x) => x.selected)
                  .map((x) => x.label);
                this.searchByDateField(labels);
              },
              // filter reset hook
              filterReset: (filterList) => {
                this.searchByDateField([]);
              },
            },
        },
        {
          title: "Total",
          children: [
            {
              field: "total",
              key: "d",
              title: "3D",
              width: 100,
              sortBy: "",
            },
          ],
        },

      ];
    },
    NewData() {
      const { pageIndex, pageSize } = this;
      return this.serviceData.slice(
        (pageIndex - 1) * pageSize,
        pageIndex * pageSize
      );
    },
    totalCount() {
      return this.serviceData.length;
    },
  },
  methods: {
    // page number change
    pageNumberChange(pageIndex) {
      this.pageIndex = pageIndex;
    },

    // page size change
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
    },

    async callService() {
        this.dataService = [
          { region: "West", type: 'A',total:100},
          { region: "North", type: 'B',total:200 },
          { region: "Center", type: 'C',total:300},
        ];
      this.serviceData.splice(0, this.serviceData.length);
      for (var i = 0; i < this.dataService.length; i++) {
        this.serviceData.push({
          region: this.dataService[i].region,
          type: this.dataService[i].type,
          total: this.dataService[i].total,
        });
      }
      //   console.log(this.tableData);
    },
    sortChange(params) {
      let data = this.serviceData.slice(0);

      data.sort((a, b) => {
        if (params.total) {
          if (params.total === "asc") {
            return a.total - b.total;
          } else if (params.total === "desc") {
            return b.total - a.total;
          } else {
            return 0;
          }
        }
      });
      this.serviceData = data;
    },
    // search by date field
    searchByDateField(labels) {
      this.tableData = this.serviceData.filter(
        (x) => labels.length === 0 || labels.includes(x.type)
      );
    },
  },
};
</script>

[huangshuwei]

Sorry. I don't know where your problem is. Can you describe your specific problem.

Usually,There are two way for paging.
1、Use the service paging method to process the filter parameters. Rebind the table comp and paging comp after the server returns data. 2、Use the client paging method to process the filter parameters. Rebind the table comp and paging comp after the client returns data.

[Fikri32]

so in the above code the sorting and pagination is not running whereas the filtering is running smoothly, can you give an example please?