maandag 14 oktober 2013

Filter inputfields on a Sharepoint Field for instantly filtering


Had a customer today that wanted a online filtering on a table. 
Found out next part of code in a previous project in Sharepoint 2007 of an old colleague. 
And like it or not, but it also works in Sharepoint 2010.
It is a simple script that adds input fields below each column of your Sharepoint View. 
When entering a text in a column filter field, it hides all rows of your View that not 
corresponds with the value that you have added. 

Have fun with it ! 

$(document).ready(function()
{
 jQuery.extend(jQuery.expr[':'], {
 containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0}
});

$("table tr.ms-viewheadertr").each(function()
{
    if($("td.ms-vh-group", this).size() > 0)
    {
        return;
    }
    var tdset = "";
    var colIndex = 0;
    $(this).children("th,td").each(function()
    {
        if($(this).hasClass("ms-vh-icon"))
        {
            // attachment
            tdset += "";
        }
        else
        {
            // filterable
            tdset += ">input class="vossers-filterfield" filtercolindex="" + colIndex + "" type="text" />>br />
";                                                          
        }
        colIndex++;
    });
    var tr = "" + tdset + "";
    $(tr).insertAfter(this);
});          

$("input.vossers-filterfield")
    .css("border", "1px solid #7f9db9")
    .css("width", "100%")
    .css("margin", "2px")
    .css("padding", "2px")
    .keyup(function()
 {                                            
  var inputClosure = this;
  if(window.VossersFilterTimeoutHandle)
  {
   clearTimeout(window.VossersFilterTimeoutHandle);
  }
  window.VossersFilterTimeoutHandle = setTimeout(function()
  {
   var filterValues = new Array();
   $("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
   {                                                            
    if($(this).val() != "")                                                     
    {
     filterValues[$(this).attr("filtercolindex")] = $(this).val();
    }
   });                          
   $(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
   {
    var mismatch = false;
    $(this).children("td").each(function(colIndex)
    {
     if(mismatch) return;
     if(filterValues[colIndex])
     {
      var val = filterValues[colIndex];
      // replace double quote character with 2 instances of itself
      val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));                                                                                                      
      if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
      {
       mismatch = true;
      }                                                                                           
     }
    });
    if(mismatch)
    {
     $(this).hide();
    }
    else
    {
     $(this).show();
    }                             
   });                                                         
  }, 250);
    });
});

 

Geen opmerkingen:

Een reactie posten