bootstrap-table:第一次更改默认排序

Question

当我第一次点击任何可排序的列时，它会按'asc‘排序。如何将其更改为“desc”？

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<table id="table" data-toggle="table">
   <thead>
            <tr>
                <th data-field="id" data-sortable="true">Item ID</th>
                <th data-field="name" data-sortable="true">Item Name</th>
                <th data-field="price" data-sortable="true">Item Price</th>
            </tr>
    </thead>
     <tbody>
        <tr><td>3</td><td>first</td> <td>5.4</td></tr>
        <tr><td>1</td><td>second</td><td>7.8</td></tr>
        <tr><td>2</td><td>third</td><td>2.1</td></tr>
    </tbody>
</table>

​

Answer 1

你需要指定你想要的排序顺序。尝试添加：

data-sort-order="desc"

Answer 2

只需将data-order='desc'添加到您的<th>，您就可以开始工作了：

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<table id="table" data-toggle="table">
   <thead>
            <tr>
                <th data-order='desc' data-field="id" data-sortable="true">Item ID</th>
                <th data-order='desc' data-field="name" data-sortable="true">Item Name</th>
                <th data-order='desc' data-field="price" data-sortable="true">Item Price</th>
            </tr>
    </thead>
     <tbody>
        <tr><td>3</td><td>first</td> <td>5.4</td></tr>
        <tr><td>1</td><td>second</td><td>7.8</td></tr>
        <tr><td>2</td><td>third</td><td>2.1</td></tr>
    </tbody>
</table>

​

Answer 3

您可以在JS中初始化BT表时添加默认的订单列。它使用了列的索引。这是你改变顺序时的顺序。如果在更改后不需要更改订单，请将参数"bFilter“设置为false。

​

    Table = $('#survey-table').DataTable({
        "order": [[3, "asc"]],
        "lengthChange": false,
        "info": true,
        "unique": true,
        "bFilter": true,
        "columns": [
            { "data": "Name" },
            { "data": "Level" },
            { "data": "Start Date" },
            { "data": "End Date" },
            { "data": "Status" },
            { "data": "Action" }
        ],
    });

​

或者-如果你只使用HTML，你可以像这样默认顺序。

​

<table
  id="table"
  data-toggle="table"
  data-sort-name="id"
  data-sort-order="desc"
  data-height="460"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

​