zoukankan      html  css  js  c++  java
  • 分页的代码


    //分页
    var displayPart = $('#commitDisplay');
    var totalPage = $('.totalPage');
    var cacheNum = 1,pNum;
    var pageObj = $('.pageObj');
    var pageObjLi = $('.pageObj li');
    var noContent = $('.noContent');
    var firstPage = $(".firstPage");
    var prevPage = $(".prevPage");
    var nextPage = $(".nextPage");
    var lastPage = $(".lastPage");
    var keuInput = $(".keuInput");
    var btnSure = $(".btnSure");
    var forumid = $('#forumId').val();
    var prepage = 10;
    var displayCount;
    var maxPage = 5;
    var pageDiv = $('.page');
    var postPage = 0;

    function insertCommon ( json ){

    var html ='';

    var commom = json.data;

    for ( var i = 0 ;i<commom.length; i++ ){

    html += '<div class="topic-post clearfix detail-reply">';
    html += '<article class="boxed">';
    html += '<div class="topic-avatar">';
    html += '<a href="'+centerAddr+commom[i].authorid+'">';

    if ( commom[i].thumb ){

    html += '<img width="45" height="45" src="'+commom[i].thumb+'_120X120.png" class="avatar"/>';

    }else{

    if ( commom[i].sex == 2 ){

    html += '<img width="45" height="45" src="'+user_woman_img+'" class="avatar"/>';

    }else{

    html += '<img width="45" height="45" src="'+user_man_img+'" class="avatar"/>';

    }

    }
    if ( commom[i].authentication == 2 ){

    html += '<img class="forum-vip-sm" src="'+yVip+'" alt="y-vip-sm" width="14" height="14">';

    }else if ( commom[i].authentication == 1 ){

    html += '<img class="forum-vip-sm" src="'+bVip+'" alt="y-vip-sm" width="14" height="14">';

    }

    html += '</a></div>';
    html += '<div class="topic-body clearfix">';
    html += '<div class="topic-meta-data">';
    html += '<div class="names">';
    html += '<span class="first">';
    html += '<a href="'+centerAddr+commom[i].authorid+'">';
    html += '<span>'+commom[i].nickname+'</span>';
    html += '</a></span></div>';

    html += '<div class="post-info">';
    html += '<span class="relative-date">'+time_format( commom[i].create_time )+'</span>';
    html += '</div></div>';

    html += '<div class="detail-regular">';
    html += '<div class="cooked">'+commom[i].content+'</div>';
    html += '</div></div></article></div>';
    }

    return html;

    }


    // 拿到总的数据可以分多少页的数据
    function startGetData(page){
    $.ajax({
    data : { page:page,prepage:prepage,forumid:forumid },
    url : '/bbs/show-common',
    type : 'get',
    success : function (json){

    var json = $.parseJSON(json);

    var total = json.total;

    var res = json.data;

    if ( total <= prepage && ( total > 0) ){

    $('.allCommit').addClass('active');
    displayCount = res.length;
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");
    pageDiv.addClass('hidden');

    pNum = 1;

    }else if ( total == 0 ){


    pageDiv.addClass('hidden');
    // noContent.removeClass("hide");
    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");

    return;
    }
    else {

    pageDiv.removeClass('hidden');
    pNum = Math.ceil( total / prepage );

    }

    displayPart.html( insertCommon(json) );
    pageObj.empty();
    for ( var i = 0; i < pNum; i++ ){
    pageObj.append( pageFun(i+1) );
    }
    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    pageObj.find("li:first-child").addClass("active");
    totalPage.text(pNum);

    showPageindex( 0,maxPage,0 );

    }

    })

    }

    function pageFun( i ){
    var pageHtml = '<li class="pageNum">'+i+'</li>';
    return pageHtml;
    }

    //页码切换
    pageObj.on('click','li',function(){
    $(this).addClass("active");
    displayPart.empty();
    $(this).siblings("li").removeClass('active');

    cacheNum = $(this).text();

    if( $(this).text() == 1 ){

    if ( pNum == 1 ) {

    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");

    requestPage($(this).text());

    return;

    }else {

    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    lastPage.removeClass("disabled");
    nextPage.removeClass("disabled");

    requestPage($(this).text());

    return;

    }

    }else if( $(this).text() == pNum ){

    firstPage.removeClass("disabled");
    prevPage.removeClass("disabled");
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");

    requestPage($(this).text());


    } else {

    firstPage.removeClass("disabled");
    prevPage.removeClass("disabled");
    lastPage.removeClass("disabled");
    nextPage.removeClass("disabled");

    requestPage( $(this).text() );
    }

    showPageindex(0,maxPage,$(this).text());

    });

    //上一页
    prevPage.on('click',function(){

    if( cacheNum == 1 ){
    return;
    }

    if(cacheNum == 2){
    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    }

    displayPart.empty();
    cacheNum--;
    lastPage.removeClass("disabled");
    nextPage.removeClass("disabled");
    $(".pageObj li").eq(cacheNum-1).addClass("active");
    $(".pageObj li").eq(cacheNum-1).siblings("li").removeClass("active");

    requestPage( cacheNum );
    showPageindex(0,maxPage,cacheNum);

    });

    /*下一页*/
    nextPage.on('click',function(){

    if(cacheNum == pNum){
    return;
    }
    displayPart.empty();
    cacheNum++;
    $(".pageObj li").eq(cacheNum-1).addClass("active");
    $(".pageObj li").eq(cacheNum-1).siblings("li").removeClass("active");

    if(cacheNum == pNum ){
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");
    firstPage.removeClass("disabled");
    prevPage.removeClass("disabled");

    requestPage( cacheNum );
    }else{
    requestPage( cacheNum );
    firstPage.removeClass("disabled");
    prevPage.removeClass("disabled");
    }
    showPageindex(0,maxPage,cacheNum);

    });

    //首页
    firstPage.on('click',function(){
    displayPart.empty();
    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    lastPage.removeClass("disabled");
    nextPage.removeClass("disabled");

    $(".pageObj li").eq(0).addClass("active");
    $(".pageObj li").eq(0).siblings("li").removeClass("active");

    requestPage(1);
    cacheNum = 1;
    showPageindex(0,maxPage,0);

    });

    //尾页
    lastPage.on('click',function(){

    displayPart.empty();
    firstPage.removeClass("disabled");
    prevPage.removeClass("disabled");
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");

    $(".pageObj li").eq(pNum-1).addClass("active");
    $(".pageObj li").eq(pNum-1).siblings("li").removeClass("active");

    cacheNum = pNum;

    requestPage(pNum);

    showPageindex(0,maxPage,pNum);

    });

    //确认

    btnSure.on('click',function(){

    var val = keuInput.val();

    if((val == "")||val<=0){

    keuInput.val(1);

    popupTip('错误','请输入有效页码');

    return
    }

    if((Number(val)>pNum)){


    val=pNum

    }

    displayPart.empty();

    $(".pageObj li").eq(val-1).addClass("active");
    $(".pageObj li").eq(val-1).siblings("li").removeClass("active");

    cacheNum = val;

    showPageindex(0,maxPage,val);

    if(val == 1){

    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    lastPage.removeClass("disabled");
    nextPage.removeClass("disabled");
    if ( pNum == 1 ){

    firstPage.addClass("disabled");
    prevPage.addClass("disabled");
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");

    }
    }else if ( val == pNum ){

    firstPage.removeClass("disabled");
    prevPage.removeClass("disabled");
    lastPage.addClass("disabled");
    nextPage.addClass("disabled");
    requestPage(val);


    return;
    }else {

    firstPage.removeClass("disabled");
    prevPage.removeClass("disabled");
    lastPage.removeClass("disabled");
    nextPage.removeClass("disabled");

    }

    requestPage(val);


    });

    startGetData(1);

    //拿到数据后渲染到页面的数据

    function requestPage ( index ){

    $.ajax({
    data : { page:index,prepage:prepage,forumid:forumid },
    url : '/bbs/show-common',
    type : 'get',
    success : function( json ){

    var json = $.parseJSON(json);

    displayPart.html(insertCommon( json ));
    }

    });

    keuInput.val(index);

    }

    //max一页几条,index第几页
    function showPageindex(min, max, index){

    if (index <= Math.ceil(max / 2)){
    min = 0;
    max = max;
    }
    else if (pNum - index < Math.ceil(max / 2)) {
    min = pNum -max;
    max = pNum;
    }
    else {
    min = Math.round(index - max / 2)-1;
    max = Math.round(Number(index) + Number(max / 2))-1;
    }
    $('.pageObj li').hide();
    for( var i = min ; i < max; i++ ){
    $(".pageObj li").eq(i).show();
    }
    }


    });


    //点击之后删除
    $( document ).on( 'click', '.update-det', function () {
    console.log(1);
    var _this=this.id;
    $.ajax({
    data:{
    notityid:_this,
    type:'del',
    },
    url:'/notity/change-notity',
    type:'post',
    success:function(data){
    $('.update_'+ _this ).empty();

    }
    })

    <!--location.reload();-->
    });

  • 相关阅读:
    利用SHELL的PROMPT_COMMAND添加日志审计功能,实时记录任何用户的操作到日志文件中
    PBR Step by Step( 五)Phong反射模型
    PBR Step by Step(四)Lambertian反射模型
    PBR Step by Step(三)BRDFs
    PBR Step by Step(二)辐射度
    PBR Step by Step(一)立体角
    图形管线之旅 Part6
    图形管线之旅 Part5
    图形管线之旅 Part4
    图形管线之旅 Part3
  • 原文地址:https://www.cnblogs.com/zouyun/p/7643189.html
Copyright © 2011-2022 走看看