bootstrap-paginator分页示例 源码 MVC
准备
1.数据：bootstrap包(含分页插件bootstrap-paginator.js)
2.技术方案：ajax动态加载分页、部分视图、BLL取数
代码
模板页
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script src="~/Content/Scripts/jquery/jquery-2.1.1.min.js"></script>
<link href="~/Content/Scripts/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/Scripts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="~/Content/Scripts/bootstrap-3.3.7-dist/js/bootstrap-paginator.js"></script>
@RenderSection("scripts")
</head>
<body>
<div class="container" style="width:auto;margin:0 0px;">
@RenderBody()
</div>
</body>
</html>
主页
@using LeaRun.Entity;
@{
ViewBag.Title = "View1";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
<script type="text/javascript">
var limit = 20;
function initTable() {
$.ajax({
url: '../SystemSetup/LoadData',
type: 'post',
data: { page: 1, limit: limit },
dataType: 'html',
success: function (data) {
$("#data_table").html(data);
var pageCount = $('#datatotle').val(); //总页数
var options = {
bootstrapMajorVersion: 3, //版本
currentPage: 1, //当前页数
totalPages: pageCount, //总页数
numberOfPages: 5,
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},//点击事件，用于通过Ajax来刷新整个list列表
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
url: '../SystemSetup/LoadData',
type: 'post',
data: { page: page, limit: limit },
dataType: 'html',
success: function (data) {
$("#data_table").html(data);
}
});
}
};
$('#pageLimit').bootstrapPaginator(options);
}
}); } $(function () {
initTable();
});
</script>
}
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table">
<thead>
<tr>
<th>
编号
</th>
<th>
名称
</th>
<th>
菜单
</th>
<th>
等级
</th>
<th>
启用
</th>
<th>
创建时间
</th>
</tr>
</thead>
<tbody id="data_table">
</tbody>
</table>
<div class="col-md-12 column text-center">
<ul id="pageLimit"></ul>
</div>
</div>
</div>
分页
@using LeaRun.Entity;
@{
#region
List<Base_Module>
data = ViewBag.Data as List<Base_Module>;
if (data == null)
{
data = new List<Base_Module>();
}
int btotel = ViewBag.BTotel;
#endregion
}
<input id="datatotle" type="text" hidden="hidden" value="@ViewBag.Totle"/>
@for (int i = 0; i < data.Count; i++)
{
<tr class="@(i%2==0?"active":"")">
<td>
@(btotel++)
</td>
<td>
@data[i].FullName
</td>
<td>
@data[i].Location
</td>
<td>
@data[i].Level
</td>
<td>
@(data[i].Enabled == 1 ? "启用" : "未启用")
</td>
<td>
@(Convert.ToDateTime(data[i].CreateDate).ToString("yyyy-MM-dd"))
</td>
</tr>
}
Controller
using LeaRun.Business;
using LeaRun.Business.BaseUtility;
using LeaRun.Entity;
using LeaRun.Utilities;
using System.Collections.Generic;
using System.Web.Mvc; namespace LeaRun.WebApp.Controllers
{
public class SystemSetupController : Controller
{
public Base_ModuleBll base_modulebll = new Base_ModuleBll(); public ActionResult Index()
{
return View();
} public ActionResult LoadData(int page, int limit)
{
int total = 0;
List<Base_Module> list = base_modulebll.GetList(out total, page: page, rows: limit);
ViewBag.Data = list;
ViewBag.Totle = total;
ViewBag.BTotel = (page - 1) * limit + 1;
return PartialView("LoadData");
}
}
}
效果
bootstrap-paginator分页示例 源码 MVC的更多相关文章
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- Tyrion中文文档（含示例源码）
Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...
- 安卓图表引擎AChartEngine(三) - 示例源码折线图、饼图和柱状图
折线图: package org.achartengine.chartdemo.demo.chart; import java.util.ArrayList; import java.util.Lis ...
- Asp.Net Web Api 2 实现多文件打包并下载文件示例源码_转
一篇关于Asp.Net Web Api下载文件的文章,之前我也写过类似的文章,请见:<ASP.NET(C#) Web Api通过文件流下载文件到本地实例>本文以这篇文章的基础,提供了Byt ...
- 安卓图表引擎AChartEngine(二) - 示例源码概述和分析
首先看一下示例中类之间的关系: 1. ChartDemo这个类是整个应用程序的入口,运行之后的效果显示一个list. 2. IDemoChart接口,这个接口定义了三个方法, getName()返回值 ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- Visual Studio 2015开发Qt项目实战经验分享（附项目示例源码）
Visual Studio 2015开发Qt项目实战经验分享(附项目示例源码) 转 https://blog.csdn.net/lhl1124281072/article/details/800 ...
- Tyrion 中文文档（含示例源码）
原文出处: Mr.Seven Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Ty ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
随机推荐
- iOS逆向开发（5）：微信强制升级的突破 | 多开 | 微信5.0
接下来的几篇文章,小程以微信为例,实战地演示一下:如何注入iOS的APP.其中使用到的知识,基本在前面的文章中都有介绍到. 小白:小程,我想用回旧版本的微信! 小程:为什么要用旧版本微信呢? 小白:你 ...
- 微软改名部又出动啦！微软宣布VSTS改名为Azure DevOps
本篇为翻译,原文地址:https://azure.microsoft.com/en-us/blog/introducing-azure-devops/ 作者:Jamie Cool,Azure DevO ...
- tomcat和nginx配置java服务器
tomcat和nginx配置java服务器 环境配置 服务器配置 写了这么久的SSM,做了一个简单的网站[没有加入数据库],然后就要开始部署javaWEB的云服务器了.本次搭建使用的Tomcat和n ...
- python实战学习之numpy学习
numpy基础要点 1.生成数组 np.array([]) 2.变量的类型 numpy.ndarray 3.数据的类型 int8,float64,float32,bool等 4.数据的类型转换 x.a ...
- MySQL EXPLAIN 命令: 查看查询执行计划
MySQL 的 EXPLAIN 命令可以查看SELECT语句的执行的计划,是 MySQL 查询优化的必备工具. 通过执行计划可以了解查询方式.索引使用情况.需要扫描的数据量以及是否需要临时表或排序操作 ...
- date、sleep和usleep命令
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 1.1 date命令 date用于获取和设置操作系统的时间,还 ...
- MySQL Router实现MySQL的读写分离
1.简介 MySQL Router是MySQL官方提供的一个轻量级MySQL中间件,用于取代以前老版本的SQL proxy. 既然MySQL Router是一个数据库的中间件,那么MySQL Rout ...
- spring-cloud-starter-gateway
********************************************************** Spring MVC found on classpath, which is i ...
- backbond整体架构
(function(factory) { // 在这里是backbone模块化的一个接口.支持AMD,CMD和全局变量模式.代码很好理解. })(function(root, factory, _, ...
- 个渣渣C语言之数组
---恢复内容开始--- 学c语言就知道数组.指针在c中有着特殊的地位.而且是必须掌握的一项知识,学会它会让你受益无穷. 一.数组 1.数组:室友一系列相同元素构成的.它连续的存储在内存中. 2.数组 ...