向表格Bootstrap 4添加排序箭头图标

<th class="sortable">标题</th>

.sortable {
  cursor: pointer;
}

$(document).ready(function() {
  $('.sortable').click(function() {
    // 获取当前点击的表头的索引
    var columnIndex = $(this).index();

    // 获取当前点击的表头的排序状态
    var sortOrder = $(this).data('sort');

    // 改变排序状态并更新排序箭头图标
    if (sortOrder === undefined || sortOrder === 'desc') {
      $(this).data('sort', 'asc');
      $(this).find('i').remove();
      $(this).append('<i class="fa fa-caret-up"></i>');
    } else {
      $(this).data('sort', 'desc');
      $(this).find('i').remove();
      $(this).append('<i class="fa fa-caret-down"></i>');
    }

    // 执行排序操作
    // 在这里编写你的排序逻辑
  });
});