Question

我的问题是关于Datatable的Daterangepicker。

我找到了一个整合解决方案的人，实际上它工作正常。

http://webdevgirl.co.za/

不幸的是，当页面初始化时，搜索和排序不起作用。

但是当您使用输入daterangepicker执行搜索然后您想要排序或搜索时：它可以工作!!

我对JS并不擅长，这就是我需要你帮助的原因！

以下是我想要做的事例：

https://jsfiddle.net/5qknp86r/

JS：

        $(document).ready(function() {
    //DATATABLE
    //To display datatable without search and page length select, and to still have pagination work, instantiate like so
    var oTable=$('#table_id').dataTable({

        //"sDom":"tp",
        "pageLength": 10,
        "pagination":true,
            // Date Sorting
        columnDefs: [
           { type: 'date-eu', targets: 1}
         ],
     //// order table onload
"order": [[ 1, 'desc' ]],
    });
//DATE RANGE
//set global vars that are set by daterange picker, to be used by datatable
var startdate;
var enddate;
//instantiate datepicker and choose your format of the dates
$('#reportrange').daterangepicker({
        ranges: {
           "Aujourd'hui": [moment(), moment()],
           'Hier': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Les 7 derniers jours': [moment().subtract(6, 'days'), moment()],
           'Les 30 derniers jours': [moment().subtract(29, 'days'), moment()],
           'Ce mois-ci': [moment().startOf('month'), moment().endOf('month')],
           'Le mois dernier': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
,
    "opens": "right",
    format: 'DD/MM/YYYY'

},
function(start, end,label) {
// Parse it to a moment
var s = moment(start.toISOString());
var e = moment(end.toISOString());
startdate = s.format("YYYY-MM-DD");
enddate = e.format("YYYY-MM-DD");
});
//Filter the datatable on the datepicker apply event
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
startdate=picker.startDate.format('YYYY-MM-DD');
enddate=picker.endDate.format('YYYY-MM-DD');
oTable.fnDraw();
});

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if(startdate!=undefined){
// 0 here is the column where my dates are.
//Convert to YYYY-MM-DD format from DD/MM/YYYY
var coldate = aData[1].split("/");
var d = new Date(coldate[2], coldate[1]-1 , coldate[0]);
var date = moment(d.toISOString());
date =    date.format("YYYY-MM-DD");

//Remove hyphens from dates
dateMin=startdate.replace(/-/g, "");
dateMax=enddate.replace(/-/g, "");
date=date.replace(/-/g, "");

//console.log(dateMin, dateMax, date);

// run through cases to filter results
if ( dateMin == "" && date <= dateMax){
return true;
}
else if ( dateMin =="" && date <= dateMax ){
return true;
}
else if ( dateMin <= date && "" == dateMax ){
return true;
}
else if ( dateMin <= date && date <= dateMax ){
return true;
}

// all failed
return false;
}
}
);


} );

请帮忙！

谢谢大家（抱歉我的英语不好）

Answer 1

只需添加此功能

即可

$。fn.dataTableExt.afnFiltering.push（...

进入

$（＆＃39; #reportsrange＆＃39;）。on（＆＃39; apply.daterangepicker＆＃39;，function（ev，picker）{...

像这样：

$(document).ready(function () {
            //DATATABLE
            //To display datatable without search and page length select, and to still have pagination work, instantiate like so
            var oTable = $('#table_id').dataTable({
                //"sDom":"tp",
                "pageLength": 10,
                "pagination": true,
                // Date Sorting
                columnDefs: [
                   { type: 'date-eu', targets: 1 }
                ],
                //// order table onload
                "order": [[1, 'desc']],
            });
            //DATE RANGE
            //set global vars that are set by daterange picker, to be used by datatable
            var startdate;
            var enddate;
            //instantiate datepicker and choose your format of the dates
            $('#reportrange').daterangepicker({
                ranges: {
                    "Aujourd'hui": [moment(), moment()],
                    'Hier': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Les 7 derniers jours': [moment().subtract(6, 'days'), moment()],
                    'Les 30 derniers jours': [moment().subtract(29, 'days'), moment()],
                    'Ce mois-ci': [moment().startOf('month'), moment().endOf('month')],
                    'Le mois dernier': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            ,
                "opens": "right",
                format: 'DD/MM/YYYY'

            },
            function (start, end, label) {
                // Parse it to a moment
                var s = moment(start.toISOString());
                var e = moment(end.toISOString());
                startdate = s.format("YYYY-MM-DD");
                enddate = e.format("YYYY-MM-DD");
            });
            //Filter the datatable on the datepicker apply event
            $('#reportrange').on('apply.daterangepicker', function (ev, picker) {
                startdate = picker.startDate.format('YYYY-MM-DD');
                enddate = picker.endDate.format('YYYY-MM-DD');
                $.fn.dataTableExt.afnFiltering.push(
                function (oSettings, aData, iDataIndex) {
                    if (startdate != undefined) {
                        // 0 here is the column where my dates are.
                        //Convert to YYYY-MM-DD format from DD/MM/YYYY
                        var coldate = aData[1].split("/");
                        var d = new Date(coldate[2], coldate[1] - 1, coldate[0]);
                        var date = moment(d.toISOString());
                        date = date.format("YYYY-MM-DD");

                        //Remove hyphens from dates
                        dateMin = startdate.replace(/-/g, "");
                        dateMax = enddate.replace(/-/g, "");
                        date = date.replace(/-/g, "");

                        //console.log(dateMin, dateMax, date);

                        // run through cases to filter results
                        if (dateMin == "" && date <= dateMax) {
                            return true;
                        }
                        else if (dateMin == "" && date <= dateMax) {
                            return true;
                        }
                        else if (dateMin <= date && "" == dateMax) {
                            return true;
                        }
                        else if (dateMin <= date && date <= dateMax) {
                            return true;
                        }

                        // all failed
                        return false;
                    }
                }
                );

                oTable.fnDraw();
            });
        });

这是 JsFiddle （我希望这是你想要的）

更新 - 第二个问题：

对于您的第二个问题，

中的aData错误

$('#reportrange2').on('apply.daterangepicker', function(ev, picker) {...

......你需要改变

var coldate = aData[1].split("/");

到

var coldate = aData[6].split("/");

因为aData[columnNumber]。

此处JSFiddle

daterangepicker插件数据表。无法排序和搜索

1 个答案:

更新 - 第二个问题：