none
Using JS or Jquery to hide SP 2013 list items until filter(s) are checked on list header columns RRS feed

  • Question

  • Hi,

    I work for a restricted environment so I cannot show my list; however, I am using a Wiki page app in SP. I would like to have all items hidden until a user checks off filter(s) from the list's column headings. Once these are checked, I would like to show only the items that meet these filter(s) criteria. 

    I know with a view I can keep all items hidden but how can I disable that view once list header column's filter(s) are checked off?

    Any help is greatly appreciated as always!

    Best,

    CMB


    CBM

    Tuesday, June 2, 2020 7:10 PM

Answers

  • Thank you Jerry!

    This did the trick (especially after I uncommented out the: setInterval(HideItems, 1000); which allowed the list to stay hidden until I clicked on a filter.

    I have one last request if possible...is there a way to add an 'Apply' button for the filters? In that, after user clicks on a filter(s) under a column header, is there a way user can click on an 'Apply' button which would not only apply the filter(s) but also close the filter dropdown box from the column header?

    This is the last question on this topic.

    Again, thank you sincerely for all of your great help!

    Best,

    CBM


    CBM

    Hi Brooks,

    The column header dropdown will be closed once applying the filter in my side, please see the gif below:

    Then there is no need to repeat doing this :).

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by C M Brooks Tuesday, June 9, 2020 12:11 PM
    Tuesday, June 9, 2020 2:59 AM

All replies

  • Hi Brooks,

    When there is any filter in a List Column header, the page url will append FilterField and FilterValue like this:

    Due to this, need to check if current url didn't conatin specific character, then hide All ltems in the view, here is a code snippet for your reference:

    <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
    	setInterval(HideItems, 1000);
    });
    
    function HideItems()
    {
    	if(window.location.href.indexOf("FilterField")==-1)
    	{
    		$(".ms-listviewtable").find('tbody').hide()
    	}
    
    }
    </script>
    

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, June 3, 2020 8:45 AM
  • Hi.

    Thank you for this! I'm going to try it out to see if it will work for the Wiki page blog I have.

    On another note, I'm looking for an easier way to clear the filter(s) especially if I have many columns filter(s) selected. I was hoping to add a 'Clear All' button but would need help with the JS. 

    Again, any help is greatly appreciated. 


    CBM

    Wednesday, June 3, 2020 10:39 AM
  • Hi.

    Thank you for this! I'm going to try it out to see if it will work for the Wiki page blog I have.

    On another note, I'm looking for an easier way to clear the filter(s) especially if I have many columns filter(s) selected. I was hoping to add a 'Clear All' button but would need help with the JS. 

    Again, any help is greatly appreciated. 


    CBM

    Hello Brooks,

    You can add the Clear All Button for clearing filter like this:

    <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
    	setInterval(HideItems, 1000);
    });
    
    function HideItems()
    {
    	if(window.location.href.indexOf("FilterField")==-1)
    	{
    		$(".ms-listviewtable").find('tbody').hide()
    	}
    
    }
    
    function ClearAll()
    {
       var FinalUrl=window.location.href.split("=")[0];
       window.location.href=FinalUrl
    }
    </script>
    
    <input type="button" value="Clear" onclick="ClearAll()"/>
    

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by C M Brooks Thursday, June 4, 2020 10:43 AM
    • Unmarked as answer by C M Brooks Friday, June 5, 2020 7:13 PM
    Thursday, June 4, 2020 1:30 AM
  • Thank you Jerry.

    Much appreciated!

    - CMB


    CBM

    Thursday, June 4, 2020 10:44 AM
  • Hi Jerry.

    Thank you for this. 

    Quick question. I just tried it out and noticed something.

    Both functions are working as they should; however,  I noticed that when I go to a column header to apply a filter the result is it shows all items in the list and basically ignores the filter; however, when I go back to the filter (with the other filter still selected) it then shows both filters correctly. I can then remove one of the filters and it still shows only the one selected.

    How do I get the filter(s) to kick in instantly? Meaning once I click on a filter, how can I get it to function properly and show only that filtered item rather than all items? It's only functioning properly once I select another filter.

    Any help is very much appreciated! Thank you for all of this!


    CBM

    Friday, June 5, 2020 7:56 PM
  • Hi Jerry.

    Thank you for this. 

    Quick question. I just tried it out and noticed something.

    Both functions are working as they should; however,  I noticed that when I go to a column header to apply a filter the result is it shows all items in the list and basically ignores the filter; however, when I go back to the filter (with the other filter still selected) it then shows both filters correctly. I can then remove one of the filters and it still shows only the one selected.

    How do I get the filter(s) to kick in instantly? Meaning once I click on a filter, how can I get it to function properly and show only that filtered item rather than all items? It's only functioning properly once I select another filter.

    Any help is very much appreciated! Thank you for all of this!


    CBM

    Hi Brooks,

    Modify like this:

    <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
    	//setInterval(HideItems, 1000);
    	$(window).on('hashchange', function(e){
    	    HideItems();
    	});
    });
    
    function HideItems()
    {
    	if(window.location.href.indexOf("FilterField")==-1)
    	{
    		$(".ms-listviewtable").find('tbody').hide()
    	}
    	
    	else if (window.location.href.indexOf("FilterField")>-1)
    	{
    	   window.location.reload();
    
    	}
    
    }
    
    function ClearAll()
    {
       var FinalUrl=window.location.href.split("=")[0];
       window.location.href=FinalUrl
    }
    </script>
    
    <input type="button" value="Clear" onclick="ClearAll()"/>
    

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, June 8, 2020 2:37 AM
  • Thank you Jerry!

    This did the trick (especially after I uncommented out the: setInterval(HideItems, 1000); which allowed the list to stay hidden until I clicked on a filter.

    I have one last request if possible...is there a way to add an 'Apply' button for the filters? In that, after user clicks on a filter(s) under a column header, is there a way user can click on an 'Apply' button which would not only apply the filter(s) but also close the filter dropdown box from the column header?

    This is the last question on this topic.

    Again, thank you sincerely for all of your great help!

    Best,

    CBM


    CBM

    Monday, June 8, 2020 7:33 PM
  • Thank you Jerry!

    This did the trick (especially after I uncommented out the: setInterval(HideItems, 1000); which allowed the list to stay hidden until I clicked on a filter.

    I have one last request if possible...is there a way to add an 'Apply' button for the filters? In that, after user clicks on a filter(s) under a column header, is there a way user can click on an 'Apply' button which would not only apply the filter(s) but also close the filter dropdown box from the column header?

    This is the last question on this topic.

    Again, thank you sincerely for all of your great help!

    Best,

    CBM


    CBM

    Hi Brooks,

    The column header dropdown will be closed once applying the filter in my side, please see the gif below:

    Then there is no need to repeat doing this :).

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by C M Brooks Tuesday, June 9, 2020 12:11 PM
    Tuesday, June 9, 2020 2:59 AM
  • Thank you again Jerry!

    I see what you mean. It all works very well.

    Thank you!!!

    Best,

    CBM


    CBM

    Tuesday, June 9, 2020 12:12 PM