bootstrap自定义排序

要在 Bootstrap 中自定义排序，您可以使用以下步骤：

1. 首先，您需要使用 JavaScript 将您的数据排序。
2. 然后，使用 jQuery 将您的已排序数据添加到 Bootstrap 的表格中。
3. 最后，您需要重新绘制 Bootstrap 表格以使用新的排序数据。

下面是一个简单的示例，演示如何使用 JavaScript 和 jQuery 自定义排序 Bootstrap 表格：

HTML 代码：

<table id="myTable" class="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品 A</td>
      <td>100</td>
      <td>5</td>
    </tr>
    <tr>
      <td>商品 B</td>
      <td>50</td>
      <td>10</td>
    </tr>
    <tr>
      <td>商品 C</td>
      <td>200</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

JavaScript 代码：

// 自定义排序函数
function sortTable(table, column, asc) {
  var tbody = table.find('tbody');
  var rows = tbody.find('tr').toArray();
  rows.sort(function(a, b) {
    var aVal = $(a).children('td').eq(column).text();
    var bVal = $(b).children('td').eq(column).text();
    if (asc) {
      return (aVal > bVal) ? 1 : -1;
    } else {
      return (aVal < bVal) ? 1 : -1;
    }
  });
  $.each(rows, function(index, row) {
    tbody.append(row);
  });
}

// 切换排序按钮点击事件
$('#myTable th').click(function() {
  var table = $(this).closest('table');
  var column = $(this).index();
  var asc = $(this).hasClass('asc');
  table.find('th').removeClass('asc desc');
  if (asc) {
    $(this).addClass('desc');
  } else {
    $(this).addClass('asc');
  }
  sortTable(table, column, asc);
});

// 初始排序
sortTable($('#myTable'), 0, true);

在这个示例中，我们将表头单元格的点击事件绑定到 `sortTable()` 函数，该函数将使用 `asc` 参数指定升序或降序排序。在单元格上添加 `.asc` 或 `.desc` 类将更改箭头的方向。`sortTable()` 函数将使用 jQuery 的 `text()` 方法获取单元格的值，然后将行按升序或降序排序，并使用 `append()` 方法将它们添加回 Bootstrap 表格中。

您可以根据需要自定义此示例，例如使用不同的排序算法、添加更多的列、使用 AJAX 从服务器检索数据等。