我如何从 AJAX 方法的服务器端响应更新 Bootstrap 表列?它会导致无限循环

q35jwt9p  于 2023-04-27  发布在  Bootstrap
关注(0)|答案(1)|浏览(85)

我的boostrap-table的输出(列和行)都是从REST API派生的。
我读到用新列重新创建表的最好方法是使用'refreshOptions'方法。但是当我在表的' AJAX '方法中这样做时,它进入了一个无限循环-因为它看起来完全破坏了表,重建它并再次触发ajax加载。这导致了ajax调用的无限递归循环。
在加载行之前,根据响应数据重新创建列的优雅方法是什么?
我创建了一个示例来演示这个场景:https://live.bootstrap-table.com/code/epicwhale/14790

mbyulnm0

mbyulnm01#

这似乎对我有用。

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-ajax="ajaxRequest"
  data-search="true"
  data-side-pagination="server"
  data-pagination="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  let new_columns = [{
        title: 'ID_NEW',
        field: 'id'
      }, {
        title: 'Item Name_NEW',
        field: 'name'
      }, {
        title: 'Item Price_NEW',
        field: 'price'
      }]
  
  function ajaxRequest(params) {
    var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data'
    $.get(url + '?' + $.param(params.data)).then(function (res) {
       params.success(res)
    })
  }
    
  var $table = $('#table')
  $(function() {
    $("#table").bootstrapTable('refreshOptions',
     { columns: new_columns });

  })
</script>

相关问题