准备

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的更多相关文章

  1. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  2. Tyrion中文文档（含示例源码）

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

  3. 安卓图表引擎AChartEngine(三) - 示例源码折线图、饼图和柱状图

    折线图: package org.achartengine.chartdemo.demo.chart; import java.util.ArrayList; import java.util.Lis ...

  4. Asp.Net Web Api 2 实现多文件打包并下载文件示例源码_转

    一篇关于Asp.Net Web Api下载文件的文章,之前我也写过类似的文章,请见:<ASP.NET(C#) Web Api通过文件流下载文件到本地实例>本文以这篇文章的基础,提供了Byt ...

  5. 安卓图表引擎AChartEngine(二) - 示例源码概述和分析

    首先看一下示例中类之间的关系: 1. ChartDemo这个类是整个应用程序的入口,运行之后的效果显示一个list. 2. IDemoChart接口,这个接口定义了三个方法, getName()返回值 ...

  6. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  7. Visual Studio 2015开发Qt项目实战经验分享（附项目示例源码）

    Visual Studio 2015开发Qt项目实战经验分享(附项目示例源码)    转 https://blog.csdn.net/lhl1124281072/article/details/800 ...

  8. Tyrion 中文文档（含示例源码）

    原文出处: Mr.Seven   Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Ty ...

  9. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

随机推荐

  1. 【EF6学习笔记】（三）排序、过滤查询及分页

    本篇原文地址:Sorting, Filtering, and Paging 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根据自己的理解做了 ...

  2. 通过keras例子理解LSTM 循环神经网络(RNN)

    博文的翻译和实践: Understanding Stateful LSTM Recurrent Neural Networks in Python with Keras 正文 一个强大而流行的循环神经 ...

  3. win10创建Ubuntu子系统

    有很多学弟们问我怎么安装Linux系统,刚开始是准备推荐VM的,但是突然想到window有个新功能,在win10中包含了Linux子系统,所以就写了这个教程,一是来给学弟们一个教程,顺便也体验一下这个 ...

  4. javase基础回顾（三） 动态代理

    动态代理是大型框架中经常用到的经典的技术之一,博主在理解spring的控制反转(依赖注入)的思想时回头着重复习了一下java的动态代理. 在说动态代理之前我们先简单说一说代理是用来干什么的,用于什么样 ...

  5. 分布式系统监视zabbix讲解五之web监控--技术流ken

    Web 监控 概况 你可以使用 Zabbix 检查几个网站可用性方面. 如果要使用 Web 检测功能,必须在 编译Zabbix 的时候加入 cURL(libcurl) 的支持. 要使用 Web 监控, ...

  6. 《C#并发编程经典实例》学习笔记-第一章并发编程概述

    并发编程的术语 并发 同时做多件事情 多线程 并发的一种形式,它采用多个线程来执行程序. 多线程是并发的一种形式,但不是唯一的形式. 并行处理 把正在执行的大量的任务分割成小块,分配给多个同时运行的线 ...

  7. 阿里云IoT

    阿里云IoT: https://iot.aliyun.com/

  8. C# Winform开发以及控件开发的需要注意的，被人问怕了，都是基础常识

    我是搞控件开发的,经常被人问,所以把一些问题记录了下来!如果有人再问,直接把地址丢给他看. 一. 经常会有人抱怨Winform界面闪烁,下面有几个方法可以尽可能的避免出现闪烁 1.控件的使用尽量以纯色 ...

  9. 学习记录---C# Web程序获取客户端电脑信息

    问题描述:由于最近项目需要使用Mac地址与注册码进行加密处理,但是又因为Web程序的局限性不能获取客户端电脑系统信息,当然IE浏览器有一个activex控件他是可以通过Js在前端代码中直接获取的,局限 ...

  10. [PHP]算法-队列结构的PHP实现

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: 1.php数组完全就能实现 2.array_push 从尾部往里压入元素 3.array_shi ...