
jquery bootgrid 不支持直接修改已初始化实例的 `url` 参数,需通过销毁重建方式实现动态切换数据源,并同步更新表头结构与响应处理器。
在实际开发中,常需根据用户操作(如下拉选择、按钮点击等)动态切换表格的数据接口地址(例如从 /api/users 切换到 /api/products),并立即加载新数据。由于 Bootgrid 1.x 版本不提供 setUrl() 或 refresh(url) 等原生方法,最可靠且兼容性最佳的方案是:先调用 .bootgrid("destroy") 彻底卸载当前实例,再重新初始化并传入新 URL 和对应配置。
该过程需注意三个关键点:
- ✅ 销毁旧实例:避免内存泄漏和事件重复绑定;
- ✅ 重绘 :不同数据源字段结构往往不同(如 price vs email),必须手动更新 data-column-id 属性以匹配后端返回字段;
- ✅ 复用响应处理器(responseHandler):将原始响应转换为 Bootgrid 所需格式(含 current、rowCount、rows、total 四个必需字段)。
以下是一个完整可运行的示例,支持在「产品」与「用户」两个 API 间切换:
? 注意事项:
- 始终在 bindBootGrid() 前检查 if ($grid.data("bootgrid")),防止对未初始化对象调用 destroy 报错;
- responseHandler 函数必须返回符合 Bootgrid 协议的对象,否则分页与数据渲染将失效;
- 若涉及 POST 请求或携带 token,可在 ajaxSettings 中添加 headers 或 data 字段;
- 表格容器(如 #grid-data)建议保留空 ,由 JS 动态注入,确保结构可控。
此方案已在 Bootgrid v1.3.1 中验证稳定,适用于多数据源、多 Schema 场景,是官方推荐的动态切换实践模式。










