Javascript datatable上的daterangepicker插件。无法排序和搜索

我的问题是关于Datatable上的Daterangepicker

我发现有人集成了一个解决方案，实际上效果很好

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

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

我不是很擅长JS，这就是为什么我需要你的帮助

下面是我想做的一个例子：

JS:

请帮忙

谢谢大家，对不起我的英语不好

只需添加此功能即可

$.fn.dataTableExt.afnFiltering.push

进入

$'reportrange'。在'apply.daterangepicker'上，函数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();
            });
        });

…你需要改变

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

到

因为aData[列号]

这里是

只需添加此函数即可

$.fn.dataTableExt.afnFiltering.push

进入

$'reportrange'。在'apply.daterangepicker'上，函数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();
            });
        });

…你需要改变

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

到

因为aData[列号]

---

这里是

它有效！非常感谢！现在我想让事情稍微复杂一点。请看下面我的新答案！您好！我发现了另一个问题。组合两列筛选日期似乎不起作用…请看我的新问题它有效！非常感谢！现在我想让事情稍微复杂一点。请看下面我的新答案！您好！我发现了另一个问题。组合两列筛选日期似乎不起作用…请参见我的新问题

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