bootstrap-table-filter-control选项排序

Question

使用whenzhixin的Boostrap表和过滤控制扩展。 http://bootstrap-table.wenzhixin.net.cn/extensions/#table-filter-control

我希望选择中显示的选项按数字顺序排序。

代码可在：https://jsfiddle.net/yd75psoc/4

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>

<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

<table
    id="table"
    data-filter-control="true"
    data-filter-show-clear="true">
    <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price" data-filter-control="select">Item Price</th>
        </tr>
    </thead>
</table>

<script>
    var $table = $('#table')

    $(function() {
        var data = [
            {
                'id': 0,
                'name': 'Item 0',
                'price': '$10'
            },
            {
                'id': 1,
                'name': 'Item 1',
                'price': '$1'
            },
            {
                'id': 2,
                'name': 'Item 2',
                'price': '$2'
            }
        ]
        $table.bootstrapTable({data: data})
    })
</script>

您将看到选项按以下顺序显示：1、10、2。

我需要按数字顺序显示这些值：1、2、10。

Answer 1

这是您正在使用的

filter-control

版本中的一个错误。

我已经编辑了您的代码，它可以与我正在使用的

filter-control

版本一起使用。

编辑小提琴：

https://jsfiddle.net/eitanmg/0y3tp4n7/1/

我正在使用的过滤器控制版本（并解决了你的问题）：

https://raw.githubusercontent.com/eitanmg/bootstrap-table-filter-control/master/bootstrap-table-filter-control.js

只需用你的库替换这个库就可以了。

Answer 2

使用boostrap-table并从1.18.3升级到1.22.1。 我认为问题还没有解决：

我刚刚尝试过相同的示例，但名称为：

项目名 并更改了名字。

<script src="https://rawgit.com/wenzhixin/bootstrap-table/develop/src/bootstrap-table.js" type="module"></script>

<script src="https://rawgit.com/wenzhixin/bootstrap-table/develop/src/extensions/filter-control/bootstrap-table-filter-control.js" type="module"></script>


<table id="table" data-filter-control="true" data-filter-show-clear="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name"  data-filter-control="select">Item Name</th>
      <th data-field="price" data-filter-control="select">Item Price</th>
    </tr>
  </thead>
</table>


    var $table = $('#table')

$(function() {
  var data = [{
      'id': 0,
      'name': 'Item D',
      'price': '10'
    },
    {
      'id': 1,
      'name': 'Item B',
      'price': '1'
    },
    {
      'id': 1,
      'name': 'Item A',
      'price': '2'
    },
    {
      'id': 2,
      'name': 'Item C',
      'price': '20'
    }
  ]
  $table.bootstrapTable({
    data: data
  })
})

https://jsfiddle.net/gm3f95ks/6/

字母顺序不固定。