在jQuery DataTable中添加自定义下拉框后排序功能异常的修复方案

你已经搞定了下拉框的核心过滤逻辑，剩下的两个UI和事件问题其实很好调整，我来帮你梳理解决思路：

问题原因拆解 #

1. 排序按钮被挤到搜索框下方：你在添加下拉框时用了$(column.header()).empty()，这会清空表头单元格里的所有内容——包括DataTable默认生成的排序按钮元素，导致排序按钮丢失或被挤到下方。
2. 点击下拉框触发列排序：DataTable的表头单元格默认绑定了排序点击事件，当你点击下拉框时，事件会向上冒泡到表头单元格，触发不必要的排序操作。

具体修改方案 #

1. 恢复排序按钮位置 #

不要清空表头单元格，直接把下拉框追加到表头元素内部，这样原来的排序按钮会保留在单元格里，和下拉框共存。

2. 阻止下拉框触发排序事件 #

给下拉框添加click事件监听，调用e.stopPropagation()阻止事件冒泡到表头单元格，这样点击下拉框时就不会触发排序了。

修改后的完整代码 #

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var max = parseInt($('#cars').children("option:selected").val(), 10 );
    var age = parseFloat( data[3] ) || 0; // use data for the age column
    if (isNaN( max ) || age <= max ) {
      return true;
    }
    return false;
  }
);
$(document).ready(function() {
  $('#example thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
  } );
  var table = $('#example').DataTable();
  table.columns().every( function () {
    var that = this;
    $( 'input', this.header() ).on( 'keyup change', function () {
      if ( that.search() !== this.value ) {
        that
          .search( this.value )
          .draw();
      }
    } );
  } );
  table.column(3).every( function () {
    var column = this;
    var select = $('<select id="cars"><option value=""></option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option></select>')
      // 移除empty()，直接将下拉框追加到表头中
      .appendTo($(column.header()))
      // 阻止事件冒泡，避免点击下拉框触发排序
      .on('click', function(e) {
          e.stopPropagation();
      });
  });
  // Event listener to the two range filtering inputs to redraw on input
  $('#cars').change( function() {
    table.draw();
  } );
} );

额外优化建议 #

• 如果觉得表头内的输入框和下拉框排版拥挤，可以加一点CSS调整布局：

#cars {
  margin-left: 10px;
  padding: 2px 4px;
}

• 注意#cars是唯一ID，若后续要给多列加下拉框，建议改用class代替ID，避免重复冲突。

内容的提问来源于stack exchange，提问作者Tony Montana