搜索后的数据表自定义排序条件

Question

以下是代码段。搜索后默认情况下，结果按字母顺序排序。我希望它根据我的搜索值的前缀进行排序。

例如，我输入b，然后它应该排序bbb then abed而不是abed then bbb。

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle(100);
});

$("#btnSearch").click(function(e){
  var table = $('#custTable').DataTable();
  var txtCustName = $("#txtCustName").val();

  table
    .columns(1).search(txtCustName)
    .draw();
});

$('#custTable').DataTable({
  responsive: {
    details: {
      type: 'column',
      target: 'tr'
    }
  },
  columnDefs: [
  {
    className: 'control',
    orderable: false,
    targets:   0
  }],
  "dom": 'iti',
  iDisplayLength: -1
});

$('#custTable thead th:first-child').css({'background-image':'none'});

$("#custTable a.cust_id").on('click', function(event){
  event.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
<link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="filter-container">
  <button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter Customer</button>

  <div id="filter-body" class="panel-collapse collapse">
    <div class="panel-body filter-body">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
        <div class="filter-group">
        <label for="txtCustName">Name</label>
        <input type="text" id="txtCustName">
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align:initial;">
<div class="filter-group">
<button class="btn btn-success" id="btnSearch"><i class="mdi mdi-filter-outline"></i> Search</button>
</div>
</div>
    </div>
  </div>
</div>

<table id="custTable" class="table table-striped table-bordered table-hover dataTable no-footer dtr-column" cellspacing="0" width="100%" aria-describedby="custTable_info" role="grid" style="width: 100%;"><thead>
<tr role="row"><th class="control sorting_asc" rowspan="1" colspan="1" style="width: 13px; display: none; background-image: none;" aria-label=""></th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 74px;" aria-label="Name: activate to sort column ascending">Name</th></tr>
</thead><tbody><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=27">abed</a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=28">accure</a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=29">async</a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=30">bbb</a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=20">john</a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=26">pencil</a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=21">steve</a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=25">taylor</a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=24">zack bro</a></td>
</tr></tbody></table>