如何制作点击无跳动、带箭头图标的可排序表格（基于ListJS）

我来帮你解决这个问题，结合List.js实现点击表头不跳动、带上下箭头的可排序表格，咱们一步步来实现：

1. 先解决表头点击“跳动”的问题 #

表头点击时的跳动，大多是因为默认的文本选中、元素位移或者List.js的默认样式导致的，咱们用这两个小妙招搞定：

• 给表头<th>加CSS，禁用选中、预留箭头空间，取消点击位移：

.sort {
  cursor: pointer; /* 提示可点击 */
  user-select: none; /* 禁止选中文本，避免点击时的选中文本跳动 */
  position: relative; /* 给后面的箭头定位用 */
  padding-right: 20px; /* 给箭头留位置，别让文字和箭头挤在一起 */
}
.sort:active {
  transform: none; /* 取消点击时的默认位移效果 */
}

• 初始化List.js时，确保不要触发不必要的DOM变动（默认逻辑已经够用，若有特殊需求再调整）：

const options = {
  valueNames: ['name', 'born'], // 对应表格tbody里的类名
};
const userList = new List('users', options);

2. 添加上下箭头表示排序方向 #

咱们用CSS伪元素来做箭头，不用额外加HTML元素，简洁又方便：

/* 默认状态：箭头隐藏 */
.sort:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.7; /* 箭头稍微淡一点，不抢文字风头 */
}

/* 升序状态：显示向下箭头（比如数字从小到大） */
.sort.asc:after {
  border-bottom: 5px solid #333;
}

/* 降序状态：显示向上箭头（数字从大到小） */
.sort.desc:after {
  border-top: 5px solid #333;
}

然后结合List.js的排序事件，自动切换箭头的类：

// 监听排序完成事件，更新表头的箭头类
userList.on('sortComplete', () => {
  // 先把所有表头的箭头类清空
  document.querySelectorAll('.sort').forEach(th => {
    th.classList.remove('asc', 'desc');
  });
  // 获取当前排序的字段和方向，给对应表头加类
  const currentSortField = userList.sort;
  if (currentSortField) {
    const targetTh = document.querySelector(`.sort[data-sort="${currentSortField}"]`);
    targetTh.classList.add(userList.sortDirection);
  }
});

3. 整合后的完整代码示例 #

HTML #

<div id="users">
  <table>
    <thead>
      <!-- 给表头加sort类和data-sort属性，对应tbody里的类名 -->
      <th class="sort" data-sort="name">Name</th>
      <th class="sort" data-sort="born">Born</th>
    </thead>
    <tbody class="list"> <!-- 必须加list类，List.js会识别这个容器 -->
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
    </tbody>
  </table>
</div>

CSS #

/* 基础表格样式，让表格好看点 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
th {
  background-color: #f8f8f8;
}

/* 可排序表头的样式 */
.sort {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 20px;
}
.sort:active {
  transform: none;
}
.sort:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.7;
}
.sort.asc:after {
  border-bottom: 5px solid #222;
}
.sort.desc:after {
  border-top: 5px solid #222;
}

JavaScript #

// 初始化List.js
const options = {
  valueNames: ['name', 'born']
};
const userList = new List('users', options);

// 监听排序完成，更新箭头状态
userList.on('sortComplete', () => {
  document.querySelectorAll('.sort').forEach(th => {
    th.classList.remove('asc', 'desc');
  });
  const currentSort = userList.sort;
  if (currentSort) {
    document.querySelector(`.sort[data-sort="${currentSort}"]`)
      .classList.add(userList.sortDirection);
  }
});

这样改完之后，你点击表头就不会有跳动的问题，而且当前排序的列会显示对应的上下箭头，完全符合你的需求！

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