Filter and Paging For SharePoint Library

Create Calculated Column "FN" Formula =UPPER(LEFT([Title]))

Edit  all items view page -> add the following script in Script editor.

<script type="text/javascript">
    function qs(paramName) {
        var args = document.location.search.substring(1).split("&");
        for (j = 0; j < args.length; j++) {
            nameValues = args[j].split("=");
            if (nameValues[0] == paramName) return nameValues[1];
        }
        return null;
    }
    var filterField = "FN";
    var filterValuesDelimiter = " - ";
    var filterValues = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
    var selectedValueStyle = "font-weight: bold;";
    var filterDivStyle = " font-size: 15px;";
    var filterLinks = new Array();
    for (var i = 0; i < filterValues.length; i++) {
        filterLinks.push('<a ' + (qs("FilterValue1") == filterValues[i] ? 'style="' + selectedValueStyle + ' ' : '') + 'href="' + document.location.pathname + '?FilterField1=' +
            filterField + '&FilterValue1=' + filterValues[i] + '">' + filterValues[i] + '</a>');
    }
    document.write('<div class="textfilter" style="' + filterDivStyle + '">' + filterLinks.join(filterValuesDelimiter) + '</div>');
</script>
<style>
    .ms-bottompaging {
        background-color: #216288;
        width: 100%;
        color: white;
    }

 
    .textfilter {
        text-align: center;
        background-color: #216288;
        color: white;
        margin-top: -20px;
        padding: 3px 3px 3px 3px;
    }

    .textfilter a:visited {
        color: white;
    }

    .textfilter a:selected {
        color: white;
    }

    .textfilter a:link {
        color: white;
    }

    .textfilter a:hover {
        color: yellow;
    }

    .textfilter a,
    .ms-link:visited {
        color: white;
    }

   
</style>