$.fn.dataTable.ext.search.push 不工作

Question

我有关于使用日期范围选择器进行自定义搜索的代码。

但是当我使用alert执行此代码时， $.fn.dataTable.ext.search.push一部分不会执行

$('.input-daterange-datepicker').on('apply.daterangepicker', function(ev, picker) {
    var start = picker.startDate;
    var end = picker.endDate;

    alert(start); //Can display

    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            alert('hahahahahaah'); //Can't display
            console.log(settings.nTable.id);
            if ( settings.nTable.id !== 'donatur' ) {
                return true;
            }
            var min = start;
            var max = end;
            var startDate = new Date(data[0]);
            alert(startDate);
            if (min == null && max == null) {
                return true;
            }
            if (min == null && startDate <= max) {
                return true;
            }
            if (max == null && startDate >= min) {
                return true;
            }
            if (startDate <= max && startDate >= min) {
                return true;
            }
            return false;
        }
    );
    donatur.draw();
    $.fn.dataTable.ext.search.pop();
});

var donatur = $("#donatur").DataTable({
            "ajaxSource": base_url+"admin/getDonaturFundraiser/"+parameter,
            "columns": [
                { "data": "tanggal_ambil" },
                { "data": "id" },
                { "data": "nama" },
                { "data": "jenis" },
                { "data": "donasi" },
                { "data": "tanggal" },
                { data: null, render: function ( data, type, row ) {
                    return '<button type="button" data-id="'+data.id+'" data-nama="'+data.nama+'" data-jenis="'+data.jenis+'" data-donasi="'+data.donasi+'" class="btn btn-primary" data-toggle="modal" data-target="#modalDonatur"><i class="fa fa-pencil"></i></button> | <button class="btn btn-danger sa-warning" id="'+data.id+'"><i class="fa fa-trash"></i></button>'
                } }
            ]
        });

我的代码参考带有日期范围的过滤数据表

Answer 1

您是否包含了外部依赖项？ 例如，请参阅此链接： https : //jsfiddle.net/ankepv5v/79/

HTML代码：

<body>

  <div id="reportrange" class="btn btn-success btn-lg">

    <span></span> <b class="caret"></b>
  </div>
  <hr>
  <br>
  <table id="example" class="table table-striped" cellspacing="0" width="100%"></table>

</body>

Javascript代码：

$(document).ready(function() {

  $(function() {
    var start = moment("2017-01-01 12:34:16");
    var end = moment("2018-03-03 10:08:07");

    function cb(start, end) {
      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
      startDate: start,
      endDate: end,
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      }
    }, cb);

    cb(start, end);

  });


  $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
   var start = picker.startDate;
   var end = picker.endDate;


  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = start;
      var max = end;
      var startDate = new Date(data[1]);

      if (min == null && max == null) {
        return true;
      }
      if (min == null && startDate <= max) {
        return true;
      }
      if (max == null && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );
  table.draw();
  $.fn.dataTable.ext.search.pop();
});

  var dataSet = [
    ['2093',
      'Feb 23, 2018',
      'asd asd ',
      'asd@hotmail.com',
      '£ 50',
      '£0.00',
      "Feb 23, 2019",
    ],
    ['2092',
      'Feb 23, 2018',
      'asddd asddd',
      'dddd@hotmail.com',
      '£ 50',
      '£0.00',
      "Feb 23, 2019",
    ],
    ['2050',
      'Feb 20, 2018',
      'Angus Fret',
      'angus@fgf.co.uk',
      '£ 50',
      '£0.00',
      "Feb 20, 2019",
    ],
    ['2048',
      'Feb 19, 2018',
      'John Smith',
      'john@smith.com',
      '£ 50',
      '£0.00',
      "Feb 19, 2019",
    ],

    ['2046',
      'Feb 19, 2018',
      'Ana Ana',
      'ana@talktalk.net',
      '£ 50',
      '£0.00',
      "Feb 19, 2019",
    ],
    ['2045',
      'Feb 19, 2018',
      'Ray N',
      'rayn@nn.com',
      '£ 50',
      '£0.00',
      "Feb 19, 2019",
    ],
    ['2044',
      'Feb 16, 2018',
      'Paul  N',
      'paul@gmail.com',
      '£ 200',
      '£0.00',
      "Feb 16, 2019",
    ],
    ['2042',
      'Feb 13, 2018',
      'Bradley New',
      'new-marden@hotmail.com',
      '£ 100',
      '£0.00',
      "Feb 13, 2019",
    ],

    ['2012',
      'Jan 27, 2018',
      'Mark Zuckenberg',
      'markzeg@me.com',
      '£ 150',
      '£0.00',
      "Jan 27, 2019",
    ],

  ];
  var table = $('#example').DataTable({
    "order": [
      [0, "desc"]
    ],
    lengthChange: false,
    data: dataSet,
    columns: [{
        title: "ORDER ID"
      },
      {
        title: "ORDER DATE"
      },
      {
        title: "PURCHASED BY"
      },
      {
        title: "RECIPIENT"
      },
      {
        title: "ORDER TOTAL"
      },
      {
        title: "VAT"
      },
      {
        title: "EXPIRY"
      }

    ]
  });






});

在 JsFiddle 页面的左侧，有“资源”。 单击资源以查看外部 javascript 依赖项。 您可以在下图中看到它们：

请再次测试您的解决方案，右键单击页面并选择“检查”。 转到“控制台”选项卡，查看是否存在 Javascript 问题。 https://developers.google.com/web/tools/chrome-devtools/javascript

第二个解决方案

试试下面的代码：

$.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            alert('hahahahahaah'); //Can't display
            console.log(settings.nTable.id);
            if ( settings.nTable.id !== 'donatur' ) {
                return true;
            }
            var min = start;
            var max = end;
            var startDate = new Date(data[0]);
            alert(startDate);
            if (min == null && max == null) {
                return true;
            }
            if (min == null && startDate <= max) {
                return true;
            }
            if (max == null && startDate >= min) {
                return true;
            }
            if (startDate <= max && startDate >= min) {
                return true;
            }
            return false;
        }
    );

$('.input-daterange-datepicker').on('apply.daterangepicker', function(ev, picker) {
    var start = picker.startDate;
    var end = picker.endDate;

    alert(start); //Can display
    donatur.draw();
    $.fn.dataTable.ext.search.pop();
});

$.fn.dataTable.ext.search.push 不工作

问题描述

1 个解决方案

解决方案1
0 2020-01-07 09:34:58

$.fn.dataTable.ext.search.push 不工作

问题描述

1 个解决方案

解决方案1 0 2020-01-07 09:34:58

解决方案1
0 2020-01-07 09:34:58