Javascript 使用渲染数据搜索/过滤数据表

我正在尝试使用选择框对dataTables表应用筛选。我发现以下代码，允许我根据列数据设置选择框和过滤器：

这段代码工作得很好，但是我现在使用render方法将所有列合并为一个。我们这样做是为了我们可以设计每一行的样式来创建一个“票证”

不幸的是，现在过滤不起作用。我想这可能是因为不再显示这些列，但希望得到一些指导和帮助：）

当前代码：

$('#ticket_list').DataTable( {

  "columnDefs": [
    {
        "render": function ( data, type, row ) {
            return '<span class="client-data"> ' + data + ' </span>' 
                + '<span class="priority-data"> ' + row[1] + ' </span>' 
                + '<span class="status-data"> ' + row[2] + ' </span>' 
                + '<div class="subject-data"> ' + row[3] + ' </div>'
                + '<i class="fa fa-user"></i><span class="agent-data"> ' + row[4] + ' </span>'
                + '<span class="date-data"> ' + row[5] + ' </span>';
        },
        "targets": 0
    },        
    { "visible": false, "targets": [ 1,2,3,4,5 ]}
    ],     
    "columns": [
        { "title": "" }
    ],
    "pageLength": setPageLength(),
    "dom": '<"#search-box"f> rt <"#pagination.col-xs-12"p> <"#table-information.col-xs-12"i>',
    language: {
        search: "_INPUT_",
        searchPlaceholder: "Search"
    },        
    initComplete: function () {
        this.api().columns([0,1,2]).every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( ".ticket-filtering" )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    console.log(val)
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    },
} );

$（“#票证列表”）。数据表（{
“columnDefs”：[
{
“渲染”：函数（数据、类型、行）{
返回“”+数据+“”
+''+行[1]+''
+''+行[2]+''
+''+行[3]+''
+''+行[4]+''
+''+行[5]+''；
},
“目标”：0
},        
{“可见”：假，“目标”：[1,2,3,4,5]}
],     
“栏目”：[
{“标题”：“”}
],
“pageLength”：设置pageLength（），
“dom”：“rt”，
语言：{
搜索：“\u输入”，
搜索占位符：“搜索”
},        
initComplete:函数（）{
this.api（）.columns（[0,1,2]）.every（函数（）{
var列=此；
变量选择=$（“”）
.appendTo（“.ticket筛选”）
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
console.log（val）
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
} );
} );
},
} );

原因

函数无条件地返回HTML字符串，而不考虑

类型

参数，但此函数用于获取用于多种目的的数据：显示、排序、筛选和类型检测

解决方案

在函数中使用类型检测，仅在需要显示数据时返回HTML（

type===“display”

）

“呈现”：函数（数据、类型、行）{
如果（类型==‘显示’）{
数据=“”+数据+“”
+''+行[1]+''
+''+行[2]+''
+''+行[3]+''
+''+行[4]+''
+''+行[5]+''；
}
返回数据；
},

演示

有关代码和演示，请参见。

更多信息，请参见“转换数据”下的

"render": function ( data, type, row ) {
   if(type === 'display'){
      data = '<span class="client-data"> ' + data + ' </span>' 
         + '<span class="priority-data"> ' + row[1] + ' </span>' 
         + '<span class="status-data"> ' + row[2] + ' </span>' 
         + '<div class="subject-data"> ' + row[3] + ' </div>'
         + '<i class="fa fa-user"></i><span class="agent-data"> ' + row[4] + ' </span>'
         + '<span class="date-data"> ' + row[5] + ' </span>';
   }

   return data;
},