DataTables columnFilter number-range filtering

时间:2015-06-26 12:58:12

标签: php sql filter datatables datatables-1.10

我有数据库,其中列"BIRTH_DATE"中有日期(例如2015-06-26)。我使用DataTables来显示用户的信息。我想进行数字范围搜索。但是,当我使用DataTables插件ColumnFilter并尝试使用number-range类型过滤器时,它不起作用。

只要我输入fromto字段的任何值,它就会告诉我没有结果。但是如果在同一列中有一行写有日期,就像20150626过滤器显示它一样。所以据我所知,问题在于我的数字中间的符号-。如何使过滤器忽略-符号?

数字范围过滤器代码:

function fnCreateCharRangeInput() {

        th.html(_fnRangeLabelPart(0));
        var sFromId = sTableId + 'range_from_' + i;
        var from = $('<input type="text" class="number_range_filter" id="' + sFromId + '" rel="' + i + '"/>');
        th.append(from);
        th.append(_fnRangeLabelPart(1));
        var sToId = sTableId + 'range_to_' + i;
        var to = $('<input type="text" class="number_range_filter" id="' + sToId + '" rel="' + i + '"/>');
        th.append(to);
        th.append(_fnRangeLabelPart(2));
        th.wrapInner('<span class="filterColumn filter_number_range" />');
        var index = i;
        aiCustomSearch_Indexes.push(i);



        //------------start range filtering function


        /*  Custom filtering function which will filter data in column four between two values
        *   Author:     Allan Jardine, Modified by Jovan Popovic
        */
        $.fn.dataTableExt.afnFiltering.push(
            function (oSettings, aData, iDataIndex) {
                var iMin = document.getElementById(sFromId).value * 1;
                var iMax = document.getElementById(sToId).value * 1;
                var iValue = aData[index] == "-" ? 0 : aData[index] * 1;
                if (iMin == "" && iMax == "") {
                    return true;
                }
                else if (iMin == "" && iValue < iMax) {
                    return true;
                }
                else if (iMin < iValue && "" == iMax) {
                    return true;
                }
                else if (iMin < iValue && iValue < iMax) {
                    return true;
                }
                return false;
            }
        );
        //------------end range filtering function



        $('#' + sFromId + ',#' + sToId, th).keyup(function () {

            var iMin = document.getElementById(sFromId).value * 1;
            var iMax = document.getElementById(sToId).value * 1;
            if (iMin != 0 && iMax != 0 && iMin > iMax)
                return;

            oTable.fnDraw();

        });


    }

编辑:2015-06-29

也许有人可以帮助我使这个过滤器忽略输入格式只需运行简单的操作,例如:

Select * from table where BIRTH_DATE between '2010' and '2011-12'

因为这样的查询在sql中工作正常。

4 个答案:

答案 0 :(得分:3)

我也遇到了这个问题:

可能有两个原因:

1) iMiniMaxiValue的值必须在     秒表示number of milliseconds since 1970/01/01检查     这getTime()

<强>例如

var iMin = document.getElementById(sFromId).value

因为比较(iMin == "" && iValue < iMax)你使用算术运算符(=,<,>)所以这三个变量的值必须是数字。

2)请先确认一下:我猜您的日期格式是这样的2015-06-26您必须将日期转换为此格式2015/06/26才能生效。不确定为什么,但在某些情况下,jquery不接受1970-01-011970/01/01完美无缺。

查看我的功能

$.fn.dataTableExt.afnFiltering.push(
      function(oSettings, aData, iDataIndex) {
        if(chart.XminDate != '' && chart.XmaxDate !=  ''){
            minDateFilter = new Date( chart.XminDate.replace(/\-/g,'/') ).getTime();
            maxDateFilter = new Date( chart.XmaxDate.replace(/\-/g,'/') ).getTime();
            aData._date = new Date( aData[3].replace(/\-/g,'/') ).getTime();
            if (minDateFilter) {
                if (aData._date < minDateFilter) {
                    return false;
                }
            }
            if (maxDateFilter) {
                if (aData._date > maxDateFilter) {
                    return false;
                }
            }
            return true;
        }
        return true;
      }
    );

在我的功能中

 var iMin = document.getElementById(sFromId).value * 1; /*same as chart.XminDate */
 var iMax = document.getElementById(sToId).value * 1; /*same as chart.XmaxDate */
 var iValue = aData[index] == "-" ? 0 : aData[index] * 1; /*same as aData._date */

在这一行

 minDateFilter = new Date( chart.XminDate.replace(/\-/g,'/') ).getTime();

在我创建了一个日期对象之后,我已将-替换为/,然后我使用了getTime()函数来获取number of milliseconds since 1970/01/01

所以我猜(因为我不知道你的HTML )这会对你有帮助。

答案 1 :(得分:1)

您的专栏BIRTH_DATE的类型是什么?

我的建议是将其设为datetime(看起来像2015-06-26 16:10:18.820,但也可能没有精确的小时)。
如果您将列类型设置为datatime,数据表可以按date排序。

有关DataTables https://datatables.net/reference/option/columns.type

中column.type的详细说明,请参阅此处

答案 2 :(得分:0)

而不是number-range尝试date-rangeSee example here

答案 3 :(得分:0)

首先,在您的数据库中运行更新,如果需要,删除birth_date列中的“ - ”。

其次,在插入之前在数据库中创建一个触发器,将BIRTH_DATE varchar格式化为所需的格式。

然后,您就可以使用number_range中的初始datatable搜索进行过滤。

但是,就像Mazet所说,最好使用datetime来获得最佳查询性能。如果无法做到这一点,那么您可以快速解决上述问题。