I am using SP2013 on-premise. On a list view all the columns' header come with a filter+sorter function. It is not useful on some columns (e.g. photo, which show a picture and no point to sort, and calculated columns)
May I know how to disable some of column headers' filter and sorting?
Use the custom client side rendering: https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views
I often override the RenderItemTemplate in order to customize the entire list w/o using jQuery. In fact, I copy and paste the entire function and change the for loop in order to customize the rendering of the single columns.
Add a ScriptEditorWebPart before your ListView and add the <script> source.
RenderItemTemplate = function(c) {
var k = c.CurrentItem,
d = c.ListSchema,
i = c.CurrentItemIdx,
h = i % 2 == 1 ? "ms-alternating " : "";
if (FHasRowHoverBehavior(c)) h += " ms-itmHoverEnabled ";
var a = [];
a.push('<tr class="');
a.push(h);
if (d.TabularView != undefined && d.TabularView == "1") {
a.push("ms-itmhover");
a.push('" oncontextmenu="');
if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(249) || !DoesListUseCallout(c)) a.push("return ShowCallOutOrECBWrapper(this, event, false)");
else a.push("return ShowCallOutOrECBWrapper(this, event, true)")
}
a.push('" iid="');
var j = GenerateIID(c);
a.push(j);
a.push('" id="');
a.push(j);
a.push('" role="row">');
function g(a) {
IsInfiniteScrollSupported(c) && c.ListData != null && i == c.ListData.Row.length - 1 && a.push('" onfocus="scrollManager.ScrollHandler(this)')
}
if (d.TabularView != undefined && d.TabularView == "1") {
a.push('<td class="ms-cellStyleNonEditable ms-vb-itmcbx ms-vb-imgFirstCell');
g(a);
if (ListModule.Settings.SupportsDoclibAccessibility) a.push('" tabindex="0" role="rowheader" aria-label="' + Encoding.HtmlEncode(window.ListView.Strings.L_select_deselect_item_alt) + '"><div role="checkbox" class="s4-itm-cbx s4-itm-imgCbx" tabindex="-1');
else a.push('" tabindex="0"><div role="checkbox" class="s4-itm-cbx s4-itm-imgCbx" tabindex="-1');
BrowserDetection.userAgent.firefox && g(a);
ListModule.Settings.SupportsDoclibAccessibility && a.push('" aria-checked="false');
a.push('"><span class="s4-itm-imgCbx-inner"><span class="ms-selectitem-span"><img class="ms-selectitem-icon" alt="" src="');
a.push(GetThemedImageUrl("spcommon.png"));
a.push('"/></span></span></div></td>')
}
for (var f = d ? d.Field : null, e = 0; e < f.length; e++) {
var b = f[e];
if (b.GroupField != null) break;
a.push('<td role="gridcell" class="');
e == f.length - 1 && b.CalloutMenu != "TRUE" && b.listItemMenu != "TRUE" && a.push("ms-vb-lastCell ");
if (b.css == null) {
b.css = GetCSSClassForFieldTd(c, b);
if (b.CalloutMenu == "TRUE" || b.ClassInfo == "Menu" || b.listItemMenu == "TRUE") {
b.css += '" IsECB="TRUE';
if (b.CalloutMenu == "TRUE") b.css += '" IsCallOut="TRUE';
if (b.ClassInfo == "Menu" || b.listItemMenu == "TRUE") b.css += '" height="100%'
}
}
c.CurrentFieldSchema = b;
a.push(b.css);
a.push('">');
a.push(spMgr.RenderField(c, b, k, d));
a.push("</td>");
c.CurrentFieldSchema = null
}
a.push("</tr>");
return a.join("")
};
There is also a RenderHeaderTemplate function in oder to customize the columns headers:
RenderHeaderTemplate = function(b, e) {
var d = b.ListSchema,
i = b.ListData,
a = [];
if (e == null) e = true;
a.push(RenderTableHeader(b));
if (ListModule.Settings.SupportsDoclibAccessibility) {
a.push('<thead role="presentation" id="');
a.push("js-listviewthead-" + b.wpq);
a.push('"><tr valign="top" role="row" class="ms-viewheadertr')
} else {
a.push('<thead id="');
a.push("js-listviewthead-" + b.wpq);
a.push('"><tr valign="top" class="ms-viewheadertr')
}
if (DOM.rightToLeft) a.push(" ms-vhrtl");
else a.push(" ms-vhltr");
a.push('">');
if (d.TabularView != undefined && d.TabularView == "1") {
a.push('<th class="ms-headerCellStyleIcon ms-vh-icon ms-vh-selectAllIcon" scope="col" role="columnheader">');
RenderSelectAllCbx(b, a);
a.push("</th>")
}
if (e) {
var f = d ? d.Field : null,
g = 1;
for (var h in f) {
var c = f[h];
if (c.DisplayName == null) continue;
if (c.GroupField != null) break;
c.counter = g++;
a.push(spMgr.RenderHeader(b, c));
IsCSRReadOnlyTabularView(b) && (c.CalloutMenu == "TRUE" || c.listItemMenu == "TRUE") && a.push('<th role="presentation"></th>')
}
}
d.TabularView == "1" && b.BasePermissions.ManageLists && b.ListTemplateType != 160 && a.push('<th class="ms-vh-icon" scope="col" title=""><span class="ms-addcolumn-span" role="presentation"> </span></th>');
a.push("</tr>");
a.push("</thead>");
if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(146)) {
WriteEngagementLog("SPPOP_DragAndDropAttract");
WriteStart("SPPOP_DragAndDropAttractStart");
if (ShouldShowDragDropAttractBox(b)) {
a.push('<caption class="ms-dragDropAttract"><div class="ms-attractMode ms-dragDropAttract ms-hideWhenFileDrag">' + window.ListView.Strings.L_SPDragAndDropAttract + "</div></caption>");
WriteSuccess("SPPOP_DragAndDropAttractSuccess")
} else WriteFailure("SPPOP_DragAndDropAttractFail")
} else if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(178)) {
WriteEngagementLog("SPPOP_DragAndDropAttractB");
WriteStart("SPPOP_DragAndDropAttractBStart");
if (ShouldShowDragDropAttractBox(b)) {
a.push('<caption class="ms-dragDropAttract"><div class="ms-metadata ms-dragDropAttract-subtle ms-hideWhenFileDrag">' + window.ListView.Strings.L_SPDragAndDropAttract + "</div></caption>");
WriteSuccess("SPPOP_DragAndDropAttractBSuccess")
} else WriteFailure("SPPOP_DragAndDropAttractBFail")
} else if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(311)) WriteEngagementLog("SPPOP_NoDragAndDropAttract");
else WriteEngagementLog("SPPOP_DragAndDropAttractUserFlightError");
return a.join("")
};
You mention jQuery, but it can be done without.
SharePoint 2013 has its own subset of jQuery called mQuery
So a (rather brute) method is to replace all html inside the TH tags with its own label (from the A tag)
EnsureScriptFunc('mQuery.js', 'm$', function() {
m$('[id^=diidSort]').forEach(function(tag){
if(tag.tagName==='A'){
tag.closest('TH').innerHTML=tag.text;
}
})
});
If you do have jQuery loaded it becomes:
$.each( $("[id^=diidSort]") , function () {
$(this).closest('th').html(this.text);
});
We can hide the SharePoint list filtering option just by simply using the style below in the respective page,
<style type="text/css">
.ms-headerSortArrowLink , .ms-core-menu-box{
display: none;
}
</style>
where, .ms-headerSortArrowLink - is the arrow icon class .ms-core-menu-box - is the filter menu box class
In 2019 OnPrem you can use this to disable sorting on ALL columns, including Person fields. You can put this into any .js content editor web part, doesn't have to be in the JSLink:
//hide sort arrows
$(".ms-listviewtable th").each(function(){
$(this).attr("onmouseover","");
$(this).attr("onmousedown","");
});
//hide <a> link on column labels
$.each( $("[id^=diidSort]") , function () {
$(this).parent().html("<span>"+$(this).text()+"</span>");
});
you may also try:
/** disable filtering */
$("div.ms-vh-div").attr("filterdisable", "TRUE");
/** disable sorting */
$("div.ms-vh-div").attr("sortdisable", "TRUE");
$("div.ms-vh-div").attr("sortfields", "TRUE");
$.each($("div.ms-vh-div"), function () {
$(this).html($(this).find("a").html());
});
