如何实现Bootstrap DataTable局部数据刷新而非整表重载？

我来帮你搞定这个问题！你的核心需求是在不跳回第一页的前提下，定期刷新DataTable的当前分页数据，之前的两种实现要么破坏了表格状态，要么因为配置不对没生效，我们来一步步调整：

问题根源分析 #

• 你最初用jQuery.html()直接替换tbody的方式，会完全重置DataTable的内部状态（包括分页、排序等），所以刷新后必然回到第一页。
• 你尝试的table.ajax.reload()没生效，是因为你的DataTable没有用官方推荐的AJAX数据源模式，而且缺少关键的分页保留配置。

推荐解决方案：使用DataTable原生AJAX模式（最稳定） #

这种方式让DataTable自己管理数据和状态，刷新时能完美保留当前分页、排序、搜索状态。

1. 修改index.php的表格初始化代码 #

保留表格结构，用DataTable的AJAX配置替代手动填充tbody：

<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Symbol</th>
<th>Price USD</th>
<th>Price BTC</th>
<th>24h Volume USD</th>
<th>Market Cap USD</th>
</tr>
</thead>
<tbody></tbody>
</table>

<script>
// 初始化DataTable，配置AJAX数据源和列映射
var table = $('#example').DataTable({
  responsive: true,
  // 启用分页（默认已开启，这里明确标注）
  paging: true,
  ajax: {
    url: "ajax.php",
    type: "POST",
    // 传递你需要的额外参数
    data: function() {
      return { abc: 1 };
    }
  },
  // 配置列与返回数据的映射关系
  columns: [
    { data: 'id' },
    { data: 'name' },
    { data: 'symbol' },
    { data: 'price_usd' },
    { data: 'price_btc' },
    { data: 'volume_usd_24h' },
    { data: 'market_cap_usd' }
  ]
});

// 每10秒刷新一次，关键是第二个参数设为false（不重置分页）
setInterval(function() {
  table.ajax.reload(null, false);
}, 10000);
</script>

2. 修改ajax.php返回JSON格式数据 #

DataTable的原生AJAX模式需要特定的JSON结构（包含data数组），替换原来的HTML输出：

<?php
if(isset($_POST['abc'])){
  // 这里替换成你的真实数据来源（数据库/API）
  $tableData = [
    [
      'id' => 1,
      'name' => 'Bitcoin',
      'symbol' => 'BTC',
      'price_usd' => '45200.50',
      'price_btc' => '1.00',
      'volume_usd_24h' => '12.5B',
      'market_cap_usd' => '860B'
    ],
    [
      'id' => 2,
      'name' => 'Ethereum',
      'symbol' => 'ETH',
      'price_usd' => '2350.20',
      'price_btc' => '0.052',
      'volume_usd_24h' => '5.2B',
      'market_cap_usd' => '280B'
    ],
    // 更多数据...
  ];

  // 返回DataTable要求的JSON格式
  echo json_encode(['data' => $tableData]);
}
?>

备选方案：保留HTML填充方式（不推荐） #

如果因为特殊需求必须用HTML填充tbody，可以通过记录当前分页页码，刷新后手动恢复：

var table = $('#example').DataTable();

function refreshTable() {
  // 记录当前所在页码
  var currentPage = table.page();
  
  jQuery.ajax({
    url: "ajax.php",
    data: { abc: 1},
    type: "POST",
    success:function(data){
      $("#dsff").html(data);
      // 刷新表格并跳回之前的页码
      table.page(currentPage).draw(false);
    },
    error:function (){}
  });
}

setInterval(refreshTable, 10000);

⚠️ 注意：这种方式容易导致DataTable状态不一致，仅作为应急方案使用。

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