How to Manage Sorting and Filtering for Backbone Collection View lists

Sorting and filtering table results is a commonly requested feature and is important to do right. Being able to track sorting and filtering in the URL is ideal, and this solution allows for a seamless user experience. Technically, the solution below applies to any lists or tables that need sorting and filtering, not just Backbone Collection View.

Example Code Block

Here is the example code block:

addSortOrFilter: function () {
   //load in the "UrlHelper" module in your file header
   let UrlHelper = _.has(UrlHelperModule, "UrlHelper")
       ? UrlHelperModule.UrlHelper
       : UrlHelperModule;


   //grab the existing URL
   let url = Backbone.history.fragment;


   //use this function to remove a URL parameter
   url = UrlHelper.removeUrlParameter(url, "groupValue");
   
   //use this function to set/overwrite a URL parameter
   url = UrlHelper.setUrlParameter(url, "order", "inverse");


   //run this function to seamlessly refresh the page with the new URL
   Backbone.history.navigate(url, { trigger: true });
},

The code block above should often be defined as an event listener, perhaps on a click event or change to a dropdown. Line 17 will effectively re-render the view. You can then grab the URL parameters in the view’s initialize function so that each time the URL changes, the new parameters are grabbed, and the correct data is fetched.

Grab Parameters in the Initialize Function

initialize: function (options) {
   //get params from the url
   const params = Utils.parseUrlOptions(options.routerArguments[1]);
   
   //set view attributes as needed based on the parameters
   this.sort = params["sort"] || "";
}

Best practice: Utilizing the above solution with a view that has access to “beforeShowContent” allows for a very clean user experience!

Use “beforeShowContent” to Fetch Data Before the View Renders

For more detail, see the tutorial article How to Make SuiteCommerce Site Wait for Data Before a Page Loads!

This function allows you to fetch data from the server before your view loads.

beforeShowContent: function beforeShowContent() {
   return this.collection.fetch({
       data: {
         sort: this.sort
       },
       killerId: AjaxRequestsKiller.getKillerId(),
   });
},

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

FREE SuiteCommerce Book

If you liked this article, you'll LOVE our book on SuiteCommerce! Order the free SuiteCommerce book today, and we'll even pay for shipping!

Oracle NetSuite Alliance Partner & Commerce Partner

If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!

We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.