Individual Columns Filter in a Table

Individual Columns Filter in a Table
 Add this lines  in page load:

$("#analystdashboardid thead td #proj-filter").click(function(){

     showFilterOption(this);
    });

/*Individual columns filter */
var arrayMap = {};
var ArrayDuplicate=new Array();
var SelectedValues=new Array();
function showFilterOption(tdObject){
debugger;
  var filterGrid = $(tdObject).find(".filter");
  ArrayDuplicate.length=0;
  if (filterGrid.is(":visible")){
    filterGrid.hide();
    return;
  }

  $(".filter").hide();

  var index = 0;
  filterGrid.empty();
  var allSelected = true;
  filterGrid.append('<div><input id="all" type="checkbox" checked class="excelhidespan">Select All</div>');

  var $rows = $(tdObject).parents("table").find("tbody tr");


  $rows.each(function(ind, ele){

    var currentTd = $(ele).children()[$(tdObject).attr("index")];
    var div = document.createElement("div");
    div.classList.add("grid-item")
    var str = $(ele).is(":visible") ? 'checked' : '';
    if ($(ele).is(":hidden")){
      allSelected = false;
    }
 
    var currentTdValue=currentTd.innerHTML;
    var dummyArray = $.grep(ArrayDuplicate, function(dt) {
    return dt== currentTdValue;
    });
    if(dummyArray.length==0)
    {
     div.innerHTML = '<input type="checkbox" '+str+' class="excelhidespan" >'+currentTd.innerHTML;
     filterGrid.append(div);
     ArrayDuplicate.push(currentTd.innerHTML);
    }
    else
    {
      div.innerHTML = '<input type="checkbox" class="excelhidespan">'+currentTd.innerHTML;
      div.style.display = 'none';
      filterGrid.append(div);
    }
    arrayMap[index] = ele;
    index++;
  });

  if (!allSelected){
    filterGrid.find("#all").removeAttr("checked");
  }

  filterGrid.append('<div><input id="close" type="button" value="Close"/><input id="ok" type="button" value="Ok"/></div>');
  filterGrid.show();

  var $closeBtn = filterGrid.find("#close");
  var $okBtn = filterGrid.find("#ok");
  var $checkElems = filterGrid.find("input[type='checkbox']");
  var $gridItems = filterGrid.find(".grid-item");
  var $all = filterGrid.find("#all");

  $closeBtn.click(function(){

    filterGrid.hide();
    return false;
  });

  $okBtn.click(function(){

    SelectedValues.length=0;
    filterGrid.find(".grid-item").each(function(ind,ele){
      if ($(ele).find("input").is(":checked")){
        SelectedValues.push($(ele)[0].textContent);
      }
    });
    filterGrid.find(".grid-item").each(function(ind,ele){
 
      var dummyArray1 = $.grep(SelectedValues, function(dt) {
      return dt== $(ele)[0].textContent;
      });
      if(dummyArray1.length>0)
      {
        $(arrayMap[ind]).show();
      }
      else{
        $(arrayMap[ind]).hide();
      }
    });
    filterGrid.hide();
    return false;
  });

  $checkElems.click(function(event){

    event.stopPropagation();
    //return false;
  });

  $gridItems.click(function(event){

    var chk = $(this).find("input[type='checkbox']");
    $(chk).prop("checked",!$(chk).is(":checked"));
  });

  $all.change(function(){

    var chked = $(this).is(":checked");
    filterGrid.find(".grid-item [type='checkbox']").prop("checked",chked);
  })

  filterGrid.click(function(event){

    event.stopPropagation();
    //return false;
  });

  return filterGrid;
}