Datentabellen-Filterung mit Dropdown-Liste

Question

Ich bin mit jQuery DataTables- und ich möchte die Datentabelle mit Drop-Down-Liste filtern basierend auf

Gestern

Letzte 7 Tage

letzten 15 Tage

30 Tage

Last

Die Filterung soll wie folgt ist kein 3. Der Inhalt der Tabelle auf dem Staatszeitspalt dh Spalte basieren:

Host Name  Severity  State Time   

localhost  Warning  2017-02-10 10:19:38 

localhost  Warning  2017-02-18 15:59:24 

localhost  critical  2017-02-25 02:29:34 

localhost  critical  2017-02-27 15:57:24 

localhost  Warning  2017-02-27 09:20:15 

localhost  critical  2017-03-16 03:30:50 

localhost  ok   2017-03-17 09:20:35 

localhost  ok   2017-03-17 10:20:47 

JS-Code:

criticalEventTableList1 = $('#example2').dataTable({ 
    data: historyEventList.seriesCriticalEventList1, 
     "paging":   false, 


     dom: 'Bfrtip', 
     buttons: [ 
       'csv', 'excel' 
      ], 
      "iDisplayLength": 10, 
      "bFilter": true, 

     "paging":   true, 
      "responsive": true, 

     "createdRow": function(row, data, index ) { 
       if (data[2] == "1") 
       { 
        $('td', row).eq(2).css('background-color', '#FFC300','font-weight', 'bold'); 
        $('td:eq(2)', row).html('<b>Warning</b>'); 
       } 
       else if (data[2] == "2") 
       { 
        $('td', row).eq(2).css('background-color', '#F13B3B','font-weight', 'bold'); 
        $('td:eq(2)', row).html('<b>Critical</b>'); 
       } 
     }, 
}); 

HTML-Code:

<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Select 
<span class="caret"></span></button> 
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" id="" >Yesterdays</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" id="" >Last 7 Days</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" id="" >Last 15 Days</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" id="" >Last 1 Month</a></li> 
</ul> 

Answer 1

HTML:

<table cellspacing="5" cellpadding="5" border="0"> 
    <tbody><tr> 
    <td> 
     <select id="dateFilter"> 
     <option value="NULL">Select</option> 
     <option value="7D">Last 7</option> 
     <option value="15D">Last 15</option> 
     <option value="1M">Last 1 Month</option>     
     </select> 
    </td> 
    </tr>  
    </tbody></table><table id="example" class="display" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
    <th>1</th> 
    <th>2</th> 
    <th>3</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
    <th>1</th> 
    <th>2</th> 
    <th>3</th> 
    </tr> 
</tfoot> 
<tbody> 

    <tr><td>localhost</td> <td>Warning</td> <td>2017-02-10 10:19:38</td></tr> 

    <tr><td>localhost</td> <td>Warning</td> <td>2017-02-18 15:59:24</td></tr> 

    <tr><td>localhost</td> <td>critical</td> <td>2017-02-25 02:29:34</td></tr> 

    <tr><td>localhost</td> <td>critical</td> <td>2017-02-27 15:57:24</td></tr> 

    <tr><td>localhost</td> <td>Warning</td> <td>2017-02-27 09:20:15</td></tr> 

    <tr><td>localhost</td> <td>critical</td> <td>2017-03-03 03:30:50</td></tr> 

    <tr><td>localhost</td> <td>critical</td> <td>2017-03-16 03:30:50</td></tr> 

    <tr><td>localhost</td> <td>ok</td> <td>2017-03-17 09:20:35</td></tr> 

    <tr><td>localhost</td> <td>ok</td> <td>2017-03-17 10:20:47</td></tr> 

    <tr><td>localhost</td> <td>ok</td> <td>2017-03-18 10:20:47</td></tr> 
</tbody> 
</table> 

JavaScript:

/* Custom filtering function which will search data in column four between two values */ 
$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) { 

    // get the parts of the date string 
    var regexp = /^(\d{4})[^\d]+(\d{2})[^\d]+(\d{2})[^\d](\d{2})[^\d](\d{2})[^\d](\d{2})[^\d]*$/gi; 
    var matches = regexp.exec(data[2]); 
    var now = new Date();  

    // create a JS Date object so we can do date comparisons 
    var row_date = new Date(matches[1],+matches[2]-1,matches[3],matches[4],matches[5],matches[6]); 


    // figure out how far back we need to filter 
    var testDate = new Date(); 
    var filter_value = $('#dateFilter').val(); 

    if(filter_value == 'NULL'){ 
     return true; 
    } 
    else if(filter_value == '7D'){ 
     testDate.setDate(now.getDate() - 7); 
    } 
    else if(filter_value == '15D'){ 
     testDate.setDate(now.getDate() - 15); 
    } 
    else if(filter_value == '1M'){ 
     testDate.setMonth(now.getMonth() - 1);  
    } 


    if((testDate < row_date) && (now > row_date) ){ 

     // true means show 
     return true; 
    }  

    return false; 



    } 
); 

$(document).ready(function() { 
    var table = $('#example').DataTable(); 

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