Question

我在应用程序中设置了一个数据表，其中行包含输入字段，我根据输入字段的文本值对表进行排序和过滤。我设法让排序工作正常，但我不能为我的生活找到工作。我认为这个问题与这样一个事实有关，即表是由另一个在其上调用数据表之前运行的JavaScript动态生成和填充的。

到目前为止，这是JavaScript：

/* Create an array with the values of all the input boxes in a column */
    $.fn.dataTable.ext.order["dom-text"] = function  ( settings, col )
    {
        return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
            return $("input", td).val();
        } );
    }

    /* Create an array with the values of all the input boxes in a column, parsed as numbers */
    $.fn.dataTable.ext.order["dom-text-numeric"] = function  ( settings, col )
    {
        return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
            return $("input", td).val() * 1;
        } );
    }

    /* Create an array with the values of all the select options in a column */
    $.fn.dataTable.ext.order["dom-select"] = function  ( settings, col )
    {
        return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
            return $("select", td).val();
        } );
    }


        $(document).ready(function() {

        var table =  $("#service_group0").DataTable({
                "searching": true,
                "ordering":  true,
                "columns": [
                    { "orderDataType": "dom-text", type: \'html\' },
                    { "orderDataType": "dom-select",type: \'html\' },
                    { "orderDataType": "dom-text" , type: \'string\'},
                    { "orderDataType": "dom-text", type: \'string\' },
                    { "orderDataType": "dom-text", type: \'string\'},
                    { "orderDataType": "dom-select" },
                    { "orderDataType": "dom-select" },
                    { "orderDataType": "dom-text-numeric"},
                   { "orderDataType": "dom-text", type: \'date\'},
                    null,
                    { "orderDataType": "dom-select" },
                    { "orderDataType": "dom-text-numeric"},
                    { "orderDataType": "dom-select" },
                    { "orderDataType": "dom-text", type: \'string\' },
                    { "orderDataType": "dom-text", type: \'string\' },
                    { "orderDataType": "dom-text", type: \'date\'},
                    null,
                    null
                ],
                initComplete:   function () {
                    this.api().columns().every( function () {
                        var column = this;
                         if(column.index() == 5){
                            var select = $("<select id=\'strength_search\'></select>")
                                .appendTo( $(column.footer()).empty());
                                var strength_hidden = document.getElementById("strength_hidden").value;
                                select.append(strength_hidden);
                        }
                        else if(column.index() == 6){
                             var select = $("<select id=\'dose_search\'></select>")
                                .appendTo( $(column.footer()).empty());
                                var dose_hidden = document.getElementById("dose_hidden").value;
                                select.append(dose_hidden);
                        }
                    });
                }
            });

这里有很多html要粘贴，所以我创建了一个jsfiddle：http://jsfiddle.net/q715LncL/12/

如果您转到jsfiddle并在空文本字段中键入内容，则转到搜索框并尝试根据您键入的内容进行过滤，始终不返回任何结果。如何让它过滤对实时输入所做的更改？

Answer 1

您需要添加一个自定义过滤器函数来检查输入框的值，DataTables将HTML转换为字符串，您无法从中恢复实时值，因此您必须执行以下操作：

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      var searchTerm = $('.dataTables_filter input').val();
      var $row = $('.dataTable tbody tr').eq(dataIndex);

      if(!searchTerm) {
        return true;
      }

      return $row.find('td input').filter(function() {
        return ~$(this).val().toLowerCase().indexOf(searchTerm.toLowerCase())
      }).size();
    }
);

http://jsfiddle.net/q715LncL/14/

Answer 2

<强>解

您可以使用columnDefs在targets选项和render中使用从零开始的索引来定位特定列，以便在搜索（type === 'filter'）或排序期间返回所选值（ type === 'order'）。

columnDefs: [
   { 
      targets: [0,1,2,3,4,5,6], 
      render: function(data, type, full, meta){
         if(type === 'filter' || type === 'sort'){
            var api = new $.fn.dataTable.Api(meta.settings);
            var td = api.cell({row: meta.row, column: meta.col}).node();
            data = $('select, input', td).val();
         }

         return data;
      }
   }
]

如果数据发生变化，您还需要使单元数据无效，如下所示（根据this solution）。

$('tbody select, tbody input', table.table().node()).on('change', function(){
     table.row($(this).closest('tr')).invalidate();
});

<强>样本

请参阅this jsFiddle以获取代码和演示。

备注

由于不存在的元素，我评论了导致JavaScript错误的代码。

在输入中搜索并选择

2 个答案: