Fix paging display numbers.

Author: mo-esmp

src/Serilog.Ui.Web/Controllers/LogsController.cs

@@ -23,7 +23,7 @@ static LogsController()
             Scripts = SetResource("Serilog.Ui.Web.wwwroot.js.main.js");
             SelectListItems = new List<SelectListItem>
             {
-                new SelectListItem {Text = "10", Value = "10"},
+                new SelectListItem {Text = "10", Value = "10", Selected = true},
                 new SelectListItem {Text = "25", Value = "25"},
                 new SelectListItem {Text = "50", Value = "50"},
                 new SelectListItem {Text = "100", Value = "100"}
@@ -43,11 +43,15 @@ public async Task<IActionResult> Index(int page = 1, int count = 10)
             if (count > 100)
                 count = 100;
 
-            var x = SelectListItems.FirstOrDefault(i => i.Value == count.ToString());
-            if (x != null)
-                x.Selected = true;
-            else
-                SelectListItems.First().Selected = true;
+            if (SelectListItems.First(i => i.Selected).Value != count.ToString())
+            {
+                SelectListItems.First(i => i.Selected).Selected = false;
+                var x = SelectListItems.FirstOrDefault(i => i.Value == count.ToString());
+                if (x != null)
+                    x.Selected = true;
+                else
+                    SelectListItems.First().Selected = true;
+            };
 
             var (logs, logCount) = await _dataProvider.FetchDataAsync(page, count);
             var viewModel = new LogViewModel

src/Serilog.Ui.Web/Views/Logs/Index.cshtml

@@ -3,6 +3,17 @@
     ViewData["Title"] = "Log List";
     Layout = "~/Views/Shared/_LogLayout.cshtml";
     var levelClass = string.Empty;
+    var showingItemsStart = (Model.Page - 1) * Model.Count;
+    int showingItemsEnd;
+    if (showingItemsStart == 0)
+    {
+        showingItemsStart = 1;
+        showingItemsEnd = 10;
+    }
+    else
+    {
+        showingItemsEnd = showingItemsStart + Model.Count;
+    }
 }
 <h1>Log List</h1>
 <form method="get" asp-action="Index">
@@ -70,7 +81,7 @@
     </table>
     <div class="row">
         <div class="col-sm-12 col-md-5">
-            <div class="table-paging-info">Showing 41 to 50 of @Model.LogCount entries</div>
+            <div class="table-paging-info">Showing @showingItemsStart to @showingItemsEnd of @Model.LogCount entries</div>
         </div>
         <div class="col-sm-12 col-md-7">
             <partial name="_Paging" model="Model" />

src/Serilog.Ui.Web/Views/Logs/_Paging.cshtml

@@ -2,14 +2,17 @@
 @{
     var totalPages = Model.LogCount / Model.Count;
     totalPages += Model.LogCount % Model.Count != 0 ? 1 : 0;
-    var pageDisplayCount = totalPages;
+    var endIndex = 5;
+    var startIndex = 1;
     var hasMore = false;
     if (totalPages > 5)
     {
-        pageDisplayCount = 5;
+
         if (totalPages - Model.Page > 2)
         {
             hasMore = true;
+            startIndex = Model.Page;
+            endIndex = Model.Page + 5;
         }
     }
 }
@@ -19,36 +22,36 @@
     <ul class="pagination">
         @if (Model.Page != 1)
         {
-            var value = Model.Page - 1;
-            <li class="page-item previous">
-                <a href="#" data-val="@value" tabindex="@value" class="page-link">Previous</a>
-            </li>
+        var value = Model.Page - 1;
+        <li class="page-item previous">
+            <a href="#" data-val="@value" tabindex="@value" class="page-link">Previous</a>
+        </li>
         }
-        @for (var i = 1; i <= pageDisplayCount; i++)
+        @for (var i = startIndex; i <= endIndex; i++)
+        {
+        if (Model.Page == i)
         {
-            if (Model.Page == i)
-            {
-                <li class="page-item active">
-                    <span class="page-link disabled">
-                        @i
-                        <span class="sr-only">(current)</span>
-                    </span>
-                </li>
-            }
-            else
-            {
-                <li>
-                    <a href="#" data-val="@i" tabindex="@i" class="page-link">@i</a>
-                </li>
-            }
+        <li class="page-item active">
+            <span class="page-link disabled">
+                @i
+                <span class="sr-only">(current)</span>
+            </span>
+        </li>
+        }
+        else
+        {
+        <li>
+            <a href="#" data-val="@i" tabindex="@i" class="page-link">@i</a>
+        </li>
+        }
         }
         @if (hasMore)
         {
-            var value = Model.Page + 1;
-            <li class="page-item ">&nbsp;...&nbsp;</li>
-            <li class="page-item next">
-                <a href="#" data-val="@value" tabindex="@value" class="page-link">Next</a>
-            </li>
+        var value = Model.Page + 1;
+        <li class="page-item ">&nbsp;...&nbsp;</li>
+        <li class="page-item next">
+            <a href="#" data-val="@value" tabindex="@value" class="page-link">Next</a>
+        </li>
         }
     </ul>
 </div>