Wednesday, July 28, 2010

Filter multiple List Columns & also by specific columns

Add a Content Editor webpart to the page with the following script in the Source Editor:


<script src="http://www.google.com/jsapi"></script>

<script>

google.load("jquery", "1.2.6");google.setOnLoadCallback(function() {

$(document).ready(function(){

jQuery.extend(jQuery.expr[':'], { containsIgnoreCase: "(a.textContent

a.innerText

jQuery(a).text()

'').toLowerCase().indexOf((m[3]

'').toLowerCase())>=0"

});





$("table.ms-listviewtable 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()

{

//modify the test columns here....
if( ($(this).hasClass("ms-vh-icon")) ||($(this).text()== "col2") || ($(this).text() == "col3") )

{// attachment
tdset += "<td></td>";
}else

{// filterable
tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";
}

colIndex++;
});

var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
$(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);

});

});


});


</script>

Thanks to http://instantlistfilter.codeplex.com/

No comments: