如何在Bootstrap页面用按钮无刷新切换条目排序顺序

要实现无需刷新页面即可切换条目排序顺序，核心是利用dot.js模板重新渲染更新后的数组，具体步骤如下：

1. 规范模板存放并提前编译 #

将dot.js模板放在专用的script标签中（避免页面加载时直接显示模板代码），并在页面初始化时编译为可复用的渲染函数：

<!-- 存放dot.js模板 -->
<script type="text/x-dot-template" id="entries-template">
  {{~ it.entries:entry:index}}
  <div class="card">
    <h2>{{=entry}}</h2>
  </div>
  {{~}}
</script>

<!-- 页面元素 -->
<button type="button" onClick="reverseEntries();">Reverse order of entries</button>
<div id="entries"></div>

// 页面加载完成后初始化
$(document).ready(function() {
  // 获取模板内容并编译为渲染函数
  const templateText = $('#entries-template').text();
  window.renderEntries = doT.template(templateText);
  
  // 初始渲染条目
  $('#entries').html(renderEntries({ entries: entries }));
});

2. 完善反转函数实现页面更新 #

反转数组后，调用编译好的渲染函数生成新的HTML，替换目标容器内容：

function reverseEntries(){
  // 反转原数组（若不想修改原数组，可改用const reversed = [...entries].reverse()）
  entries.reverse();
  // 用更新后的数组重新渲染页面
  $('#entries').html(renderEntries({ entries: entries }));
}

可选：不修改原数组的实现 #

如果需要保留原数组的初始顺序，可基于数组副本进行反转：

function reverseEntries(){
  const reversedEntries = [...entries].reverse();
  $('#entries').html(renderEntries({ entries: reversedEntries }));
}

点击按钮后，数组顺序会立即反转，页面也会同步更新为新的条目顺序，全程在客户端完成，无需刷新页面。

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