jQuery 数据表 - 当输入在 <td></td> 中包含 html/图像时，通过选择输入进行过滤

Question

我正在尝试使用选择输入 DataTables with select inputs DEMO 过滤我的表

我的问题是我的<table> 在<td> 中有几个图像/精灵等，我希望数据表在其中使用<span class="hidden-val"> 值。

例子：

<tr>
  <td>
    <span style="display:none" class="hidden-val">23</span>
    <i class="my-sprite-abc>My Logo</i>
  </td>
</tr>

我通过将字符串转换为 DOM HTML 来管理数据表以显示正确的选择输入值，然后得到 innerText，但我仍然在处理 column.search.draw() 部分，因为我不知道如何教数据表使用隐藏的跨度值。

$('#my-table').DataTable( {

        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    console.log($(this).val());
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                        );

                    column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
                } );

                column.data().unique().sort().each( function ( d, j ) {
                    var html_val = $.parseHTML(d)
                    //console.log(html_val);

                    if (html_val != null){ // check if html is not null
                        var new_d = $(html_val)[0].innerText // take first html object <span> in this case
                        select.append( '<option value="'+new_d+'">'+new_d+'</option>' )
                    }

                } );
            } );
        }
    } );

谢谢，如果你能帮我解决这个问题！

Answer 1

您可以创建一个type based search plugin，让您仅过滤hidden-val：

jQuery.fn.dataTable.ext.type.search.hiddenVal = function(data) {
    return $('<div>').append(data).find('.hidden-val').text()
}

并将具有hidden-val 的列设置为type：

...
columnDefs: [
    { type: "hiddenVal", targets: [0] } //fist column as example
],
... 

演示 -> http://jsfiddle.net/dtuv0qhj/