HTML表のフィルタリング/選択

williswin：

私はいくつかの静的データとMySQLからいくつかを持っているHTMLテーブルを持っています。現在、私は助けが選択リストに「はい」と「いいえ」の選択を追加して必要なものを、適切にフィルタリングされます。これらは単なるテスト値であり、彼らは、MySQLから読み取られています。私は、MySQLから選択リストに値を追加するためにここに挿入する値を把握することができません。どのような援助が理解されるであろう！ありがとうございました

.append($table.find('tbody tr')


<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8">
    <title>Filter</title>




</head>

<script>
    $.ajax({
        url: 'http://localhost:7003/getTable',
        type: "get",
        dataType: "json",

        success: function(data) {
            drawTable(data);
        }
    });

    function drawTable(data) {
        for (var i = 0; i < data.length; i++) {
            drawRow(data[i]);
        }
    }

</script>




</body>
</html>



<table id="myTable" class="table table-striped">

  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th class="dropdown-header">Age</th>
      <th>Email</th>
      <th class="dropdown-header">Gender</th>
      <th class="dropdown-header">Term</th>
      <th class="dropdown-header">Enrolled</th>
    </tr>
  </thead>

  <tbody>

    <script>

        function drawRow(rowData) {
            var row = $("<tr />")
            $("#myTable").append(row);
                row.append($('<td>' + rowData.County + '</td>')); 
                row.append($('<td>' + rowData.County + '</td>')); 
                row.append($('<td>').attr('data-field-name', 'age').text(rowData.County));
                row.append($('<td>' + rowData.County + '</td>')); 
                row.append($('<td data-field-name="gender">' + rowData.County + '</td>')); 
                row.append($('<td data-field-name="term">' + rowData.County + '</td>')); 
                row.append($('<td data-field-name="enrolled">' + rowData.County + '</td>')); 



            }
    </script>

    <tr>
      <td>John</td>
      <td>Smith</td>
      <td data-field-name="age">15</td>
      <td>123</td>
      <td data-field-name="gender">Male</td>
      <td data-field-name="term">Summer2017</td>
      <td data-field-name="enrolled">Fall2018</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
      <td data-field-name="age">16</td>
      <td>456</td>
      <td data-field-name="gender">Female</td>
      <td data-field-name="term">Fall2018</td>
      <td data-field-name="enrolled">Fall2019</td>
    </tr>
    <tr>
      <td>Bobby</td>
      <td>Adams</td>
      <td data-field-name="age">15</td>
      <td>789</td>
      <td data-field-name="gender">Male</td>
      <td data-field-name="term">Spring2019</td>
      <td data-field-name="enrolled">Fall2018</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>Lee</td>
      <td data-field-name="age">15</td>
      <td>456</td>
      <td data-field-name="gender">Female</td>
      <td data-field-name="term">Fall2018</td>
      <td data-field-name="enrolled">Fall2018</td>
    </tr>
  </tbody>
</table>

<script>
    (function($) {
  $.fn.tableFilterHeaders = function(filterFn) {
    this.each((index, header) => {
      let $header = $(header),
          $table = $header.closest('table'),
          text = $header.text(),
          colIndex = $header.closest('th').index(),
          fieldName = $header.attr('data-field-name') || text.toLowerCase(),
      $select = $('<select>')
        .data('fieldName', fieldName)
        .append($('<option>').text(text).val('').prop('disabled', true))
        .append($('<option>').text('All').val('all'))
        .append($table.find('tbody tr')
          .toArray()
          .map(tr => {
            return $(tr).find(`td:eq(${colIndex})`).text();
          })
          .filter(text => text.trim().length > 0)
          .sort()
          .filter((v, i, a) => a.indexOf(v) === i)
          .map(text => {
            return $('<option>').text(text).val(text);
          }));
      $header.empty().append($select.val('').on('change', filterFn));
    });
  };
  $.fn.initRowClasses = function(oddCls, evenCls) {
    this.find('tbody tr').each(function(i) {
      $(this).toggleClass(oddCls, i % 2 == 0).toggleClass(evenCls, i % 2 == 1);
    });
  };
  $.fn.updateRowClasses = function(oddCls, evenCls) {
    this.find('tbody tr:visible:even').addClass(oddCls).removeClass(evenCls);
    this.find('tbody tr:visible:odd').addClass(evenCls).removeClass(oddCls);
  };
})(jQuery);

$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);

function filterText(e) {
  let $filter = $(e.target),
      $table = $filter.closest('table'),
      $filters = $table.find('.dropdown-header select'),
  filterObj = $filters.toArray().reduce((obj, filter) => {
    let $filter = $(filter);
    return Object.assign(obj, { [$filter.data('fieldName')] : $filter.val() });
  }, {});
  if ($filter.val() === 'all') {
    $filter.val('')
  }
  $table.find('tbody tr').each(function() {
    $(this).toggle($(this).find('td').toArray().every(td => {
      let $td = $(td), fieldName = $td.attr('data-field-name');
      if (fieldName != null) {
        return filterObj[fieldName] === null ||
          filterObj[fieldName] === '' ||
          filterObj[fieldName] === 'all' ||
          filterObj[fieldName] === $td.text();
      }
      return true;
    }));
  });

  $table.updateRowClasses('odd', 'even');
}
</script>

はいといいえのオプションを示していません。

Nawedカーン：

ロジックを着色あなたのフィルタリングロジックと奇数/偶数行が呼び出される前にそれが表示されていても、あなたのAJAXからのデータを返すAFTERページ/コードに。これは、非同期メソッドがどのように働くかです。

あなたは、ヘッダーを呼び出し、内部のロジックを着色する必要があるdrawTable()。このように...もちろん、あなたがテーブルを描く行われ、後に機能：

function drawTable(data) {
   for (var i = 0; i < data.length; i++) {
      drawRow(data[i]);
   }

   $('#myTable').initRowClasses('odd', 'even');
   $('.dropdown-header').tableFilterHeaders(filterText);
}

コードのfoloowing 2行を削除することを確認してください：

$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);

あなたのコードから、別の場所で彼らはどこに表示されます。それらを残すことは何も中断されません、それだけで不必要な複数回実行されます。

HTML表のフィルタリング/選択

おすすめ