在输入中搜索并选择

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 错误的代码。