ASP.NET GridView的Bootstrap分页样式

所属分类: 网络编程 / ASP.NET 阅读数: 740
收藏 0 赞 0 分享

本文实例为大家分享了GridView的Bootstrap分页样式,供大家参考,具体内容如下

Revenue.cs收入类,包括实体模型和业务逻辑

 public class Revenue
 {

 public Revenue(string country, string revenue, string salesmanager, string year)
 {
  this.country = country;
  this.revenue = revenue;
  this.salesmanager = salesmanager;
  this.year = year;
 }

 public Revenue() { }

 public string country { get; set; }
 public string revenue { get; set; }
 public string salesmanager { get; set; }
 public string year { get; set; }

 public List<Revenue> GetRevenueDetails(int pagenumber,int maxrecords)
 {
  List<Revenue> lstRevenue = new List<Revenue>();
  string filename = HttpContext.Current.Server.MapPath("~/App_Data/country_revenue.csv");
  int startrecord = (pagenumber * maxrecords) - maxrecords;
  if (File.Exists(filename))
  {
  IEnumerable<int> range = Enumerable.Range(startrecord, maxrecords);
  IEnumerable<String> lines = getFileLines(filename, range);
  foreach (String line in lines)
  {
   string[] row = line.Split(',');
   lstRevenue.Add(new Revenue(row[0], row[1], row[2], row[3]));
  }

  }
  return lstRevenue;
 }

 public static IEnumerable<String> getFileLines(String path, IEnumerable<int> lineIndices)
 {
  return File.ReadLines(path).Where((l, i) => lineIndices.Contains(i));
 }

 public int GetTotalRecordCount()
 {  
  string filename = HttpContext.Current.Server.MapPath("~/App_Data/country_revenue.csv");
  int count = 0;
  if (File.Exists(filename))
  {
  string[] data = File.ReadAllLines(filename);
  count= data.Length;
  }
  return count;
 } 
 }

Default.aspx内容:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridViewBootstrapPagination.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>GridView的Bootstrap分页样式</title>
 <link href="Styles/bootstrap.min.css" rel="stylesheet" />
 <script src="Scripts/jquery-1.8.2.js"></script>
 <script src="Scripts/jquery.bootpag.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
  // init bootpag
  var count = GetTotalPageCount();
  $('#page-selection').bootpag(
  {
   total:count
  }).on("page", function (event, num) {
   GetGridData(num);
  });
 });

 function GetGridData(num) {

  $.ajax({
  type: "POST",
  url: "Default.aspx/GetRevenueDetail",
  data: "{ \"pagenumber\":" + num + "}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
   bindGrid(data.d);
  },
  error: function (xhr, status, err) {
   var err = eval("(" + xhr.responseText + ")");
   alert(err.Message);

  }
  });
 }

 function bindGrid(data) {
  $("[id*=gvBSPagination] tr").not(":first").not(":last").remove();
  var table1 = $('[id*=gvBSPagination]');
  var firstRow = "$('[id*=gvBSPagination] tr:first-child')";
  for (var i = 0; i < data.length; i++) {

  var rowNew = $("<tr><td></td><td></td><td></td><td></td></tr>");
  rowNew.children().eq(0).text(data[i].country);
  rowNew.children().eq(1).text(data[i].revenue);
  rowNew.children().eq(2).text(data[i].salesmanager);
  rowNew.children().eq(3).text(data[i].year);
  rowNew.insertBefore($("[id*=gvBSPagination] tr:last-child"));
  }
 }

 function GetTotalPageCount() {
  var mytempvar = 0;
  $.ajax({
  type: "POST",
  url: "Default.aspx/GetTotalPageCount",
  data: "",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  async:false,
  success: function (data) {
   mytempvar=data.d;

  },
  error: function (xhr, status, err) {
   var err = eval("(" + xhr.responseText + ")");
   alert(err.Message);

  }
  });
  return mytempvar;
 }

 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div style="width:670px;margin-left:auto;margin-right:auto;">
 <h2 style="text-align:center;">ASP.NET GridView的Bootstrap分页样式</h2>
 <asp:GridView ID="gvBSPagination" runat="server" CssClass="table table-striped table-bordered table-condensed" Width="660px" AllowPaging="true" PageSize="5" OnPreRender="gvBSPagination_PreRender">
  <PagerTemplate>
  <div id="page-selection" class="pagination-centered"></div>
  </PagerTemplate>
 </asp:GridView>
 <div id="content"></div> 

 </div>
 </form>
</body>
</html>

后台代码:

 public partial class Default : System.Web.UI.Page
 {
 private const int MAX_RECORDS = 5;

 protected void Page_Load(object sender, EventArgs e)
 {
  string filename = Server.MapPath("~/App_Data/country_revenue.csv");
  if (!IsPostBack)
  {
  List<Revenue> revenue = GetRevenueDetail(1);
  gvBSPagination.DataSource = revenue;
  gvBSPagination.DataBind();

  }

 }

 [WebMethod]
 [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]  
  public static List<Revenue> GetRevenueDetail(int pagenumber)
  {
  Revenue rv = new Revenue();
  List<Revenue> lstrevenue = rv.GetRevenueDetails(pagenumber,MAX_RECORDS);  
  return lstrevenue;
 }

 [WebMethod]
 [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
 public static int GetTotalPageCount()
 {
  int count=0;
  Revenue rv=new Revenue();
  count = rv.GetTotalRecordCount();
  count = count / MAX_RECORDS;
  return count;
 }
 protected void gvBSPagination_PreRender(object sender, EventArgs e)
 {
  GridView gv = (GridView)sender;
  GridViewRow pagerRow = (GridViewRow)gv.BottomPagerRow;

  if (pagerRow != null && pagerRow.Visible == false)
  pagerRow.Visible = true;
 }
 }

country_revenue.csv

项目运行结果如图:

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

运行page页面时的事件执行顺序及页面的回发与否深度了解

page页面时的事件执行顺序的了解对于一些.net开发者起到者尤关重要的作用;页面的回发与否会涉及到某些事件执行与不执行,在本文中会详细介绍,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

Web.config(应用程序的配置信息)总结

Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中,接下来详细介绍一下配置情况,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

C#时间格式化(Datetime)用法详解

C#时间格式化Datetime.ToString参数format格式详细用法,本文将进行介绍,感兴趣的朋友可以了解下啊
收藏 0 赞 0 分享

实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样有演示动画,感兴趣的朋
收藏 0 赞 0 分享

Asp.net 图片文件防盗链(尊重劳动成果)及BeginRequest事件学习

关于图片盗链这个问题,毕竟是自己的劳动成功,很多人不希望别人就那么轻易地偷走了;反盗链的程序其实很简单,熟悉ASP.NET 应用程序生命周期的话很容易就可以写一个,运用HttpModule在BeginRequest事件中拦截请求就ok了
收藏 0 赞 0 分享

asp.net Grid 导出Excel实现程序代码

看了FineUI中的将Grid导出为Excel的实现方法,实际上是可以非常简单。看来很难的问题,变换一种思路就可以非常简单
收藏 0 赞 0 分享

使用C#处理WebBrowser控件在不同域名中的跨域问题

我们在做web测试时,经常会使用WebBrowser来进行一些自动化的任务而有些网页上面会用IFrame去嵌套别的页面,这些页面可能不是在相同域名下的,这时就会出现跨域问题,无法直接在WebBrowser中获取到IFrame中的元素,接下来介绍如何解决此问题,需要了解的朋友可以参
收藏 0 赞 0 分享

.NET 下运用策略模式(组合行为和实体的一种模式)

我简单的理解策略模式就是把行为(方法)单独的抽象出来,并采用组合(Has-a)的方式,来组合行为和实体的一种模式比如,.NET中对数组排序的Sort的方法就是一个策略模式的实现模板
收藏 0 赞 0 分享

使用Entity Framework(4.3.1版本)遇到的问题整理

在这里记录一下之前使用Entity Framework(4.3.1版本)遇到的问题:更新没有设置主键的表、更改Code-First的默认连接、检测字符串截断错误,需要的朋友可以参考下
收藏 0 赞 0 分享

Asp.net利用JQuery AJAX实现无刷新评论思路与代码

Asp.net利用JQuery AJAX实现无刷新评论,此功能是每一个从事asp.net开发者的朋友都希望实现的,本文利用闲暇时间整理了一些,有需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多