Change display name of the SharePoint listview Fields

In this article, we will be changing the display names of fields selected in a list view.

Step 1: Create a list view in a page with some fields.

Step 2 : Edit the page, then add a Script editor web part in the page.

Step 3: Insert the below code in it

<script src="/SP2013/SiteAssets/Script/jquery-2.1.4.min.js" type="text/javascript"></script>

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("ChangeColumnName");

function ChangeColumnName() {

$('[ID="diidSort0LinkTitle"]').html("Employee ID");
$('[ID="diidSort0First_x0020_Name"]').html("First Name");
$('[ID="diidSort0Family_x0020_Name"]').html("Surname");
$('[ID="diidSort0Contact_x0020_Number"]').html("Token Number");
$('[ID="diidSort0ADID"]').html("User ID");

}

</script>

Below is the desired result