Jquery 数据表在列中查找范围编号

Question

我有一个包含五列的表格：A - B - C - D - E

每列都有自己的过滤器。

A、B、C 和 E 列过滤器工作正常。 A、B、C 有一个简单的输入文本搜索，E 有一个在两个值之间搜索的选择类型。

问题出在D柱上。 D 是一列仅包含数字的列，搜索规则是：查找所有等于或主要搜索输入的值。

如何构建该过滤器？

这是我的示例代码：

  $('#reportstock thead tr').clone(true).appendTo('#reportstock thead');
  $('#reportstock thead tr:eq(1) th.input').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" class=\"form-control\" id="column_' + $(this).text() + '" placeholder=" cerca in ' + title.toLowerCase() + '" />');
                $('input', this).on('keyup change', function () {
                    if ($(this).attr("id") != "column_D") {
                        if (table.column(i).search() !== this.value) {
                            table.column(i)
                                .search(this.value)
                                .draw();
                        }
                    }
                    else {
                        //??? find all values equal or major of search input.
                    }
            });
    });

Answer 1

试试这个

 if ($(this).attr("id") != "column_D") {
    if (table.column(i).search() !== this.value) {
        table.column(i)
            .search(this.value)
            .draw();
    }
 }
 else {
      table.column(i).search() >= this.value ) {
      table.column(i)
         .search(this.value)
         .draw();
}

Answer 2

对于可能和我有同样问题的后人，我最终决定解决这个问题：

$('#reportstock thead tr').clone(true).appendTo('#reportstock thead');
  $('#reportstock thead tr:eq(1) th.input').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" class=\"form-control\" id="column_' + $(this).text() + '" placeholder=" cerca in ' + title.toLowerCase() + '" />');
                $('input', this).on('keyup change', function () {
                    if ($(this).attr("id") != "column_D") {
                        if (table.column(i).search() !== this.value) {
                            table.column(i)
                                .search(this.value)
                                .draw();
                        }
                    }
                    else {
    table.draw();
    }
            });
    });

    
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var min = parseInt($('#column_D').val(), 10);
                    var stock = parseFloat(data[3]) || 0;
                    if (isNaN(min) || (min <= stock))
                        return true;
    
                    return false;
                }
            );

这可能不是最优雅的解决方案，但它确实有效！

Answer 3

我将它与两个输入数字一起使用，其中 minVal 和 maxVal 定义范围。

function FilterInRange(minVal, maxVal) {

    $.fn.dataTable.ext.search.pop();

    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var columnValue = parseFloat(data[4]) || 0; // Change "4" by your column
            return (columnValue >= minVal && columnValue <= maxVal);
        }
    );

    table.draw(); // Replace table with your own table
}

这对我有用。