jquery datatable不适用于ajax

时间:2017-07-02 14:26:56

标签: javascript jquery ajax datatables

我使用JQuery DataTable。我创建了一个函数,从ajax成功的spring Controller发送数据到datatable。现在一切都很好,现在我想添加一个日期范围过滤器,它适用于表的默认内容但问题是当内容时该表随着ajax函数的变化而变化,日期范围过滤器仍然是默认内容的过滤器。

这是日期范围过滤器

$(document).ready(function(){
    $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        var min = $('#date_added').datepicker("getDate");
        var max = $('#date_modified').datepicker("getDate");

        var d = data[2].split("/");
        var startDate = new Date(d[0]+ "/" +  d[1] +"/" + d[2]);            


        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;
    }
    );


        $("#date_added").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
        $("#date_modified").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
        var table = $('#datatable').DataTable();

        // Event listener to the two range filtering inputs to redraw on input
        $('#date_added, #date_modified').change(function () {
             var table = $('#datatable').DataTable();
            table.draw();
        });


    });

这是ajax函数

$.ajax({
    type : "GET",
    contentType : "application/json",
    url : "http://localhost:8081/BackEndFinalVersion/listCourriersArrivés",
    data: { get_param: 'value' },
    dataType : 'json',
    timeout : 100000,
    success :function(data) { 
        trHTML = '';
        $('input[type=radio][name=radioInline]').change(function() {

            if (data == null) {
                  alert("No records"+data);
                   //trHTML = '<tr><td>'No Records to be show'</td></tr>';
                } else if(this.value == 'option2'){
                  $.each(data, function(i, item) {
                        $("body").on("click", "#datatable tr", function () {

                            window.location ="/Pro/mail_detail?id="+item.idCourrier;    
                            });

                    trHTML += '<tr><td>' + item.expéditeur + '</td><td>' + item.société + '</td><td>' + item.date + '</td><td>' + item.objet + '</td></tr>';


                  });
                  $('#datatable tbody tr').remove();

                  $('#datatable tbody').append(trHTML);
                }

            trHTML = '';
    }) 
    },      



    error : function(e) {
        console.log("ERROR: ", e);
        alert(e);
    },

});

});

0 个答案:

没有答案