Filter data with JSLink Sharepoint

Question

I use JSLink to customize a SharePoint display list.

I managed to filter data as you can see in the following link:

https://sharepoint.stackexchange.com/questions/91317/filter-out-items-in-list-view-using-jslink

When I click on the title of a column to try to filter a data second time, it systematically brings back all the old data instead of sorting out the previously filtered ones.

Answer 1

In the provided example the filter is applied by row index and this is explains why different rows are displayed before and after sorting applied.

The below example demonstrates how to hide rows by list item id , in that case the filter will be applied consistently to the same rows:

(function () {

   function listPreRender(renderCtx) {

         var excludeItemIds = [1];  //hide list item with Id=1

         var rows = renderCtx.ListData.Row; //get current rows
         var filteredRows = rows.filter(function(row){
            var curItemId = parseInt(row.ID); 
            if(excludeItemIds.indexOf(curItemId) === -1)
                return row;                
         });

         renderCtx.ListData.Row = filteredRows;
         renderCtx.ListData.LastRow = filteredRows.length;  //update ListData.LastRow property
   }


    function registerListRenderer()
    {
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
          Templates : {
            OnPreRender : listPreRender
          }
      });
    } 
    ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');

})();

Results

Filtered list view

Filtered list view after applying sorting