instantlistfilter : SP 2013

Jun 4, 2013 at 12:24 PM
Hi,

I have modified the JS file to fit to SP 2013. I 've added a CEWP to sharepoint native list and given the JS file reference, the functionality is working as expected.
The same JS file I have referred in CEWP of a external list created using EC type from SQL, but I couldn't see the filter text boxes at all.
Surprisingly I have placed sample alert statement in doc.ready .... I could able to see the filter text boxes.
I tried in FireFox ... i could able to see the filter text boxes in both sharepoint native list and external list with out any issues (i.e. no alert statement for external list).

Please help me... below is the code snippet.




$(window).load(function ()
{

alert('for external'); // With this alert text fields are appearing in external list in IE 9. If i //remove not text boxes to filter .
Load_Control(); 
$("input.vossers-filterfield")
    .css("border", "1px solid #7f9db9")
    .css("width", "100%")
    .css("margin", "2px")
    .css("padding", "2px")
    .css("background", "pink")
    .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();
                }
            });


            $("table.ms-listviewtable").children("tbody").each(function () {
                $(this).children("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));

                            // verifies the filter word.
                            if ($(this).is(":not(:contains('" + val + "'))")) {
                                mismatch = true;

                            }

                        }
                    });

                    if (mismatch) {
                        $(this).hide();
                    }
                    else {
                        $(this).show();
                    }
                });

            });

        }, 250);
    });
});


function Load_Control ()
{
$("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 () {
        if ($(this).hasClass("ms-vh-icon")) {
            // attachment
            tdset += "<td></td>";
        }
        else {
            // filterable
            tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";

        }

        colIndex++;
    });
    //alert("tdset" + tdset);
    var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";

    $(tr).insertAfter(this);
});
};

Jun 4, 2013 at 12:31 PM
here is how i can calling my filter JS file in the CEWP.

<script src="/Style%20Library/jquery-1.9.1.js" type="text/javascript"></script><script src="/Style%20Library/jsapi.js" type="text/javascript"></script>
<script src="/Style%20Library/instantlistfilter_contenteditorwebpart.js" type="text/javascript"></script><
script type="text/javascript"></script>


Thanks, Sid.
Oct 15, 2014 at 12:46 PM
Edited Oct 15, 2014 at 12:47 PM
Hi,

Request anyone please provide me the updated InstantList filter code for SharePoint 2013 list.

I have tried the provided code on the SharePoint 2013 list using CEWP but the search functionality is not working. not able to search any items from the list.

Really appreciate if anyone provide the updated code for SharePoint 2013.

Below is the code i am using for SharePoint 2013:
<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()
        {
            if($(this).hasClass("ms-vh-icon"))
            {
                // 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>
Please let me know if anything do i need to change to work on SharePoint 2013 list.


Thanks in Advance
Amit
Oct 23, 2014 at 4:34 PM
What browser are you trying in? I'll be testing with SPO / SP2013 shortly
Nov 19, 2014 at 2:21 PM
Any progress anyone for SP 2013 usage ? Appreciated any help!
Feb 4, 2015 at 3:59 PM
I also am very interested in this for SP 2013.