如何在javascript數據表中添加對列值的選擇過濾

我正在使用JavaScript DataTables在網頁上顯示csv文件。下面是我如何在javascript數據表中添加對列值的選擇過濾

javascript文件：

var CsvToHtmlTable = CsvToHtmlTable || {}; 

CsvToHtmlTable = { 
    init: function (options) { 

     options = options || {}; 
     var csv_path = options.csv_path || ""; 
     var el = options.element || "table-container"; 
     var allow_download = options.allow_download || false; 
     var csv_options = options.csv_options || {}; 
     var datatables_options = options.datatables_options || {}; 
     var custom_formatting = options.custom_formatting || []; 

     $("#" + el).html("<table class='table table-striped table-condensed' id='" + el + "-table'></table>"); 

     $.when($.get(csv_path)).then(
     function(data){  
      var csv_data = $.csv.toArrays(data, csv_options); 

      var table_head = "<thead><tr>"; 

      for (head_id = 0; head_id < csv_data[0].length; head_id++) { 
      table_head += "<th>" + csv_data[0][head_id] + "</th>"; 
      } 

      table_head += "</tr></thead>"; 
      $('#' + el + '-table').append(table_head); 
      $('#' + el + '-table').append("<tbody></tbody>"); 

      for (row_id = 1; row_id < csv_data.length; row_id++) { 
      var row_html = "<tr>"; 
      var color = "red"; 
      //takes in an array of column index and function pairs 
      if (custom_formatting != []) { 
       $.each(custom_formatting, function(i, v){ 
       var col_idx = v[0] 
       var func = v[1]; 
       csv_data[row_id][col_idx]= func(csv_data[row_id][col_idx]); 
       }) 
      } 

       for (col_id = 0; col_id < csv_data[row_id].length; col_id++) { 
      if (col_id === 2) { 

       row_html += "<td>" + parseFloat(csv_data[row_id][col_id]) + "</td>"; 
      } 
      else { 
       row_html += "<td>" + csv_data[row_id][col_id] + "</td>"; 
      } 

      if (parseFloat(csv_data[row_id][2]) <= 1 && parseFloat(csv_data[row_id][2]) > 0.7) { 
       color = "red"; 

      } 
      else if (parseFloat(csv_data[row_id][2]) <= 0.7 && parseFloat(csv_data[row_id][2]) >= 0.5) { 
       color = "orange"; 
      } 

      else { 
       color = "yellow"; 
      } 


      } 

      row_html += "</tr>"; 
      $('#' + el + '-table tbody').append(row_html).css("background-color", color)); 
      } 

      $('#' + el + '-table').DataTable(datatables_options); 

      if (allow_download) 
      $("#" + el).append("<p><a class='btn btn-info' href='" + csv_path + "'><i class='glyphicon glyphicon-download'></i> Download as CSV</a></p>"); 
     }); 
    } 
}

，下面將我的index.html文件：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>CSV to HTML Table</title> 


    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/dataTables.bootstrap.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 
    <div class="container-fluid"> 

     <h2>CSV to HTML Table</h2> 

     <div id='table-container'></div> 

    </div><!-- /.container --> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/jquery.csv.min.js"></script> 
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="js/dataTables.bootstrap.js"></script> 
    <script type="text/javascript" src="js/csv_to_html_table.js"></script> 


    <script type="text/javascript"> 
     function format_link(link){ 
     if (link) 
      return "<a href='" + link + "' target='_blank'>" + link + "</a>"; 
     else 
      return ""; 
     } 
     CsvToHtmlTable.init({ 
     csv_path: 'data/fatty_acid_profiles.csv', 
     element: 'table-container', 
     allow_download: true, 
     csv_options: {separator: ','}, 
     datatables_options: {"paging": false}, 
     custom_formatting: [[4, format_link]] 
     }); 
    </script> 
    </body> 
</html>

我的網頁目前看起來是這樣的：

我想知道這是可能的在DataTable中，對於第二列，我得到一個過濾器以及列名，以便我們可以選擇要查看哪些特定值的數據，就像我們在Excel中使用的那樣（使用分類&過濾器）？請幫忙！！

來源

2017-09-22 Xavier

是的，它可以通過定製的解決方案。你需要閱讀所有的列，並添加不同的成員下拉這樣的。

$(document).ready(function() { 
    $('#example').DataTable({ 
     initComplete: function() { 
      this.api().columns().every(function() { 
       var column = this; 
       var select = $('<select><option value=""></option></select>') 
        .appendTo($(column.header()).empty()) 
        .on('change', function() { 
         var val = $.fn.dataTable.util.escapeRegex(
          $(this).val() 
         ); 

         column 
          .search(val ? '^'+val+'$' : '', true, false) 
          .draw(); 
        }); 

       column.data().unique().sort().each(function (d, j) { 
        select.append('<option value="'+d+'">'+d+'</option>') 
       }); 
      }); 
     } 
    }); 
});

通過使用column().search()功能，你將有一個下拉菜單欄基於過濾器。通過將.appendTo($(column.header()).empty())更改爲.appendTo($(column.footer()).empty())，您可以將標題下拉到頁腳。

例子：

jsFiddle（頭下拉菜單）
jsFiddle（頁腳下拉菜單）

來源

2017-09-22 07:35:16

這是偉大的！但是我們不能在下拉菜單中選擇多個選項嗎？就像我們可以在Excel中做的一樣？ – Xavier

您需要一些更多的自定義JavaScript或另一個像select2的js庫來實現該功能。在這個問題下回答太複雜。如果此答案對您有幫助，請將其標記爲已選中。 –

嗯，不好意思，但我在我的問題中特別提出了有關像Excel一樣過濾的問題，這意味着多選選項，以上對我沒有多大幫助。 – Xavier

如何在javascript數據表中添加對列值的選擇過濾

回答

相關問題