如何在 jQuery Bootgrid 中动态修改数据源 URL 并刷新表格

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 间切换：

   Products   Users     

? 注意事项：

• 始终在 bindBootGrid() 前检查 if ($grid.data(“bootgrid”))，防止对未初始化对象调用 destroy 报错；
• responseHandler 函数必须返回符合 Bootgrid 协议的对象，否则分页与数据渲染将失效；
• 若涉及 POST 请求或携带 Token，可在 ajaxSettings 中添加 headers 或 data 字段；
• 表格容器（如 #grid-data）建议保留空 ，由 js 动态注入，确保结构可控。

  此方案已在 Bootgrid v1.3.1 中验证稳定，适用于多数据源、多 Schema 场景，是官方推荐的动态切换实践模式。