Question

我使用的是jQuery DataTables，我希望使用基于

的下拉列表过滤数据表

昨天

过去7天

过去15天

过去30天

过滤应基于“状态时间”列，即第3列。该表的内容如下：

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代码：

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();
  } );
} );

使用下拉列表过滤数据表

1 个答案: