zoukankan      html  css  js  c++  java
  • bootstrap分页的使用

    var totalCount = "";
    //这块table表单业务,可忽略
    function getInsAppoint(){ $.ajax({ type: "post", data : JSON.stringify({ 'offset':'0', 'limit':'6', 'instrumentName':$("#text").val() }), contentType:"application/json", dataType: 'json', url: '/jk/pb/instrumentInfo/appointList', async : false, success:function(data){ var obj = eval(data); var list = obj.rows; totalCount = obj.total; $("#totalCount").text(totalCount); initialize(list); pageLimit(totalCount,1);//数据回显时第一页显示的数据 } }); } function pageLimit(totalCount,currentPage){ var totalPage = 0;//列表的总页数 var pageSize = 6;//每页显示6条数据 if (totalCount/pageSize > parseInt(totalCount/pageSize)){ totalPage = parseInt(totalCount/pageSize)+1; }else{ totalPage = parseInt(totalCount/pageSize); } $('.pagination').bootstrapPaginator({//将id为pageLimit的ul元素设置为分页插件 currentPage: currentPage,//设置当前页码 size: "small",//设置控件的显示大小, bootstrapMajorVersion: 3,//当前版本 alignment: "right",//设置控件的对齐方式 totalPages: totalPage,//设置总页数. itemTexts: function (type, page, current) {//控制每个操作按钮的显示文字。是个函数,有3个参数: type, page, current。 //通过这个参数我们就可以将操作按钮上的英文改为中文,如first-->首页,last-->尾页。 switch (type) { case "first": return "首页"; case "prev": return "<"; case "next": return ">"; case "last": return "末页"; case "page": return page; } }, onPageClicked: function (event, originalEvent, type, page) {//为操作按钮绑定click事件。 //回调函数的参数:event, originalEvent, type,page。 $.ajax({ async: true, url: "/jk/pb/instrumentInfo/appointList", type: "post", contentType:"application/json", dataType : "json", data: JSON.stringify({ 'offset':(page-1)*6, 'limit':'6', 'instrumentName':$("#text").val() }), cache: false, success: function (data) { var obj = eval(data); var list = obj.rows; totalCount = obj.total; initialize(list); pageLimit(totalCount,page); } }); } }); }

    业务

    function initialize(list) {
            var str = "";
            for (var i = 0; i < list.length; i++) {
                var applyStatus = list[i].entryApplyStatus;
                var applyTime = "";
                var uploaded = "";
                var imageUrl = list[i].imageUrl;
                if (imageUrl == null || imageUrl.length != 0){
                    imageUrl = "<img src='/img/instrument.png'>";
                } else {
                    imageUrl = "<img src='"+ list[i].imageUrl +"'>";
                }
                if (applyStatus == "1"){
                    uploaded = "<button type='button' class='btn btn-link'>审核中</button>"
                } else if(applyStatus == "2"){
                    applyTime = "<a onClick='makeApply("+list[i].instrumentId+")'>机时</a>"
                    uploaded = "<button type='button' class='btn btn-link'>已上传</button>"
                } else if(applyStatus == "3"){
                    uploaded = "<button type='button' class='btn btn-link' onClick='entryApply("+list[i].instrumentId+")'>被驳回</button>"
                } else {
                    uploaded = "<button type='button' class='btn btn-link' onClick='entryApply("+list[i].instrumentId+")'>未上传</button>"
                }
                str += "<div class='col-md-4'>"
                        + "<div class='item'>"
                        + imageUrl
                        + "<div class='item-title inline'>"
                        + "<h4 class='inline'>"+ list[i].instrumentName+"</h4>"
                        + "</div>"
                        + "<div class='item-subtitle inline'>"
                        + "<img src='/img/timg.jpg'>"
                        + applyTime
                        /*+ " <a href='###'>送样</a>"*/
                        + "</div><p>"+ list[i].useIrection+"</p>"
                        + "<div class='item-footer'>"
                        + "<button type='button' class='btn btn-link'>评论(10)</button>"
                        + "<div class='upload inline'>"
                        + "<img src='/img/upload.png'>"
                        + uploaded
                        + "</div></div></div></div>";
            }
            $("#instrumentInfoAppoint").html(str);
        }
  • 相关阅读:
    冒泡排序
    选择排序
    算法分析(54页)
    算法设计分析(44页)
    算法设计分析(44页)
    数据结构——算法设计(12页)方案三
    数据结构——算法设计(12页)方案三
    区间dp
    区间dp
    动态规划的进一步理解
  • 原文地址:https://www.cnblogs.com/person008/p/11926464.html
Copyright © 2011-2022 走看看