Bootstrap 分页功能

简介: function bootstrappage() { var options = { currentPage: currentPage, totalPages: totalPages, size: 'normal', ...
function bootstrappage() {
    var options = {
        currentPage: currentPage,
        totalPages: totalPages,
        size: 'normal',
        itemContainerClass: function (type, page, current) {
            return (page === current) ? "active" : "pointer-cursor";
        },
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first":
                    return "First";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "Last";
                case "page":
                    return page;
            }
        },
        shouldShowPage: function (type, page, current) {
            switch (type) {
                case "first":
                case "last":
                    return false;
                default:
                    return true;
            }
        },
        onPageClicked: function (e, originalEvent, type, page) {
            currentPage = page;
            zwobj.url = "../../Handler/PostsHandler.ashx?action=GetPosts";
            zwobj.data = { current: currentPage, total: 10 };
            ajaxData();
        }
    };
    $('#example').bootstrapPaginator(options);
}

//----------------------------  后台返回方法  ---------------------------------

function ajax_GetPosts(data) {
    $(".table tbody").html("");
    var html = "";
    var len = data.Data.length;
    for (var i = 0; i < len; i++) {
        html += "<tr>" +
                "<td><a href='#'>" + data.Data[i].Title + "</a></td>" +
                "<td>" + eval("new " + data.Data[i].CreateDt.split('/')[1]).Format("yyyy-MM-dd") + "</td>" +
                "<td>" + data.Data[i].ReplyCount + "/" + data.Data[i].ViewCount + "</td>" +
                "<td>" + data.Data[i].UserName + "</td></tr>";
    }
    $(".table tbody").html(html);
    var total = parseInt(data.Other);
    totalPages = (total / 10) + 1;
    bootstrappage();
}

 

目录
相关文章
|
10月前
|
前端开发 JavaScript 数据处理
bootstrap实现分页(实例)
bootstrap实现分页(实例)
86 0
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
95 0
Bootstrap5 分页3
分页的对齐方式可以通过添加不同的类来实现,默认为左对齐,居中对齐需添加 `justify-content-center` 类,右对齐则添加 `justify-content-end` 类。面包屑导航通过 `.breadcrumb` 和 `.breadcrumb-item` 类进行设置,用于显示当前页面在网站中的位置。
|
4月前
|
前端开发
Bootstrap5 分页1
Bootstrap 5 提供了简单易用的分页组件。通过在 `&lt;ul&gt;` 元素上添加 `.pagination` 类,并在 `&lt;li&gt;` 元素上添加 `.page-item` 类,以及在 `&lt;a&gt;` 标签上添加 `.page-link` 类,即可实现基本的分页效果。使用 `.active` 类可以高亮显示当前页。
|
4月前
|
前端开发 PHP
10 PHP结合bootstrap完成分页
路老师分享了如何使用PHP实现CSDN问答列表的分页功能。首先,通过编写 `index.php` 文件,定义数据和分页逻辑。接着,安装 Composer 并配置 PHP 包管理工具,以引入 `jasongrimes/paginator` 分页插件。最后,展示分页效果并确保代码路径正确。下篇将介绍 PHP 和 Web 页面的交互。
46 0
Bootstrap5 分页2
使用 `.disabled` 类可使分页链接不可点击。通过 `.pagination-lg` 和 `.pagination-sm` 类可调整分页条目的大小,分别设置为大字体和小字体。示例代码展示了如何实现这些效果。
|
前端开发
bootstrap+fileinput插件实现可预览上传照片功能
bootstrap+fileinput插件实现可预览上传照片功能
158 0
|
10月前
|
前端开发
Bootstrap 5 保姆级教程(七):分页 & 列表组
Bootstrap 5 保姆级教程(七):分页 & 列表组
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
51 0