如何根据其他文件搜索表单值动态修改DataTable的AJAX请求URL

你的代码有两个致命问题导致功能失效：

1. get_data()是异步Ajax请求，函数执行时不会等Ajax返回就直接执行return result，此时result还未被赋值，永远返回undefined，最终拼接出来的URL是resource->/api/archive/all/undefined，自然无法正确调用接口。
2. 完全没必要额外发一次Ajax去后端取表单值：表单值就在当前页面的表单组件实例里存着，直接读本地组件数据就行，绕一圈请求后端纯多余，还会引出异步时序问题。

Webix的DataTable本身原生支持动态URL，不需要提前拼接死字符串，按下面步骤改就行：

1. 废弃无用的get_data()方法 #

不需要额外写方法发请求取表单值，直接从Webix表单组件实例读实时值即可。

2. 把DataTable的url配置改成动态函数 #

不要把url写死成固定字符串，Webix支持给url传函数，每次DataTable加载/刷新数据时都会实时执行函数、拿最新的地址拼接结果，代码如下：

// DataTable配置项
{
  view: "datatable",
  id: "archiveTable", // 给datatable设唯一id，方便后续调用
  // 其他原有配置（列定义、分页配置等）保留不变
  columns: [/* 你原来的列配置 */],
  // 把原来的固定url改成动态函数
  url: function() {
    // 直接读搜索表单的实时值，替换成你实际的搜索表单id
    const formData = $$("你的搜索表单组件id").getValues();
    // 替换成你搜索输入框对应的字段名，没值时默认用原来的"apple"做兜底
    const searchValue = formData.searchKey || "apple";
    // 动态返回拼接好的请求地址
    return `resource->/api/archive/all/${searchValue}`;
  }
}

3. 表单提交后主动刷新DataTable #

改完上面的配置，原来的表单提交逻辑只需要在路由跳转后加一行刷新DataTable的代码即可，不需要多余的存值、取数逻辑：

// 表单提交逻辑
webix.ajax().post('apples', get_form()).then(() => {
  routie('apples');
  // 跳转后清空旧数据、重新加载新URL对应的数据
  $$("archiveTable").clearAll();
  $$("archiveTable").loadNext(0, 30); // 这里的参数和你原来的分页配置保持一致即可
});

补充：如果不知道搜索输入框对应的字段名，直接在浏览器控制台执行$$("你的搜索表单组件id").getValues()，打印出来的对象里的key就是对应字段名；也可以直接给搜索输入框加name:"searchKey"配置，后续就固定用formData.searchKey取值，避免字段名匹配错误。

内容的提问来源于stack exchange，提问作者Yukitteru