修改数据表(日期范围过滤器)

时间:2017-01-12 13:42:19

标签: jquery datatables

我在dataTables中编写了自定义过滤器的代码。它需要FromTo个日期,并根据这两个值过滤表格中的数据。它按预期工作。
代码:https://jsfiddle.net/4w1552jp/10/
javascript code:

/*$('#data').dataTable();*/
        $(function() {
            $('#minDate').datepicker();
            $('#maxDate').datepicker();
        });
        // Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812
        /*function parseDateValue(rawDate) {
            var dateArray = rawDate.split("/");
            var parsedDate = dateArray[2] + dateArray[0] + dateArray[1];
            return parsedDate;
        }*/
        $.fn.dataTableExt.afnFiltering.push(
          function(oSettings, aData, iDataIndex) {
            var iFini = ~~moment($('#minDate').val(), "DD/MM/YYYY").format("X");
            var iFfin = ~~moment($('#maxDate').val(), "DD/MM/YYYY").format("X");
            var evalDate = ~~moment(aData[4], "YYYY/MM/DD").format("X");
            if (evalDate >= iFini && evalDate <= iFfin) {
              return true;
            } else {
              return false;
            }
          }
        );
        $(document).ready(function() {
            var table = $('#data').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ]
            });

            // Event listener to the two range filtering inputs to redraw on input
            $('#minDate, #maxDate').keyup(function() {
                table.draw();
            });
        });  

全屏结果显示在:http://jsfiddle.net/4w1552jp/10/show/
在该页面的底部,您可以看到div data_info,其中包含有关数据表显示的数据的信息...

<div id="data_info" class="dataTables_info" role="status" aria-live="polite">Showing 1 to 10 of 26 entries (filtered from 58 total entries)</div>  

现在显示如下:Showing 1 to 10 of 26 entries (filtered from 58 total entries)
我希望它显示为Showing 1 to 10 of 26 entries,无论有多少数据日期范围过滤器过滤器(来自我的客户端的奇怪请求),但过滤器应该按原样运行。如何以编程方式编辑data-info div中的信息?

2 个答案:

答案 0 :(得分:1)

嗯,这是一种黑客攻击或解决方法,但它可以满足您的需求。

为该div id添加onchange侦听器,并仅使用字符串(已过滤

在您的文档就绪功能中......

$("data_info").on("change",function(){
  var oldHTML = $("data_info").html();
  var newHTML = oldHTML.substring(0,oldHTML.indexOf("(filtered") - 1);
  $("data_info").html(newHTML);
});

这将从字符串的开头开始,并使用所有字符,直到的索引(已过滤

答案 1 :(得分:0)

要编辑,请使用dataTable语言扩展名。在构造函数中添加此行。

        "language": {
            "infoFiltered": ""
          },

Source