webentwicklung-frage-antwort-db.com.de

Wie kann ich den Datumsbereich in DataTables filtern?

Ich habe eine große Datentabelle, die Fahrinformationen enthält. Jede Zeile hat eine Anfangszeit und eine Endzeit im folgenden Format (JJJJ-MM-TT HH: MM: SS). Wie kann ich einen Datepicker verwenden, um einen Filterbereich in dataTables festzulegen? Ich möchte einen Datepicker, der nur einen Tag und nicht die Uhrzeit auswählt. Ich habe überall nach der richtigen Antwort gesucht, konnte sie aber nicht finden. Vielen Dank im Voraus für Ihre Hilfe.

Zum Beispiel möchte ich alle Zeilen von Juli anzeigen, indem Sie (01-07-2016 - 31-07-2016) auswählen.

9
Novy

Hier ist DataTablemit Single DatePickerals "from" Datumsfilter

LiveDemo

Hier ist DataTablemit Two DatePickersfür DateRange (To and From) Filter

LiveDemo

22
mmushtaq

Hier ist meine Lösung, zusammengebaut aus dem Bereichsfilter-Beispiel in den datatables docs , und lassen Sie moment.js die schmutzige Arbeit des Datumsvergleichs durchführen. 

HTML

<input 
    type="text" 
    id="min-date"
    class="date-range-filter"
    placeholder="From: yyyy-mm-dd">

<input 
    type="text" 
    id="max-date" 
    class="date-range-filter"
    placeholder="To: yyyy-mm-dd">

<table id="my-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Created At</th>
        </tr>
    </thead>
</table>

JS

Installationszeitpunkt: npm install moment

// Assign moment to global namespace
window.moment = require('moment');

// Set up your table
table = $('#my-table').DataTable({
    // ... do your thing here.
});

// Extend dataTables search
$.fn.dataTable.ext.search.Push(
    function( settings, data, dataIndex ) {
        var min  = $('#min-date').val();
        var max  = $('#max-date').val();
        var createdAt = data[2] || 0; // Our date column in the table

        if  ( 
                ( min == "" || max == "" )
                || 
                ( moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max) ) 
            )
        {
            return true;
        }
        return false;
    }
);

// Re-draw the table when the a date range filter changes
$('.date-range-filter').change( function() {
    table.draw();
} );

JSFiddle Here

Anmerkungen

  • Durch die Verwendung des Moments wird die Datumsvergleichslogik entkoppelt und die Verwendung verschiedener Formate vereinfacht. In meiner Tabelle habe ich yyyy-mm-dd verwendet, aber Sie könnten auch mm/dd/yyyy verwenden. Stellen Sie sicher, dass Sie die Dokumente von moment referenzieren, wenn Sie andere Formate analysieren , da Sie möglicherweise ändern müssen, welche Methode Sie verwenden.
4
CJ Edgerton

Das folgende funktioniert gut mit Momenten js 2.10 und höher

$.fn.dataTableExt.afnFiltering.Push(
        function( settings, data, dataIndex ) {
            var min  = $('#min-date').val()
            var max  = $('#max-date').val()
            var createdAt = data[0] || 0; // Our date column in the table
            //createdAt=createdAt.split(" ");
            var startDate   = moment(min, "DD/MM/YYYY");
            var endDate     = moment(max, "DD/MM/YYYY");
            var diffDate = moment(createdAt, "DD/MM/YYYY");
            //console.log(startDate);
            if (
              (min == "" || max == "") ||
              (diffDate.isBetween(startDate, endDate))


            ) {  return true;  }
            return false;

        }
    );
1
Jothi Kannan

 $.fn.dataTable.ext.search.Push(
    function (settings, data, dataIndex) {
        var FilterStart = $('#filter_From').val();
        var FilterEnd = $('#filter_To').val();
        var DataTableStart = data[4].trim();
        var DataTableEnd = data[5].trim();
        if (FilterStart == '' || FilterEnd == '') {
            return true;
        }
        if (DataTableStart >= FilterStart && DataTableEnd <= FilterEnd)
        {
            return true;
        }
        else {
            return false;
        }
        
    });
    --------------------------
 $('#filter_From').change(function (e) {
        Table.draw();

    });
    $('#filter_To').change(function (e) {
          Table.draw();

    });

1
FarhadRahimi

Folgen Sie dem Link unten und konfigurieren Sie ihn entsprechend Ihren Anforderungen. Daterangepicker erledigt das für Sie ganz einfach. :) 

http://www.daterangepicker.com/#ex1

1
user5686312

Hier ist meine Lösung, es gibt keine Möglichkeit, momemt.js zu verwenden. Hier ist DataTable mit zwei DatePickers für den DateRange (An und Von) Filter.

       $.fn.dataTable.ext.search.Push(
          function (settings, data, dataIndex) {
        var min = $('#min').datepicker("getDate");
        var max = $('#max').datepicker("getDate");
        var startDate = new Date(data[4]);
        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;
    }
0
Jomal Johny