bootstrap-table 多表场景下如何动态获取ajaxRequest(params)调用所需参数

完全不需要你手动抓取、构造任意表格对应的params对象——bootstrap-table在触发data-ajax绑定的方法时，本身就会把当前表格的DOM上下文、对应分页/排序配置的完整params自动传入，只需要做两个简单调整就能适配多表场景：

第一步：改造通用的AJAX请求函数 #

之前的单表函数没有做多表区分，只需要利用函数调用时自动传入的上下文，识别当前发起请求的表格即可：

function ajaxRequest(params) {
    // 调用该函数时，this 指向当前发起请求的表格DOM元素
    // 可以通过这个值拿到每个表格的唯一ID，做业务区分
    const currentTableId = $(this).attr('id');
    // 将表格ID附加到请求参数中，后端可据此返回对应的数据
    params.data.tableId = currentTableId;

    // 保留原有请求逻辑不变
    $.getJSON(
        'ajax.php?action=doSomething' + $.param(params.data), 
        {format: 'json'}
    ).then(function (res) {
        params.success(res)
    });
}

只要你的表格HTML里保留data-ajax="ajaxRequest"的配置，所有同class的表格都会自动复用这个方法，不需要为每个表单独写请求逻辑。

第二步：按钮触发表格加载的实现 #

不需要手动去获取对应表格的params——bootstrap-table给每个初始化完成的表格实例封装了refresh方法，调用这个方法时，组件会自动收集当前表格的所有params（分页参数、排序规则、自定义查询条件等），触发绑定的ajaxRequest逻辑。
具体实现只需要在按钮上标记对应的目标表格ID，绑定点击事件即可：

1. 给触发按钮加标记，绑定对应表格的ID：

   <button class="load-table-btn" data-target="table-123">加载ID为123的表格数据</button>
   <button class="load-table-btn" data-target="table-456">加载ID为456的表格数据</button>
   

2. 绑定按钮的点击触发逻辑：

   document.querySelectorAll('.load-table-btn').forEach(btn => {
       btn.addEventListener('click', function () {
           // 从按钮属性中拿到要加载的目标表格ID
           const targetTableId = this.dataset.target;
           // 直接调用组件内置的refresh方法，自动完成params收集和请求触发
           $(`#${targetTableId}`).bootstrapTable('refresh');
       })
   })
   

注意事项 #

• 不要手动构造params结构：该对象包含服务端分页必需的offset、limit、排序字段、排序方向等固定参数，手动拼接很容易出现参数缺失导致的分页失效问题，直接调用内置refresh方法是最稳妥的方式
• 如果需要给某次加载传额外的自定义参数，可以在调用refresh时直接传入，组件会自动合并到params中：

  // 示例：给目标表格传入额外的查询参数
  $('#table-123').bootstrapTable('refresh', {
      query: {
          startDate: '2024-01-01',
          endDate: '2024-01-31'
      }
  })
  

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