zoukankan      html  css  js  c++  java
  • 一个最为简单的jquery 分页实现方法!可以用用于理解js分页的原理。

    html 页面需要的页面DOM

    <div id="pages" style="450px;margin:0 auto;"></div>
    </div>

    下面是ajax向后台传数据,成功返回数据的部分。(如有不懂请评论提问)

    function pull_data(channel_id,daterange,page){
    page = page || 1;


    $.ajax({
    url:window.location.href,
    data:{
    'channelid':channel_id,
    'daterange':daterange,
    'page':page
    },
    type:'POST',
    dataType:'json',

    success:function(object){
    // $('#loading').remove();
    $('#data-content tbody').html(' ');

    if (object.status == "success") {

    var str = "";

    var pageData=[];
    for(var i =0;i<object.data.length;i++){

    str = "<tr>
    <td>"+moment(object.data[i].report_date ).format('YYYY-M-D')+"</td>
    <td>"+object.data[i].appid+"</td>
    <td>"+object.data[i].gw_orderid+"</td>
    <td>"+object.data[i].dev_orderid+"</td>
    <td>"+object.data[i].goods_name+"</td>
    <td>"+object.data[i].pay_type+"</td>
    <td>"+object.data[i].pay_fee+"</td>
    <td>"+object.data[i].pay_result+"</td>
    <td>"+object.data[i].callback_result+"</td>
    <td><a href=''>编辑</a></td>
    </tr>";

    pageData.push[str];

    }

    $('#data-content tbody').html(str)
    //表结尾
     

    $('#pages').html(' ');


    var strpage ="";

    strpage = '<a id="pre" href ="#" >上一页</a>';
    for(var i=1;i<=PageCount;i++){
    strpage +='<a id="page" href="#" selectPage="'+i+'" >'+i+'</a>';

    }

    strpage +='<a id="next" href="#">下一页</a>';


    $('#pages').html(strpage);


    显示默认页(第一页)
    $('#table').empty().append(head);


    for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){

    $('#data-content tbody').append(pageData[i]);
    }

    $('#table').append(end);

    显示选择页的内容
    $('a').click(function(){

    var selectPage=$(this).attr('selectPage');

    $('#data-content tbody').html(' ');

    for(i=(selectPage-1)*PageSize;i<PageSize*selectPage;i++){
    $('#data-content tbody').append(pageData[i]);

    }

    });

  • 相关阅读:
    【2020-02-13】内容变了,但计划本身没变
    【2020-02-12】新的工作计划方式
    【2020-02-10】煮饭那点家常
    【2020-02-10】生活需要不断地相互协调
    nacicat premium 快捷键
    python 爬虫之 正则的一些小例子
    Python爬虫之Cookie和Session
    Python爬虫之关于登录那些事
    爬虫常用库之pyquery 库
    day 39 jq 学习入门2
  • 原文地址:https://www.cnblogs.com/Hondsome/p/6054540.html
Copyright © 2011-2022 走看看