Sort Order of the Views on a List Page

Question

Is there a way change the order of the views listed on a list page (OOB or dynamically using JavaScript/JQuery)? For instance, we want to show all of the views yet show/sort them in a specific order (ie., take the FY20 and put it at the end).

Answer 1

I am basically getting the content from another question here in this site - link here. Thanks Shashank Reddy K

Below is the javascript for JSLink(display template) file which does the custom sorting.

You just need to change the order in the viewNames array with the order you want to display in your list.

(function () {     
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      'Templates': {
        'Header': renderHeaderTemplateForDocuments
 }
}); 

// enter all views here in the desired display order
var viewNames = ['All items', 'Test', 'Dept View', 'HomePage', 'Modify this View', 'Create View'];

function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames){
    var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
    // update with an integer to specify the number of displayed views
    ClientPivotControl.prototype.SurfacedPivotCount = viewData.length;   //display ALL available menu options
    viewData.sort(compareMenuOptions);  //sort menu options in order specified in the array
    renderCtx.ListSchema.ViewSelectorPivotMenuOptions = JSON.stringify(viewData);
    return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames); //render Header template
}

function compareMenuOptions(a,b) {
    if(a.DisplayText != undefined && b.DisplayText != undefined){
           var x = viewNames.indexOf(a.DisplayText);
           var y = viewNames.indexOf(b.DisplayText)
          if (x > y)
            return 1;
          if (x < y)
            return -1;
    }
  return 0;
}
})(); 

Another idea would be to have the views starting with numbers like 01.My View, 02.Another View, etc. - from Jammin4CO