Javascript代码小小疑问（68）—AJAX分页

悬赏园豆：5 [已解决问题] 解决于 2016-02-20 14:52

在一个a.js文件里，用了一个对$.ajax();的重新封装方法（例如MyMethod(url, p, ShowLoading, HideLoading,onSucc,onError);）成功把数据填充在了<tr>上了。p为一个对象，var p ={sIndex,sLimit}; 根据这个“从第几个开始”，“每页几条”却Get的...

我的问题是：
分页如何用介入？比如一个分页有pageSize , curPage ,lastPage;等

Javascript jquery

问题补充：

  1 //页面加载时第一次加载数据，是成功的！
  2  MyMethod(url, p, ShowLoading, HideLoading, function(data) {
  3             var l = data.get.length;
  4             var page = l % 6 == 0 ? l : Math.floor(l / 6) + 1;
  5 
  6             oTbody.html("");
  7             var oHTML = "";
  8 
  9             for (var key = 0; key < l / (l % pageSize == 0 ? l : Math.floor(l / 6) + 1); key++) { //for循环直接遍历JSON数组
 10 
 11                 (function(index) {
 12                     if (data.get[index].project_id && typeof(data.get[index].project_id) != 'undefined' && data.get[index].project_name && typeof(data.get[index].project_name) != 'undefined' && data.get[index].pinyin && typeof(data.get[index].pinyin) != 'undefined' && data.get[index].game_type && typeof(data.get[index].game_type) != 'undefined' && data.get[index].hot_score && typeof(data.get[index].hot_score) != 'undefined') {
 13 
 14                         oHTML += "<tr class='contentlist'>";
 15                         oHTML += "<td>" + data.get[index].project_id + "</td>";
 16                         oHTML += "<td>" + data.get[index].project_name + "</td>";
 17                         oHTML += "<td>" + data.get[index].pinyin + "</td>";
 18                         oHTML += "<td>" + data.get[index].game_type + "</td>";
 19                         oHTML += "<td>" + data.get[index].hot_score + "</td>";
 20                         oHTML += "<td class='td_btn'>" + "<button type='button' class='del' name='del' value='删除'>删除</button><button type='button' class='mod' name='mod' value='修改'>修改</button>" + "</td>";
 21                         oHTML += "</tr>";
 22                     } else {
 23                         alert("值不为空");
 24                     };
 25 
 26                 })(key);
 27 
 28             };
 29 
 30             oTbody.html(oHTML);
 31 
 32             console.log(l);
 33 
 34         },
 35 
 36         function() {
 37             G_PopWnd.error("系统异常");
 38         }
 39     ); 
 40 
 41 
 42 var pageSize = 6; //每页显示的记录条数
 43     var curPage = 0;
 44     var lastPage;
 45     var direct = 0;
 46     var len;   
 47 
 48  function displayPage() {
 49         MyMethod(url, p, ShowLoading, HideLoading, function(data) {
 50                 var l = data.get.length;
 51                 var page = l % 6 == 0 ? l : Math.floor(l / 6) + 1;
 52 
 53                 if ((curPage <= 1 && direct == -1) || (curPage >= (l % 6 == 0 ? l : Math.floor(l / 6) + 1) && direct == 1)) {
 54                     direct = 0;
 55                     alert("已经是第一页或者最后一页了");
 56                     return;
 57                 }
 58                 lastPage = curPage;
 59                 curPage = (curPage + direct + l) % l;
 60 
 61                 var begin = (curPage - 1) * pageSize; //起始记录号
 62                 var end = begin + pageSize;
 63                 if (end > page) {
 64                     end = page;
 65 
 66                     // $("#ss_tbody tr").hide();
 67 
 68                 } else {
 69 
 70                     $("#ss_tbody tr").each(function(i) {
 71                         if (i >= begin && i < end) { //显示第page页的记录
 72                             $(this).show();
 73                             console.log($(this));
 74                         }
 75 
 76                         $("#paging_curr").text(curPage); //当前页
 77                     });
 78                 };
 79 
 80             },
 81             function() {
 82                 G_PopWnd.error("系统异常");
 83             });
 84 
 85     };
 86 
 87 //分页点击也有效果效果，但表格无刷新，还是第一次加载进来的几条，点击下一页时，一行记录也没了？；
 88 
 89 $('first').click(function(){
 90   //TODO
 91 });
 92 
 93 $('next').click(function(){
 94   MyMethod(url, p, ShowLoading, HideLoading, function(data) {
 95   //TODO
 96 displayPage();
 97 },function(){
 98      G_PopWnd.error("系统异常");
 99     });
100     
101 });
102 
103 $('prev').click(function(){
104   //TODO
105 });
106 
107 $('last').click(function(){
108   //TODO
109 });

希望大牛给我一个代码结构框架...

Coca-code | 初学一级 | 园豆：10
提问于：2016-01-23 13:40

< >

最佳答案

var loadData = function(pageIndex, pageSize){
  //抓取数据
  var data = []; //ajax来的数据
  setPagingInfo()//更新分页信息
  bindData(data);
}

var setPagingInfo = function(){
  //设置分页
}

var bindData = function(){
  
};

//分页点击事件
loadData(pageIndex, pageSize);

收获园豆：5

幻天芒 | 高人七级 |园豆：37207 | 2016-01-25 21:58

感谢回复，明天我试试，但分暂不给哦~

Coca-code | 园豆：10 (初学一级) | 2016-01-25 22:31

var loadData = function(pageIndex, pageSize) {
    //抓取数据
    var myData = []; //AJAX来的数据


    MyAdminPost(url, p, ShowLoading, HideLoading, function(data) { //AJAX


            var jsonObj = eval(data.get);

            for (var key = 0;; key < jsonObj.length; key++) {

                (function(index) {

                    myData.push({

                        "project_id": jsonObj[index].project_id,

                        "project_name": jsonObj[index].project_name,

                        "pinyin": jsonObj[index].pinyin,

                        "game_type": jsonObj[index].game_type,

                        "hot_score": jsonObj[index].hot_score
                    });

                })(key);

            };
        },

        function() {

            G_PopWnd.error("系统异常");
        });


    setPagingInfo() //更新分页信息

    bindData(myData);
};



var setPagingInfo = function() { //设置分页

    var pageSize = 10; //每页显示的记录条数
    var curPage = 0;
    var lastPage;
    var direct = 0;
    var len;
    var page;

    len = $("#ss_table tr").length;
    page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数，计算页数
    //  alert("page==="+page);
    curPage = 1;
    displayPage(1); //显示第一页
    $("#paging_first").click(function() { //首页
        curPage = 1;
        displayPage();
    });
    $("#paging_prev").click(function() { //上页
        direct = -1;
        displayPage();
    });
    $("#paging_next").click(function() { //下页
        direct = 1;
        displayPage();
    });
    $("#paging_last").click(function() { //尾页
        curPage = page;
        displayPage();
    });


    function displayPage() {
        if ((curPage <= 1 && direct == -1) || (curPage >= page && direct == 1)) {
            direct = 0;
            alert("已经是第一页或者最后一页了");
            return;
        }
        lastPage = curPage;
        curPage = (curPage + direct + len) % len;
        var begin = (curPage - 1) * pageSize; //起始记录号
        var end = begin + pageSize;
        if (end > len) end = len;
        $("#table tr").hide();
        $("#table tr").each(function(i) {
            if (i >= begin && i < end) //显示第page页的记录
                $(this).show();
        });

    }
};



var bindData = function() {
    oTbody.html("");
    var oHTML = "";


    for (var key = 0; key < len; key++) { //FOR循环直接遍历“项”

        (function(index) {

            oHTML += "<tr class='contentlist'>";
            oHTML += "<td>" + data.get[index].project_id + "</td>";
            oHTML += "<td>" + data.get[index].project_name + "</td>";
            oHTML += "<td>" + data.get[index].pinyin + "</td>";
            oHTML += "<td>" + data.get[index].game_type + "</td>";
            oHTML += "<td>" + data.get[index].hot_score + "</td>";
            oHTML += "<td class='td_btn'>" + "<button type='button' class='del' name='del' value='删除'>删除</button><button type='button' class='mod' name='mod' value='修改'>修改</button>" + "</td>";
            oHTML += "</tr>";

        })(key);

        oTbody.html(oHTML);

    };


};

//分页点击事件
loadData(pageIndex, pageSize);

/*-------------------------
loadData(pageIndex, pageSize){
//TODO
};
的参数怎么和分页参数挂钩啊？后台规定了var p ={sIndex: xx;Slimit:xx};来获取JSON数据，现在我要根据分页逻辑的参数来显示数据，怎么做啊？
-----------------------------------*/

Coca-code | 园豆：10 (初学一级) | 2016-01-26 09:54

//最新

 /*******************************************************************************************************/

    var loadData = function(pageIndex, pageSize) {
        //抓取数据
        var myData = []; //AJAX来的数据


        MyAdminPost(url, p, ShowLoading, HideLoading, function(data) { //AJAX


                var jsonObj = eval(data.get);

                for (var key = 0;; key < jsonObj.length; key++) {

                    (function(index) {

                        myData.push({

                            "project_id": jsonObj[index].project_id,

                            "project_name": jsonObj[index].project_name,

                            "pinyin": jsonObj[index].pinyin,

                            "game_type": jsonObj[index].game_type,

                            "hot_score": jsonObj[index].hot_score
                        });

                    })(key);

                };
            },

            function() {

                G_PopWnd.error("系统异常");
            });


        setPagingInfo() //更新分页信息

        bindData(myData);
    };



    var setPagingInfo = function() { //设置分页

        var pageSize = 10; //每页显示的记录条数
        var curPage = 0;
        var lastPage;
        var direct = 0;
        var len;
        var page;

        len = $("#ss_table tr").length;

        page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数，计算页数
        //  alert("page==="+page);
        curPage = 1;

        displayPage(1); //显示第一页

        $("#paging_first").click(function() { //首页

            curPage = 1;

            displayPage();
        });

        $("#paging_prev").click(function() { //上页

            direct = -1;

            displayPage();
        });

        $("#paging_next").click(function() { //下页

            direct = 1;

            displayPage();
        });

        $("#paging_last").click(function() { //尾页

            curPage = page;

            displayPage();
        });


        function displayPage() {

            if ((curPage <= 1 && direct == -1) || (curPage >= page && direct == 1)) {

                direct = 0;

                alert("已经是第一页或者最后一页了");

                return;
            }

            lastPage = curPage;
            curPage = (curPage + direct + len) % len;

            var begin = (curPage - 1) * pageSize; //起始记录号
            var end = begin + pageSize;

            if (end > len) end = len;

            $("#ss_table tr").hide();
            $("#ss_table tr").each(function(i) {

                if (i >= begin && i < end) //显示第page页的记录
                    $(this).show();
            });

        }
    };



    var bindData = function() {

        oTbody.html("");

        var oHTML = "";


        for (var key = 0; key < len; key++) { //FOR循环直接遍历“项”

            (function(index) {

                oHTML += "<tr class='contentlist'>";
                oHTML += "<td>" + data.get[index].project_id + "</td>";
                oHTML += "<td>" + data.get[index].project_name + "</td>";
                oHTML += "<td>" + data.get[index].pinyin + "</td>";
                oHTML += "<td>" + data.get[index].game_type + "</td>";
                oHTML += "<td>" + data.get[index].hot_score + "</td>";
                oHTML += "<td class='td_btn'>" + "<button type='button' class='del' name='del' value='删除'>删除</button><button type='button' class='mod' name='mod' value='修改'>修改</button>" + "</td>";
                oHTML += "</tr>";

            })(key);

            oTbody.html(oHTML);

        };

    };

    //分页点击事件
    loadData(pageIndex, pageSize);


    /*******************************************************************************************************/

Coca-code | 园豆：10 (初学一级) | 2016-01-26 10:18

@Coca-code: 分页信息就一个pageSize和pageIndex就够了哇。

幻天芒 | 园豆：37207 (高人七级) | 2016-01-26 10:37

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

Javascript代码小小疑问（68）—AJAX分页

欢迎，请先登录或者注册。