ASP.NET GridView的Bootstrap分页样式

本文实例为大家分享了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插件使用教程

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

(0)

相关推荐

  • Bootstrap Paginator分页插件使用方法详解

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件 首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator

  • bootstrap table 服务器端分页例子分享

    1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru

  • 第一次动手实现bootstrap table分页效果

    先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q

  • BootStrap Table 分页后重新搜索问题的解决办法

    前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").boot

  • 基于Bootstrap3表格插件和分页插件实例详解

    首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据 下面分页 使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

  • 基于bootstrap3和jquery的分页插件

    自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般.拿出来献丑了. /** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明:id为放置分页容器的ID,now为当前页,max为最大页,

  • Angular.js与Bootstrap相结合实现表格分页代码

    先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

  • 完美实现bootstrap分页查询

    最近,开始我们的Java项目,要求尽量使用bootstrap,因为它比easyUI要好看的多.然后就开始上网查,边查边做,虽然我们引入了一些bootstrap的样式,但是并没有js代码,所有的功能都需要自己用js做.其实并不难,只要我们明白分页的实质就行.说了这么多,就让我们看看分页查询的表格是怎么做出来的吧. 先上效果图: 1.引入的css样式 我们需要引入bootstrap自带的表格样式,这样比较好看,如果再需要修改的话,我们就在其基础上再改. <link rel="styleshee

  • Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax.   1可以用读流文件解决.2 如果想用request.form 方式,设置  contentType: "application/x-www-form-

  • BootStrap中的table实现数据填充与分页应用小结

    BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化.最近后台使用此插件做了一个表格应用,做个总结. 1.使用方法 可以通过又拍云提供的CDN获取js插件,样式表和国际化插件,或者直接去官网下载.将下面的js插件和样式放到html head 头里即可使用. //样式 <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.

随机推荐