应拼接带搜索参数的URL并用window.open()打开新页，而非调用table.reload()；新页中用URLSearchParams读取参数并传给table.render()的url配置。
点击 toolbar 搜索按钮后新开标签页展示结果，不能用 table.reload()
因为 table.reload() 是在原表格容器内刷新数据，和“新开标签页”完全冲突。你真正要做的，是拼一个带搜索参数的 url，然后用 window.open() 打开它——整个过程不碰表格实例、不触发任何 reload 或 render。
常见错误是：在 toolbar 的 click 事件里还调 table.reload()，结果页面没跳、参数也没传出去，只看到控制台报错或表格闪一下。
- 确保你的搜索表单（或输入框）有明确的 name 属性，比如
<input name="keyword">，这是后续拼参的基础 - 后端接口必须支持 GET 请求，并能从 URL query 中解析参数（如
/api/list?keyword=xxx&status=1） - 新页面的 HTML 文件需独立存在（如
search-result.html），且已引入 Layui 并初始化表格（table.render()时 url 直接取当前 location.search）
如何安全拼接带搜索参数的 URL 并打开新页
不要手动字符串拼接 ? 和 &，容易漏转义、丢空格、挂中文。用 URLSearchParams 最稳：
layui.table.on('toolbar(myTable)', function(obj){
if(obj.event === 'search'){
const keyword = $('#keyword').val().trim();
const status = $('#statusSelect').val(); // 假设还有下拉筛选
const params = new URLSearchParams();
if(keyword) params.append('keyword', keyword);
if(status) params.append('status', status);
// 注意：这里指向的是你的结果页，不是数据接口
const url = `search-result.html?${params.toString()}`;
window.open(url, '_blank');
}
});
关键点：
-
search-result.html必须是真实可访问的静态页，不能是#或伪路径 - 不要用
target="_blank"绑在按钮上——toolbar 按钮没有 href，没法直接跳 - 如果参数含中文或特殊符号（如
+、/），URLSearchParams会自动 encode，不用自己调encodeURIComponent
新页面中如何读取 URL 参数并渲染表格
在 search-result.html 里，table.render() 的 url 不能写死，得动态读取当前地址栏参数：
layui.use(['table'], function(){
var table = layui.table;
var urlParams = new URLSearchParams(window.location.search);
table.render({
elem: '#resultTable',
// 把搜索参数透传给后端接口
url: '/api/list?' + urlParams.toString(),
cols: [[
{field: 'id', title: 'ID'},
{field: 'title', title: '标题'},
{field: 'create_time', title: '时间'}
]],
page: true
});
});
注意：
- 别在新页面里再写一遍搜索表单——它只是结果页，所有筛选逻辑已在 URL 里定死
- 如果后端要求 POST，那就没法用 URL 传参，得改用 form.submit() 提交到新页，但需服务端配合接收 POST 并跳转渲染，复杂度陡增
-
urlParams.toString()输出的是干净的 query 字符串（如keyword=%E6%9F%90%E4%B8%9C&status=2），直接拼进接口 URL 即可
为什么不能用 table.reload() + target="_blank" 混搭
因为 table.reload() 是异步请求 + DOM 替换操作，它根本不产生跳转行为；而 target="_blank" 是 HTML 表单原生属性，只对 <form></form> 有效，toolbar 按钮是纯 JS 渲染的 DOM 元素，没有表单上下文。
强行混用只会导致两个问题：
- 点击后无反应（没绑定任何跳转逻辑）
- 或只刷新了原表格，新页打不开，用户以为功能失效
- 更隐蔽的坑：如果你在新页里又调了一次
table.render()但忘了清空缓存（layui.table.cache['myTable']），可能渲染出旧数据
新开标签页这件事，前端只管拼 URL 和 window.open()，其余全部交给新页面自己处理——边界清晰，才不容易出错。
