zoukankan      html  css  js  c++  java
  • bootstrap-paginator分页插件的两种使用方式

    分页有两种方式:

    1. 前台分页:ajax一次请求获取全部数据,适合少量数据(万条数据以下);

    $.ajax({
            type: "GET",
            url: "",//后台接口地址
            dataType: "json",
            success: function (msg) {
                var pages = Math.ceil(msg.data / 5);//data是数据总量  
                var element = $('#id');//对应ul的id 
                element.bootstrapPaginator({
                    bootstrapMajorVersion: 3,//bootstrap版本
                    currentPage: page,//当前页面  
                    numberOfPages: 5,//一页显示几个按钮(在ul里面生成5个li)  
                    totalPages: pages //总页数 
                });
            }
        });
    

      注意:1. bootstrap3中分页的HTML部分要求使用ul标签;2. 前台写分页算法。

    2. 后台分页:发送多次ajax,每次获取指定页数的数据(万条数据以上)。

    $('#id').bootstrapPaginator({
                    bootstrapMajorVersion: 3,//bootstrap版本
                    currentPage: 1,//当前页码
                    totalPages: data.cn,//总页数(后台传过来的数据)
                    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;
                        }
                    },//改写分页按钮字样
                    onPageClicked: function (event, originalEvent, type, page) {
                        $.ajax({
                            url: '../../interface/xw_zxdt_list.php',
                            type: 'post',
                            data: {page: page},
                            dataType: 'json',
                            success: function (data) {
                                tplData(data);//处理成功返回的数据
                            }
                        });
                    }
                });
    

      注意:1. bootstrap3中分页的HTML部分要求使用ul标签;2. 后台写分页算法。

  • 相关阅读:
    MYSQL查询表信息
    认识WCF
    asp.net mvc 模型验证注解,表单提交
    asp.net mvc 防止开放重定向
    asp.net webForm登录授权
    C# 压缩文件与字节互转
    C#将字节流加密解密
    获取数据库表详细信息、存储过程、视图、的sql
    Mvc4学习笔记一(Ajax.ActionLink)
    java开发之提高java和mysql代码性能和质量
  • 原文地址:https://www.cnblogs.com/crf-Aaron/p/7833500.html
Copyright © 2011-2022 走看看