欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET GridView的Bootstrap分页样式

程序员文章站 2022-07-22 12:36:10
本文实例为大家分享了gridview的bootstrap分页样式,供大家参考,具体内容如下 revenue.cs收入类,包括实体模型和业务逻辑 public...

本文实例为大家分享了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

ASP.NET GridView的Bootstrap分页样式

项目运行结果如图:

ASP.NET GridView的Bootstrap分页样式

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

bootstrap学习教程

bootstrap实战教程

bootstrap插件使用教程

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