CODEWITHSUNDEEP
jquerydatatables
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Modifying data tables (date range filter)

I wrote a code for custom filter in dataTables. It takes From and To dates and filters the data in tables based on those 2 values. It is working as expected.
Code: 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();
            });
        });

Full screen result is in: http://jsfiddle.net/4w1552jp/10/show/
In bottom of that page, you can see a div data_info which contains information about how much data data tables is displaying...

<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>

It is showing like this now: Showing 1 to 10 of 26 entries (filtered from 58 total entries)
I want it to be shown as Showing 1 to 10 of 26 entries regardless of how much data date range filter filters (A strange request from my client), but filter should work as it is. How can I edit information in data-info div programatically?

Upvotes: 0

Views: 156

Answers (2)

Yigit Yuksel
Yigit Yuksel

Reputation: 1170

In order to edit, use dataTable language extension. Add this line on your constructor.

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

Source

Upvotes: 0

TheValyreanGroup
TheValyreanGroup

Reputation: 3599

Well, this is kind of a hack or work-around, but it will work for your needs.

Add an onchange listener to that div id and only use the string up to the word (filtered.

In your document ready function...

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

This will start at the beginning of the string, and use all characters up to the index of (filtered.

Upvotes: 1

Related Questions