如何在jQuery/AngularJS DataTables无匹配行时，在表头下显示<p>内容？

针对WordPress中基于jQuery+AngularJS的DataTables场景，按以下步骤实现需求：

方案1：利用DataTables内置语言配置（推荐） #

DataTables自带空数据提示配置，直接初始化时指定内容即可自动渲染在表头下方：

jQuery版本初始化代码 #

// 替换成你的表格ID
$('#program-table').DataTable({
  language: {
    // 直接插入自定义提示内容
    emptyTable: '<p>No filters found</p>'
  },
  // 其他表格配置（比如分页、排序等）
});

AngularJS（angular-datatables）版本配置 #

angular.module('your-wordpress-app').controller('ProgramTableCtrl', function($scope, DTOptionsBuilder) {
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withLanguage({
      emptyTable: '<p>No filters found</p>'
    })
    // 追加其他DataTables配置，比如.withPaginationType('full_numbers')
});

方案2：动态插入现有

标签（保留原DOM元素） #

如果需要保留页面中已存在的<p>No filters found</p>，可以监听表格的draw事件，动态控制提示的显示位置：

jQuery版本实现 #

var $table = $('#program-table').DataTable();
var $emptyMsg = $('p:contains("No filters found")').hide(); // 先隐藏原提示

$table.on('draw.dt', function() {
  var tbody = $table.find('tbody');
  if ($table.data().length === 0) {
    // 清空空行，插入提示到tbody
    tbody.html('<tr><td colspan="100%" class="empty-msg-container"></td></tr>');
    tbody.find('.empty-msg-container').append($emptyMsg.show());
  } else {
    $emptyMsg.hide();
    // 恢复表格原有空行（如果需要）
    tbody.find('.empty-msg-container').parent().remove();
  }
});

AngularJS版本实现 #

angular.module('your-wordpress-app').controller('ProgramTableCtrl', function($scope, DTInstanceFactory) {
  $scope.dtInstance = DTInstanceFactory.newInstance();
  var $emptyMsg = angular.element('p:contains("No filters found")').hide();

  $scope.dtInstance.then(function(instance) {
    instance.DataTable.on('draw.dt', function() {
      var tbody = instance.tableElement.find('tbody');
      if (instance.DataTable.data().length === 0) {
        tbody.html('<tr><td colspan="100%" class="empty-msg-container"></td></tr>');
        tbody.find('.empty-msg-container').append($emptyMsg.show());
      } else {
        $emptyMsg.hide();
        tbody.find('.empty-msg-container').parent().remove();
      }
    });
  });
});

解决CSS不生效问题 #

WordPress的全局样式或DataTables默认样式可能覆盖自定义样式，按以下方式处理：

• 使用更具体的CSS选择器提升优先级，比如结合表格ID：

  /* 针对方案1的内置提示 */
  #program-table .dataTables_empty p {
    text-align: center;
    padding: 20px;
    color: #666;
    margin: 0;
  }
  
  /* 针对方案2的容器提示 */
  #program-table .empty-msg-container p {
    text-align: center;
    padding: 20px;
    color: #666;
    margin: 0;
  }
  

• 如果是AngularJS样式隔离导致的不生效，添加::ng-deep穿透隔离：

  ::ng-deep #program-table .empty-msg-container p {
    /* 自定义样式 */
  }
  

• 避免使用!important，除非万不得已，优先通过选择器特异性来覆盖样式。

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