如何使用搜索参数搜索HTML表格数据 [英] How to search Html table data with search parameters

问题描述

我有一个HTML表，其中填充了JSON数据， 我提供了一个搜索字段，该字段提供了搜索时的表格数据， 现在我想做的是

I have an HTML table which i am populating with JSON data, there is an search field i have provided which is giving the tabledata on search, Now what i am trying to do is

• 我有一个select下拉列表，其中包含表标题名称
• 点击该选项后，我只想搜索该特定列
• 假设在这里我有一个列名称为User Code，因此从下拉列表中，当用户选择用户代码并搜索表数据应仅填充用户代码的任何内容时
• 我正在用tbody进行搜索
• 当前，我的搜索字段用于搜索整个表格

• I have an select dropdown which is consist of Table header names
• On click of that option i want to make my search to that specific column only
• suppose here i have one column name as User Code ,so from dropdown when user selects user code and search any thing the table data should gets populated for user code only
• I am doing the search in tbody
• Currently my search field search for whole table

代码段

$(document).ready(function() {
  var tableValue = [{
      "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
      "User Name": "admin",
      "User LoginId": "admin",
      "User Password": "admin",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
      "User Name": "maiyas",
      "User LoginId": "maiyas",
      "User Password": "maiyas",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "CHEF BAKERS",
      "User Name": "cbadmin",
      "User LoginId": "cbadmin",
      "User Password": "cbadmin",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "CHEF BAKERS",
      "User Name": "cbaker",
      "User LoginId": "cbaker",
      "User Password": "cbaker",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
      "User Name": "jayanagar",
      "User LoginId": "jayanagar",
      "User Password": "jayanagar",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
      "User Name": "malleswaram",
      "User LoginId": "malleswaram",
      "User Password": "malleswaram",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
      "User Name": "kolar",
      "User LoginId": "kolar",
      "User Password": "kolar",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    }
  ]

  function addTable(tableValue) {
    var col = Object.keys(tableValue[0]);
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);
    var table = document.createElement("table");
    var tr = table.insertRow(-1);
    for (var i = 0; i < col.length; i++) { //this one to make  thead
      var th = document.createElement("th");
      th.innerHTML = col[i];
      tr.classList.add("text-center");
      tr.appendChild(th);
    }
    for (var i = 0; i < tableValue.length; i++) { // thid one to make tbody
      tr = table.insertRow(-1);
      tr.classList.add("filterData"); //hear i am adding the class in body
      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableValue[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata);
          tabCell.classList.add("text-right");
        }
        tabCell.innerHTML = tabledata;
      }
      var divContainer = document.getElementById("table");
      divContainer.innerHTML = "";
      divContainer.appendChild(table);
      table.classList.add("table");
      table.classList.add("table-striped");
      table.classList.add("table-bordered");
      table.classList.add("table-hover");
    }
  }
  addTable(tableValue)

  $("#mySelect").on("change", function(e) {
    var header = this.value;
    alert(header)
    $("#myInput").on("keyup", function() {
      var q = $(this).val().toLowerCase();
      if (q === "") {
        $(".filterData").show();
        return true;
      }
      $(".filterData").hide().filter(function(i, el) {
        var d = $(el).text().trim().toLowerCase();
        console.log(q, d, d.indexOf(q));
        return (d.indexOf(q) > -1);
      }).show();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<select id="mySelect">
  <option disabled></option>
  <option>Distributor Name</option>
  <option>User Name</option>
  <option>User LoginId</option>
  <option>User Password</option>
  <option>User Role</option>
  <option>Active</option>
</select>
<input id="myInput" type="text" placeholder="Search..">
<div id="table"></div>

推荐答案

看看这段代码.

我将selectedIndex用作eq

I use the selectedIndex as eq

如果启用第一个选项，他们可以在任何地方搜索

If you enable the first option, they can search anywhere

var tableValue = [{
    "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
    "User Name": "admin",
    "User LoginId": "admin",
    "User Password": "admin",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
    "User Name": "maiyas",
    "User LoginId": "maiyas",
    "User Password": "maiyas",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "CHEF BAKERS",
    "User Name": "cbadmin",
    "User LoginId": "cbadmin",
    "User Password": "cbadmin",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "CHEF BAKERS",
    "User Name": "cbaker",
    "User LoginId": "cbaker",
    "User Password": "cbaker",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
    "User Name": "jayanagar",
    "User LoginId": "jayanagar",
    "User Password": "jayanagar",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
    "User Name": "malleswaram",
    "User LoginId": "malleswaram",
    "User Password": "malleswaram",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
    "User Name": "kolar",
    "User LoginId": "kolar",
    "User Password": "kolar",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  }
]

function addTable(tableValue) {
  var $tbl = $("<table />", {"class": "table table-striped table-bordered table-hover"}),
      $thd = $("<thead/>"),
       $tb = $("<tbody/>"),
      $trh = $("<tr/>", {"class": "text-center"});

  $.each(Object.keys(tableValue[0]), function(_,val) {
    $("<th/>").html(val).appendTo($trh);
  });
  $trh.appendTo($thd);
  $.each(tableValue, function(_, item) {
    $tr = $("<tr/>", {"class": "filterData"});
    $.each(item, function(key,value) {
      $("<td/>", {"class": "text-right"}).html(value).appendTo($tr);
      $tr.appendTo($tb);
    });
  });
  $tbl.append($thd).append($tb);
  $("#table").html($tbl);
}
$(function() {

  addTable(tableValue)
  $("#myInput").on("input", function() {
    var q = $(this).val().toLowerCase();
    if (q === "") {
      $(".filterData").show();
      return true;
    }
    var fldIdx = $("#mySelect")[0].selectedIndex;
    $(".filterData").hide().filter(function(i, el) {
      var d = fldIdx === 0 ? $(el).text().trim().toLowerCase() : $("td", el).eq(fldIdx - 1).text().trim().toLowerCase()
      // console.log(q, d, d.indexOf(q));
      return (d.indexOf(q) > -1);
    }).show();
  });

  $("#mySelect").on("change", function(e) {
    $("#myInput").trigger("input");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<select id="mySelect">
  <option>All</option>
  <option>Distributor Name</option>
  <option>User Name</option>
  <option>User LoginId</option>
  <option>User Password</option>
  <option>User Role</option>
  <option>Active</option>
</select>
<input id="myInput" type="text" placeholder="Search..">
<div id="table"></div>

这篇关于如何使用搜索参数搜索HTML表格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！