@manhnguyenv

Welcome to my blog!

Paging with Bootstrap in MVC

January 12, 2018 16:15

Custom paging in ASP.NET MVC 5 depend on Bootstrap

https://stackoverflow.com/questions/41327645/how-to-make-a-custom-paging-in-asp-net-mvc-5-depend-on-bootstrap


This is my code and its working properly
Note: this paging code need bootstrap to be exist
Add new file in the models named Paging.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using System.Web.Security;

namespace project.Models
{
public class Paging
{
private projectEntities db = new projectEntities();

public string Pagination(int total, int page, int Take, int offset, string Controler, string View, string Params)
{
if (total > 0)
{
string c_url = HttpContext.Current.Request.Url.AbsoluteUri.ToLower();
string URL = c_url.Substring(0, c_url.IndexOf(Controler.ToLower()));
double rowPerPage = Take;
if (Convert.ToDouble(total) < Take)
{
rowPerPage = Convert.ToDouble(total);
}

int totalPage = Convert.ToInt16(Math.Ceiling(Convert.ToDouble(total) / rowPerPage));
int current = page;
int record = offset;
int pageStart = Convert.ToInt16(Convert.ToDouble(current) - Convert.ToDouble(offset));
int pageEnd = Convert.ToInt16(Convert.ToDouble(current) + Convert.ToDouble(offset));
string numPage = "";
if (totalPage < 1) return "";
numPage += "<ul class='pagination'>";
if (current > 1) numPage += "<li class='previous'><a href='" + URL + Controler + View + "?Page=" + (page - 1) + Params + "' aria-label='Previous'>&laquo;</a></li>";
else numPage += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
if (current > (offset + 1)) numPage += "<li><a href='" + URL + Controler + View + "?Page=1" + Params + "' name='page1'>1</a></li><li class='disabled spacing-dot'><a href='#'>...</a></li>";
for (int i = 1; i <= totalPage; i++)
{
if (pageStart <= i && pageEnd >= i)
{
if (i == current) numPage += "<li class='active'><a href='#'>" + i + " <span class='sr-only'>(current)</span></a></li>";
else numPage += "<li><a href='" + URL + Controler + View + "?Page=" + i + Params + "'>" + i + "</a></li>";
}
}
if (totalPage > pageEnd)
{
record = offset;
numPage += "<li class='disabled spacing-dot'><a href='#'>...</a></li><li><a href='" + URL + Controler + View + "?Page=" + (totalPage) + Params + "'>" + totalPage + "</a></li>";
}
if (current < totalPage) numPage += "<li class='next'><a class='ui-bar-d' href='" + URL + Controler + View + "?Page=" + (page + 1) + Params + "'>&raquo;</a></li>";
else numPage += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>&raquo;</span></a></li>";
numPage += "</ul>";
return numPage;
}
else
{
return "no records found";
}
}
}
}

You can used in your controller like the below:

    Paging pg = new Paging();
    private projectEntities db = new projectEntities();

    //ex : Controller name-> news, view_name -> browse
    public ActionResult Index()
    {
        int offset = 1;
        int Page = 1;
        int Take = 20;
        if (Convert.ToInt32(Request.QueryString["Page"]) > 1)
        {
            Page = Convert.ToInt32(Request.QueryString["Page"]);
        }

        int skip = 0;
        if (Page == 1)
            skip = 0;
        else
            skip = ((Page - 1) * Take);
        int total = db.Table_Name.Count();
        var data = db.Table_Name.Skip(skip).Take(Take);
        string paging = pg.Pagination(total, Page, Take, offset, "news", "/browse", "");
        ViewBag.Paging = paging;
        return View(data.ToList());
    }


After that you can call it in the view like this:

@model IEnumerable<project.Models.project>
@{
ViewBag.Title = "News";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<table class="table table-striped">
<tr>
<th>
@Html.DisplayNameFor(model => model.field_name)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.field_name)
</td>
</tr>
}
</table>
@Html.Raw(ViewBag.Paging)

JavaScript

https://toidicodedao.com/2016/01/19/series-javascript-sida-object-trong-javascript/

https://toidicodedao.com/2016/01/26/series-javascript-sida-luan-ban-ve-cai-dit-this-trong-javascript/

https://toidicodedao.com/2016/08/16/js-truyen-ki-chuong-1-luoc-su-giang-ho/

https://toidicodedao.com/2016/08/18/js-truyen-ki-chuong-2-vo-lam-day-song/

https://toidicodedao.com/2016/08/23/js-truyen-ki-chuong-3-quan-hung-cat-cu/

https://toidicodedao.com/2017/10/10/async-await-trong-javascript/

/* index.html */

<!DOCTYPE html>
<html> 
<head>
  <title>The World</title>
  <meta charset="utf-8" />
  <script type="text/javascript" src="js/site.js" ></script>
  <link rel="stylesheet" href="css/site.css" /> 
</head> 
<body>
  <div id="sidebar">  
    <span>Vikram Crumblings</span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div id="wrapper">
    <div id="main">
      <h1>Dot Net World</h1>
      <p>Hello to my world!</p>
      <form>
        <div>
          <label>Date</label>
          <input />
        </div>
        <div>
          <label>Location</label>
          <input />
        </div>
        <div><input type="submit" value="Add" /></div>
      </form>
    </div>
    <div id="footer">
      &copy; 2017 Dot Net For All Ltd:
    </div>
  </div>
</body> 
</html>

/* site.css */

 
html{
height:100%
}
 
body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
  height:100%
}
 
label {
  font-weight: bold;
  display: block;
}
 
input[type=text], input[type=password], textarea {
  width: 150px;
}
 
#main {
  background-color: #eee;
  padding: 4px;
  margin: 0;
  height:100%
}
 
#footer {
  background-color: #222;
  color: #eee;
  padding: 8px 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
}
 
.menu {
  font-size: 12px;  
}
 
  .menu li {
    list-style-type: none;
background: #A9A9A9;
width:250px;
height:20px;
padding:10px;
margin: 0px 0px 0px -40px;
  }
 
    .menu li.active {
      font-weight: bold;   
  background:#696969
    }
 
#sidebar {
  background: #708090;
  color: #eee;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow: hidden;
  left: 0;
  margin: 0;
}
 
#wrapper {
  margin: 0 0 0 250px;  
  height:100%
}

/* site.js */

$(document).ready(function() {
$(".menu li").mouseenter(function(){
$(this).css('background-color', '#dcdcdc')
})
$(".menu li").mouseleave(function(){
$(this).css('background-color', '#A9A9A9')
if($(this).hasClass("active"))
{
$(this).css('background','#696969')
}
})
$(".menu li").click(function(){
if($(".menu li").hasClass("active"))
{
$(".menu li").removeClass('active')
$(".menu li").css('background-color', '#A9A9A9')
}
$(this).toggleClass("active")
})
});

Categories

Recent posts