web-dev-qa-db-fra.com

Comment filtrer la plage de dates dans DataTables?

J'ai un grand dataTable qui contient des informations sur le trajet. Chaque ligne a une heure de début et une heure de fin du format suivant (aaaa-mm-jj HH: mm: ss). Comment utiliser un pointpicker pour définir une plage de filtres dans dataTables? Je veux avoir un sélecteur de date qui sélectionne seulement un jour et non l'heure. J'ai cherché partout la bonne réponse mais je ne l'ai pas trouvée. Merci d'avance pour votre aide.

Par exemple, je veux voir toutes les lignes de juillet en sélectionnant (01-07-2016 - 31-07-2016).

javascriptdatetimefilterdatatables
9
Novy

Voici DataTable with Single DatePicker as "from" Date Filter

LiveDemo

Voici DataTable avec deux DatePickers pour le filtre DateRange (To et From)

LiveDemo

22
mmushtaq

Voici ma solution, regroupée à partir de l'exemple de filtre de plage dans le fichier datatables docs et laisser moment.js effectuer le sale travail de comparaison des dates. 

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

Moment d'installation: 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 Ici

Remarques

  • L'utilisation de moment permet de découpler la logique de comparaison des dates et facilite le travail avec différents formats. Dans mon tableau, j'ai utilisé yyyy-mm-dd, mais vous pouvez aussi utiliser mm/dd/yyyy. Assurez-vous de faire référence à docs du moment lorsque vous analysez d'autres formats , car vous devrez peut-être modifier la méthode que vous utilisez.
4
CJ Edgerton

Après on fonctionne bien avec des moments js 2.10 et plus

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

Suivez le lien ci-dessous et configurez-le selon vos besoins. Daterangepicker le fait pour vous, très facilement. :) 

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

1
user5686312

Voici ma solution, il n'y a aucun moyen d'utiliser momemt.js.Here est DataTable avec deux DatePickers pour le filtre DateRange (To et From).

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