Tabulator插件远程分页，怎么获取数据总数，还有分页

目前项目需要用到Tabulator插件，数据从远程中获取，每次获取10条，比如我的数据有10000条（未请求前这个是不知道的），如何通过请求确定分页的页数，还有点击分页页码时如何请求当前点击页码的数据？

let options = {
      ajaxURL: "/api/vc/product",
      ajaxConfig: {
              method:"GET",                               // 请求方式
      },
      ajaxParams:{                                    //请求参数
              with: 1,
              paged: 1,
              'query[status]': 'publish',
              lang: 'zh',
       },
      ajaxResponse: function(url, params, response){  // 请求结果回调
             return response;
      },
      pagination: 'remote',
      paginationSize: 10,
      paginationCounter:function(pageSize, currentRow, currentPage, totalRows, totalPages){
              return "共 " + totalRows +  " 条数据 ";     //表尾数据总数
      },
      columns: [                      // 表头列参数
              {
                      title: "ID",            // 列名称
                      field: "id",      // 列对应数据字段
               },
               {
                      title: "产品",
                      field: "title",
                },
                {
                       title: "SKU",
                       field: "sku",
                },
                {
                       title: "价格",
                       field: "price",
                 },
                 {
                       title:"分类", 
                       field:"terms", 
                  },
                  {
                       title: "创建日期",
                       field: "created",
                   },
           ],
      }
}
let S = new Tabulator("#datatable-table", options);

生成的表格如下：

这里只获取到了10条数据，而且没有更多的分页按钮，无法查看更多的数据，想要实现如下效果：

数据从远程中获取没有给你返回一些分页的信息吗

【以下回答由 GPT 生成】

首先，要实现获取数据总数和分页功能，需要对远程请求进行一些改动和增加一些回调函数。以下是具体的解决方案:

1. 获取数据总数

为了获取数据总数，需要在ajax请求中添加一个特殊的参数来请求只返回总数的接口。假设该接口为/api/vc/product/count，则在ajax参数中添加如下代码：

ajaxURL: "/api/vc/product",
ajaxConfig: {
  method: "GET",
},
ajaxParams: {
  with: 1,
  paged: 1,
  'query[status]': 'publish',
  lang: 'zh',
  total: true // 添加该参数来请求总数接口
},

然后，在ajaxResponse回调函数中，获取到总数后，返回一个新的response对象，将总数作为一个属性添加到response中并返回。代码如下：

ajaxResponse: function(url, params, response){
  // 获取总数数据的接口返回一个对象，例如{ total: 100 }
  let total = response.total; // 假设返回的总数数据在response的total属性中
  delete response.total; // 删除response中的总数属性

  // 将总数数据添加到response中作为一个新的属性
  response = {
    total: total,
    data: response // 假设数据返回在response的data属性中
  };

  return response;
},

这样就可以在ajax请求后得到数据总数。

2. 实现分页功能

为了实现分页功能，需要在Tabulator中配置以下参数：

pagination: "remote", // 启用远程分页
paginationSize: 10, // 每页显示的数据条数
paginationInitialPage: 1, // 初始页码，默认为1
paginationDataReceived: {
  last_page: "last_page", // 假设返回的总页数在response的last_page属性中
  current_page: "current_page" // 假设返回的当前页码在response的current_page属性中
},

然后，在paginationCounter回调函数中，获取到总数数据后，返回一个带有总数的字符串。代码如下：

paginationCounter: function(pageSize, currentRow, currentPage, totalRows, totalPages){
  return "共 " + totalRows + " 条数据"; // 将总数数据作为字符串返回
},

3. 点击分页页码时请求相应页面的数据

为了实现点击分页页码时请求相应页面的数据，需要在Tabulator中配置以下参数：

paginationButtonCount: 5, // 显示的分页按钮数量，默认为7
paginationClicked: function(page){
  // 点击分页页码时，重新发送ajax请求并更新Tabulator的数据
  myTable.setData("/api/vc/product", { with: 1, paged: page });
},

这样就可以在点击分页页码时请求相应页面的数据。

最终的代码如下：

let options = {
  ajaxURL: "/api/vc/product",
  ajaxConfig: {
    method: "GET",
  },
  ajaxParams: {
    with: 1,
    paged: 1,
    'query[status]': 'publish',
    lang: 'zh',
    total: true // 添加该参数来请求总数接口
  },
  ajaxResponse: function(url, params, response){
    // 获取总数数据的接口返回一个对象，例如{ total: 100 }
    let total = response.total; // 假设返回的总数数据在response的total属性中
    delete response.total; // 删除response中的总数属性

    // 将总数数据添加到response中作为一个新的属性
    response = {
      total: total,
      data: response // 假设数据返回在response的data属性中
    };

    return response;
  },
  pagination: "remote", // 启用远程分页
  paginationSize: 10, // 每页显示的数据条数
  paginationInitialPage: 1, // 初始页码，默认为1
  paginationDataReceived: {
    last_page: "last_page", // 假设返回的总页数在response的last_page属性中
    current_page: "current_page" // 假设返回的当前页码在response的current_page属性中
  },
  paginationCounter: function(pageSize, currentRow, currentPage, totalRows, totalPages){
    return "共 " + totalRows + " 条数据"; // 将总数数据作为字符串返回
  },
  paginationButtonCount: 5, // 显示的分页按钮数量，默认为7
  paginationClicked: function(page){
    // 点击分页页码时，重新发送ajax请求并更新Tabulator的数据
    myTable.setData("/api/vc/product", { with: 1, paged: page });
  },
  columns: [
    {
      title: "ID",
      field: "id",
    },
    {
      title: "产品",
      field: "title",
    },
    {
      title: "SKU",
      field: "sku",
    },
    {
      title: "价格",
      field: "price",
    },
    {
      title: "分类",
      field: "terms",
    },
    {
      title: "创建日期",
      field: "created",
    },
  ],
};

let myTable = new Tabulator("#datatable-table", options);

通过以上的代码进行改动和配置，就可以实现获取数据总数和分页功能。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^