Bootstrap分页插件--Bootstrap Paginator

史同化
2023-12-01

1.在视图上引入bootstrap.css、bootstrap-pageinator.js、jquery.min.js

<link href="css/bootstrap.css" rel="stylesheet">
2. <script type="text/javascript" src="js/jquery-1.8.1.js"></script>
3. <script type="text/javascript" src="js/bootstrap-paginator.js"></script>
2.在视图的主体部分放两个div,一个用来呈现数据列表,一个用来放置选择页面的导航。

<div class="span9">
        <label>信息列表</label>
        <hr />
        <div id="list"></div>

        <div id="example"></div>
    </div>
3.分页js的编写

<script>
    $(function () {
        var carId = 1;
        $.ajax({
            url: "GetData",
            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>'+item.age+'</td>');
                        $("#list").append('<td>');
                        $("#list").append('<button class="btn btn-warning" οnclick="Edit(' + item.Id + ' );">修改</button>');
                        $("#list").append('<button class="btn btn-warning" οnclick="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>' + item.age+ '</td>');
                                            $("#list").append('<td>');
                                            $("#list").append('<button class="btn btn-warning" οnclick="Edit(' + item.Id + ' );">修改</button>');
                                            $("#list").append('<button class="btn btn-warning" οnclick="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>
4. 后台处理请求的方法
public String GetDate(int id, int page)
        {
            int pageIndex = page ;//当前页
            const int pageSize = 2;//这里用来设置每页要展示的数据数量,建议把这个写到web.config中来全局控制
            //获取需要展示的数据
            List<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, 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);
        }
5.Paginator组件参数

参数名 数据类型 默认值 描述
size string "normal" 设置控件的显示大小,是个字符串. 允许的值: minismallnormal,large。值:mini版的、小号的、正常的、大号的。
alignment string "left" 设置控件的对齐方式,是个字符串, 允许的值用: leftcenter andright. 即:左对齐、居中对齐、右对齐。
itemContainerClass function   该参数接收一个函数,返回一个字符串,该字符串是一个我们自定义的class类样式。当控件内的每个操纵按钮被渲染(render)时,都会调用该函数,同时把有关该按钮的信息作为参数传入。参数:type,pagecurrent 。type为该控件的操作按钮的类型,如上图所示的五种类型:first、prev、page、next、last。page为该按钮所属第几页。current 指示整个控件的当前页是第几页。
currentPage number 1 设置当前页.
numberOfPages number 5 设置控件显示的页码数.即:类型为"page"的操作按钮的数量。
totalPages number 1 设置总页数.
pageUrl function   实际上,控件内的每个操作按钮最终会被渲染成超链接,该参数的作用就是设置超链接的链接地址。该参数是个函数,参数为:type,pagecurrent。这样我们就可以通过这个函数为每个操作按钮动态设置链接地址。如:"http://example.com/list/page/"+page
shouldShowPage boolean/function true 该参数用于设置某个操作按钮是否显示,可是个布尔值也可是个函数。当为true时,显示。当为false时,不显示。如果该参数是个函数,需要返回个布尔值,通过这个返回值判断是否显示。函数有3个参数: typepagecurrent。使用函数的好处是,可以对每个操作按钮进行显示控制。
itemTexts function   控制每个操作按钮的显示文字。是个函数,有3个参数: typepagecurrent。通过这个参数我们就可以将操作按钮上的英文改为中文,如first-->首页,last-->尾页。
tooltipTitles function   设置操作按钮的title属性。是个函数,有3个参数: typepagecurrent。
useBootstrapTooltip boolean false 设置是否使用Bootstrap内置的tooltip。 true是使用,false是不使用,默认是不使用。注意:如果使用,则需要引入bootstrap-tooltip.js插件。
bootstrapTooltipOptions object  
    Default:
    {
        animation: true,
        html: true,
        placement: 'top',
        selector: false,
        title: "",
        container: false }
                    

该参数是个js对象。当参数useBootstrapTooltiptrue会将该对象传给Bootstrap的bootstrap-tooltip.js插件。

onPageClicked function   为操作按钮绑定click事件。回调函数的参数:eventoriginalEventtype,page。
onPageChanged function   为操作按钮绑定页码改变事件,回调函数的参数:eventoldPagenewPage。

公共命令

另外该插件还提供了几个公共的命令,可以通过如下方法调用,如:$('#example').bootstrapPaginator("show",3) 调用show命令$('#example').bootstrapPaginator("getPages") 调用getPages命令

命令名 参数 返回值 描述
show page   show命令用于直接跳转到特定的page,与直接点击操作按钮的效果是一样的。使用方法,如:$('#example').bootstrapPaginator("show",3) 直接跳转到第3页,$('#example').bootstrapPaginator("show",100)直接跳转到100页。 
showFirst     showFirst 命令用于直接跳转到首页,与点击first按钮相同。使用方法:$('#example').bootstrapPaginator("showFirst") 
showPrevious     showPrevious 命令用于直接跳转到上一页。使用方法:$('#example').bootstrapPaginator("showPrevious") 
showNext     showNext命令用于直接跳转到下一页。
showLast     showLast 命令用于直接跳转到上一页。
getPages   object getPages命令用于返回当前控件中显示的页码,以数组形式返回。使用方法:var arra = $('#example').bootstrapPaginator("getPages") 
setOptions object   setOptions 命令用于重新设置参数,使用方法:$('#example').bootstrapPaginator("setOptions",newoptions)



事件Events

Bootstrap Paginator 提供了俩个事件:page-clickedpage-changed。这俩个事件作为参数使用,分别对应onPageClickedonPageChanged。

事件名 回调函数 描述
page-clicked function(eventoriginalEventtypepage) 同上文。另外,参数eventoriginalEvent是俩个jquery事件对象,可参考jquery相关文档
page-changed function(eventoldPagenewPage) 同上文


 类似资料: