ajax动态生成的表格如何做分页

yangfan321p 2017-08-25 02:41:17

有个查询页面，查询的数据是表格展示，ajax查询后append出来的表格，然后怎么给他们做分页？



 $.ajax({

                url: "/event/eventFindHis.do",

                type: "post",

                dataType: "json",

                async:false,  

                data: {

                    "id": eventId,

                    "customer_name": customer_name,

                    "customer_tel": customer_tel,

                    "title": title,

                    "acceptance_group": acceptance_group,

                    "handle_person": handle_person,

                    "state": state,

                    "status_reasons": status_reasons

                },

                success: function (result) { //status=1代表账号不存在0代表密码错误2代表登录成功

                    var data = result.data;

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

                        var id = data[i].eventId;

                        var trs = '';

                        trs += '<tr>';

                        trs += '<td><a id="'+data[i].id+'" href="javascript:void(0)" class="Inquiry_btn" onclick=view(this)>'+data[i].id+'</a></td>' ; //

                        trs += '<td>' + data[i].title + '</td>';

                        trs += '<td>' + data[i].event_type + '</td>'; //

                        trs += '<td>' + data[i].submit_time + '</td>'; //

                        trs += '<td>' + data[i].accept_group + '</td>';

                        trs += '<td>' + data[i].operator_person + '</td>';

                        trs += '<td>' + data[i].state + '</td>';

                        trs += '</tr>';

                        $("#jg").append(trs);



                    }

//                     var num=$("#jg").children().length;它原先的是itable.row但是抓取不到对象

//                     alert("num="+num);

                  //-----------------------------------

                        var itable = document.getElementById("jg");

                        var num= data.length;

//                         var num = "7";//表格所有行数(所有记录数)

                        var totalPage = 0;//总页数

                        var pageSize = "10";//每页显示行数

                        //总共分几页 

                        if(num/pageSize > parseInt(num/pageSize)){   

                                totalPage=parseInt(num/pageSize)+1;   

                           }else{   

                               totalPage=parseInt(num/pageSize);   

                           }   

                        var currentPage = "1";//当前页数

                        var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31 

                           var endRow = currentPage * pageSize;//结束显示的行   40

                           endRow = (endRow > num)? num : endRow;  

                           console.log(endRow);

                           //遍历显示数据实现分页

                        for(var i=1;i<(num+1);i++){   

                            var irow =$("#jg").children()[i-1];

                            if(i>=startRow && i<=endRow){

                                 irow.style.display = "block";    

                            }else{

                                 irow.style.display = "none";

                            }

                        }

                        var pageEnd = document.getElementById("pageEnd");

//                         alert("pageEnd="+pageEnd);

                        var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";

//                         alert("tempStr="+tempStr);

//                         alert("num="+num+"totalPage="+totalPage+"currentPage="+currentPage);

                        if(currentPage>1){

                            tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";

                            tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"

                        }else{

                            tempStr += "首页";

                            tempStr += "<上一页";    

                        }

                        if(currentPage<totalPage){

                            tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";

                            tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";

                        }else{

                            tempStr += "下一页>";

                            tempStr += "尾页";    

                        }

                        document.getElementById("barcon").innerHTML = tempStr;

                },

                error: function () {

                    alert("无数据");

                }



            });

		}