点击事件触发前如何将按钮组selected类对应值设为DataTable默认筛选值

解决方案 #

你需要将筛选逻辑抽为公共方法，在页面初始化阶段主动触发一次默认选中项的筛选即可，修改后的代码如下：

JS代码 #

// 抽离公共筛选方法，避免重复逻辑
function filterTableByTerm(searchTerm) {
  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    return data[3] == searchTerm;
  })
  table.draw();
  $.fn.dataTable.ext.search.pop();
}
// 原有点击事件逻辑
$('.c-btn-group').on('click', 'a', function(event) {
  event.preventDefault();
  const searchTerm = this.textContent;
  // 调用公共筛选方法
  filterTableByTerm(searchTerm);
  // 更新选中状态
  $('a').removeClass('selected');
  $(this).addClass('selected');       
});
// 页面初始化后触发默认筛选，注意要写在DataTable实例初始化完成的代码之后
$(function() {
  const defaultTerm = $('.c-btn-group a.selected').text();
  filterTableByTerm(defaultTerm);
})

注意事项 #

• 确保默认筛选的执行代码放在你的table（DataTable实例）初始化代码之后，否则会因为实例不存在报错
• 如果你的按钮文本存在前后空格，可以用trim()方法处理文本内容，避免匹配失败

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