如何使用Bootstrap实现分页及翻页

Posted 2023-03-25

参考技术A 最近做的asp.netMVC项目中需要对数据列表进行分类，这个本来就是基于bootstrap开发的后台，因此也就想着bootstrap是否有分页插件呢，或者说是基于jquery支持的分页功能，这样整体的网站后台风格便能够统一，又不用自己去写一套分页的功能。
首先便是要下载Bootstrap Paginator了，github上便有这个的开源项目提供下载：
https://github.com/lyonlai/bootstrap-paginator
首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及Paginator的js文件。其中网上搜到，貌似jquery必须要1.8版本以上，这个我没有亲自去测试看过。于是视图的文件引用便：
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

然后，分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们，当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页，这次也应该有点不同。
<script>
$(function ()
var carId = 1;
$.ajax(
url: "/OA/Setting/GetDate",
datatype: 'json',
type: "Post",
data: "id=" + carId,
success: function (data)
if (data != null)
$.each(eval("(" + data + ")").list, function (index, item) //遍历返回的json
$("#list").append('<table id="data_table" class="table table-striped">');
$("#list").append('<thead>');
$("#list").append('<tr>');
$("#list").append('<th>Id</th>');
$("#list").append('<th>部门名称</th>');
$("#list").append('<th>备注</th>');
$("#list").append('<th> </th>');
$("#list").append('</tr>');
$("#list").append('</thead>');
$("#list").append('<tbody>');
$("#list").append('<tr>');
$("#list").append('<td>' + item.Id + '</td>');
$("#list").append('<td>' + item.Name + '</td>');
$("#list").append('<td>备注</td>');
$("#list").append('<td>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
$("#list").append('</td>');
$("#list").append('</tr>');
$("#list").append('</tbody>');

$("#list").append('<tr>');
$("#list").append('<td>内容</td>');
$("#list").append('<td>' + item.Message + '</td>');
$("#list").append('</tr>');
$("#list").append('</table>');
);
var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回数据转成object类型)
var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage
var options =
bootstrapMajorVersion: 2, //版本
currentPage: currentPage, //当前页数
totalPages: pageCount, //总页数
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: "/OA/Setting/GetDate?id=" + page,
type: "Post",
data: "page=" + page,
success: function (data1)
if (data1 != null)
$.each(eval("(" + data + ")").list, function (index, item) //遍历返回的json
$("#list").append('<table id="data_table" class="table table-striped">');
$("#list").append('<thead>');
$("#list").append('<tr>');
$("#list").append('<th>Id</th>');
$("#list").append('<th>部门名称</th>');
$("#list").append('<th>备注</th>');
$("#list").append('<th> </th>');
$("#list").append('</tr>');
$("#list").append('</thead>');
$("#list").append('<tbody>');
$("#list").append('<tr>');
$("#list").append('<td>' + item.Id + '</td>');
$("#list").append('<td>' + item.Name + '</td>');
$("#list").append('<td>备注</td>');
$("#list").append('<td>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
$("#list").append('</td>');
$("#list").append('</tr>');
$("#list").append('</tbody>');

$("#list").append('<tr>');
$("#list").append('<td>内容</td>');
$("#list").append('<td>' + item.Message + '</td>');
$("#list").append('</tr>');
$("#list").append('</table>');
);


);

;
$('#example').bootstrapPaginator(options);


);
)
</script>

而在视图的主体部分便有两个div，一个用来呈现数据列表，一个用来放置选择页面的导航。
<div class="span9">
<label>部门列表</label>
<hr />
<div id="list"></div>

<div id="example"></div>
</div>

而后台这个GetDate的方法就像下面这样：
public ActionResult GetDate(int id, int? page)

int pageIndex = page ?? 1;//当前页
const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制
//获取需要展示的部门数据
IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.Id);
//得到数据的条数
int rowCount = list.Count();
//通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算
if(rowCount%pageSize!=0)

rowCount = rowCount / pageSize + 1;

else

rowCount = rowCount / pageSize;


//转成Json格式
var strResult = "\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JsonConvert.SerializeObject(list) + "";
return Json(strResult, JsonRequestBehavior.AllowGet);


这个方法还是有点缺陷的，可以写的更加完美，就好像上面那个pageSize这个可以通过读取配置文件web.config来全局修改，这样管理起来也方便，另外对于页面这种属性：页码，当前页，数据数量等等的信息，可以做一个类来存储，如果网站的项目比较大的话，这样更加方便我们去更改自己的代码。 参考技术B 没有用过这个呢。

JQuery 实现PPT效果，点跳目标页及翻页（待改进）

实现PPT效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test 10</title>
    <style>
        .container {
            width: 100%;
            height: 100%;
        }

        .contentDiv {
            margin: 20px auto;
            width: 100%;
            height: 1200px;
        }

        .contentDiv2 span {
            font-size: 30px;
            text-align: left;
        }

        .leftDiv {
            width: 20%;
            height: 100%;
            display: inline;
            float: left;
        }

        .rightDiv {
            width: 80%;
            height: 100%;
            display: inline;
            float: left;
        }

        .title2 {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
        }

        .contentDiv2 {
            display: none;
        }

        #mulu span {
            font-size: 30px;
        }

        .listFontSize {
            font-size: 20px;
        }

        a:link {
            font-size: 20px;
            color: #000000;
            text-decoration: none;
        }

        a:visited {
            font-size: 20px;
            color: #000000;
            text-decoration: none;
        }

        a:hover {
            font-size: 20px;
            color: #000000;
            text-decoration: none;
        }

        .container {
            background-color: lightgray;
        }
    </style>
</head>
<body>

    <div class="container">

        <div class="leftDiv">
            <a href="#" id="" onclick="Show(‘step1‘);">一、目&nbsp;&nbsp;录</a> <br />
            <a href="#" id="" onclick="Show(‘step2‘);"><span class="listFontSize">1、评估原则</span></a> <br />
            <a href="#" id="" onclick="Show(‘step3‘);"><span class="listFontSize">2、评估方法</span></a> <br />
            <a href="#" id="" onclick="Show(‘step4‘);"><span class="listFontSize">3、评估指标</span></a> <br />
            <br /><br /><br /><br /><br /><br /><br /><br />

            <a href="#" id="previousStep">上一页</a> <br />
            <a href="#" id="nextStep">下一页</a> <br />
        </div>

        <div class="rightDiv">

            <div>
                <div id="mulu" class="step step1" style="text-align:left">
                    <br /><br /><h1 class="title2" style="font-size:50px"> 目&nbsp;&nbsp;录 </h1><br /><br /><br /><br />

                    <span>? &nbsp;1111111111111111111111 </span><br /><br />
                </div>
            </div>

            <div>
                <div class="contentDiv2 step step2">
                    <br /><br /><div style="text-align:center"><label class="title2"> 评估原则 </label></div><br /><br /><br /><br />
                    <span>? &nbsp;22222222222222 </span><br /><br />
                </div>
            </div>

            <div>
                <div class="contentDiv2 step step3">
                    <br /><br /><div style="text-align:center"><label class="title2"> 评估方法 </label></div><br /><br /><br /><br />
                    <span>? &nbsp;3333333333333333333 </span><br /><br />
                </div>
            </div>

            <div>
                <div class="contentDiv2 step step4">
                    <br /><br /><div style="text-align:center"><label class="title2"> 评估指标 </label></div><br /><br /><br /><br />
                    <span>? &nbsp;4444444444444444444 </span><br /><br />

                </div>
            </div>

        </div>

    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <!--<script src="../../Script/plugins/jquery/jquery-1.9.1.min.js"></script>-->
    <script>
        $(function () {
            $("#previousStep").click(function () {
                previousStepclick();
            });

            $("#nextStep").click(function () {
                nextStepclick();
            });
        });

        function previousStepclick() {
            stepFunc("prev");
        }

        function nextStepclick() {
            stepFunc("next");
        }

        function stepFunc(prevOrNext) {
            var steps = $(".step");
            for (var i = 0; i < steps.length; i++) {
                var step = steps[i];
                var b1 = $(step).is(":hidden");
                if ($(step).is(":hidden")) {

                } else {
                    var e;
                    if (prevOrNext == "prev") {
                        e1 = $(step).parent().prev().children(".step")[0];
                    }
                    else if (prevOrNext == "next") {
                        e1 = $(step).parent().next().children(".step")[0];
                    }
                    if (typeof (e1) != ‘undefined‘) {
                        $(step).hide();
                        $(e1).show();
                        break;
                    }
                }
            }
        }

        function Show(step) {
            $(".step").each(function () {
                $(this).hide();
            });
            $("." + step).show();
        }

    </script>
</body>
</html>