Tabulator插件远程分页发送的请求，怎么抓取响应标头的数据？

Question

项目用Tabulator插件制作一个自定义列的表格组件，现在需要远程获取表格数据，但是使用时发送完请求后仅返回了表格的数组数据，没有返回total,但是在响应标头中有total数据，我该怎么获取？

let opts = {
        ajaxURL:"/api/vc/form_data?query[form_id]=2072&query[type]=form",
        ajaxConfig: {
                method:"GET",
                headers:{
                        'X-API-Nonce': JSON.parse(window.localStorage.getItem('nonce')).data,
                        "Content-Type":'application/x-www-form-urlencoded',
                }
        },
        ajaxParams:{                                    //请求参数
                with: 1,
                paged: 1,
                lang: 'zh',
        },
        ajaxResponse: function(url, params, response){
                console.log(response)
                return response
        },
        layout: "fitColumns",
        pagination: 'remote',
        paginationSizeSelector: [5, 10, 15, 20],
        paginationSize: 10,
        paginationCounter:function(pageSize, currentRow, currentPage, totalRows, totalPages){
                return "共 " + totalRows +  " 条数据 ";     //表尾数据总数
        },
        columns:columns,
}

发送请求后的截图：
数据：

响应标头：

我需要抓取响应标头的X-API-Total字段的值用于总行数显示以及总分页数数制作，我该怎么获取

Answer 1

【以下回答由 GPT 生成】

问题分析：

根据问题描述，需要从Tabulator插件的远程分页请求中获取响应标头的数据X-API-Total。但是Tabulator插件的ajaxResponse只返回响应的数据，无法直接获取响应标头的数据。

解决方案：

要获取响应标头的数据，需要使用XMLHttpRequest对象发送请求，并自己处理响应标头。下面给出一个可能的解决方案：

1. 创建一个新的XMLHttpRequest对象，并设置请求的方法为GET，如下所示：

let xhr = new XMLHttpRequest();
xhr.open('GET', "/api/vc/form_data?query[form_id]=2072&query[type]=form", true);

// 设置请求头
xhr.setRequestHeader("X-API-Nonce", JSON.parse(window.localStorage.getItem('nonce')).data);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 设置请求的回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理响应数据
    let response = JSON.parse(xhr.responseText);
    // 获取响应标头的数据
    let total = xhr.getResponseHeader("X-API-Total");

    // 打印响应数据和响应标头的数据
    console.log(response);
    console.log(total);

    // 使用Tabulator插件创建表格
    let opts = {
      // 设置表格的数据
      data: response,
      // 设置表格的总行数和总分页数
      ajaxResponse: function(url, params, response){
          response['total'] = total;
          return response;
      },
      layout: "fitColumns",
      pagination: 'remote',
      paginationSizeSelector: [5, 10, 15, 20],
      paginationSize: 10,
      paginationCounter:function(pageSize, currentRow, currentPage, totalRows, totalPages){
          return "共 " + totalRows + " 条数据 ";     //表尾数据总数
      },
      columns:columns,
    };

    // 创建Tabulator表格
    let table = new Tabulator("#example-table", opts);
  } else {
    // 请求失败，打印错误信息
    console.error(xhr.statusText);
  }
};

// 发送请求
xhr.send();

请注意，上面的代码只是一个示例，并未经过测试和完整的验证。

总结：

要从Tabulator插件的远程分页请求中获取响应标头的数据，需要使用XMLHttpRequest对象发送请求，并在请求成功后通过xhr.getResponseHeader("X-API-Total")方法获取响应标头的数据，然后将其传递给Tabulator插件的ajaxResponse属性，以便在表格中显示总行数和总分页数。

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