Cómo paginar una tabla con ASP.NET Core

Resumen: En este artículo se muestra una función de paginación escrita en C# que puedes usar para paginar cualquier tabla o lista de elementos en aplicaciones ASP.NET Core y ASP.NET estándar.

Este articulo forma parte de la serie que estoy publicando sobre aprender a programar desde cero con el desarrollo de un Sistema para el Control de Inventarios con ASP.NET Core 6, en la parte final de este artículo puedes encontrar la liga de descarga del proyecto con los avances hasta el video 11.

Para paginar una tabla usaremos una clase que recibe por parámetro el total de registros que tienes para paginar, la pagina donde esta actualmente posicionado el usuario, el número de registros que se mostraran en cada página, y el número de paginas que se mostraran en pantalla.

• totalItems (obligatorio): el número total de elementos que se paginarán
• currentPage (opcional): la página activa actual, por defecto es la primera página
• pageSize (opcional): el número de elementos por página, el valor predeterminado es 10
• maxPages (opcional): el número máximo de enlaces de navegación de página para mostrar, el valor predeterminado es 10

Con estos parámetros la clase calcula el total de páginas, la primera y última página que se mostrara en pantalla, a partir de que registro y hasta cual se muestra en la página actual, así como una lista numérica de loa páginas que se muestran en pantalla.

Ejemplos

Supongamos que tenemos un total de 150 registros que queremos paginar, se tendría que hacer la siguiente llamada:

var pager = new Pager(totalItems: 150);

Resultado

// pager instance property values
pager.TotalItems;   // 150
pager.CurrentPage;  // 1
pager.PageSize;     // 10,
pager.TotalPages;   // 15
pager.StartPage;    // 1
pager.EndPage;      // 10
pager.StartIndex;   // 0
pager.EndIndex;     // 9
pager.Pages;        // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Ahora, supongamos que tenemos un total de 150 registros que queremos paginar y estamos en la página 7, se tendría que hacer la siguiente llamada:

var pager = new Pager(totalItems: 150, currentPage: 7);

Resultado

// pager instance property values
pager.TotalItems;   // 150
pager.CurrentPage;  // 7
pager.PageSize;     // 10,
pager.TotalPages;   // 15
pager.StartPage;    // 2
pager.EndPage;      // 11
pager.StartIndex;   // 60
pager.EndIndex;     // 69
pager.Pages;        // [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]

Otro ejemplo es que tengamos 150 registros, en la página 7 y queremos mostrar de 15 en 15

var pager = new Pager(totalPages: 150, currentPage: 7, pageSize: 15);

Resultado

// pager instance property values
pager.TotalItems;   // 150
pager.CurrentPage;  // 7
pager.PageSize;     // 15,
pager.TotalPages;   // 10
pager.StartPage;    // 1
pager.EndPage;      // 10
pager.StartIndex;   // 90
pager.EndIndex;     // 104
pager.Pages;        // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Por último, tenemos 150 registros, en la página 7, queremos mostrar de 15 en 15 y que en pantalla se muestren 5 páginas de navegación.

var pager = new Pager(totalPages: 150, currentPage: 7, pageSize: 15, maxPages: 5);

Resultado

// pager instance property values
pager.TotalItems;   // 150
pager.CurrentPage;  // 7
pager.PageSize;     // 15,
pager.TotalPages;   // 10
pager.StartPage;    // 5
pager.EndPage;      // 9
pager.StartIndex;   // 90
pager.EndIndex;     // 104
pager.Pages;        // [ 5, 6, 7, 8, 9 ]Lógica de paginación C#/ASP.NET

A continuación, se muestra la clase completa para implementar la lógica de paginación en C#/ASP.NET.

public class Pager
    {
        public Pager(
            int totalItems,
            int currentPage = 1,
            int pageSize = 10,
            int maxPages = 10)
        {
            // calculate total pages
            var totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);

            // ensure current page isn't out of range
            if (currentPage < 1)
            {
                currentPage = 1;
            }
            else if (currentPage > totalPages)
            {
                currentPage = totalPages;
            }

            int startPage, endPage;
            if (totalPages <= maxPages)
            {
                // total pages less than max so show all pages
                startPage = 1;
                endPage = totalPages;
            }
            else
            {
                // total pages more than max so calculate start and end pages
                var maxPagesBeforeCurrentPage = (int)Math.Floor((decimal)maxPages / (decimal)2);
                var maxPagesAfterCurrentPage = (int)Math.Ceiling((decimal)maxPages / (decimal)2) - 1;
                if (currentPage <= maxPagesBeforeCurrentPage)
                {
                    // current page near the start
                    startPage = 1;
                    endPage = maxPages;
                }
                else if (currentPage + maxPagesAfterCurrentPage >= totalPages)
                {
                    // current page near the end
                    startPage = totalPages - maxPages + 1;
                    endPage = totalPages;
                }
                else
                {
                    // current page somewhere in the middle
                    startPage = currentPage - maxPagesBeforeCurrentPage;
                    endPage = currentPage + maxPagesAfterCurrentPage;
                }
            }

            // calculate start and end item indexes
            var startIndex = (currentPage - 1) * pageSize;
            var endIndex = Math.Min(startIndex + pageSize - 1, totalItems - 1);

            // create an array of pages that can be looped over
            var pages = Enumerable.Range(startPage, (endPage + 1) - startPage);

            // update object instance with all pager properties required by the view
            TotalItems = totalItems;
            CurrentPage = currentPage;
            PageSize = pageSize;
            TotalPages = totalPages;
            StartPage = startPage;
            EndPage = endPage;
            StartIndex = startIndex;
            EndIndex = endIndex;
            Pages = pages;
        }

        public int TotalItems { get; private set; }
        public int CurrentPage { get; private set; }
        public int PageSize { get; private set; }
        public int TotalPages { get; private set; }
        public int StartPage { get; private set; }
        public int EndPage { get; private set; }
        public int StartIndex { get; private set; }
        public int EndIndex { get; private set; }
        public IEnumerable<int> Pages { get; private set; }
    }

Sí deseas descargar el proyecto para aprender a programar desde cero con el Sistema de Inventarios puedes dar clic aquí, recuerda que los avances del proyecto corresponden al video 11 publicado en YouTube.