js分页

1、:引包<script src="<%=basePath%>/res/js/page.js"></script>

2、前台样式:

<div class="pageBox1"  class="independent-bottom-right" style="width: 910px;">
            <ul class="pageDiv clearfix">
    
            </ul>
        <div class="notContent hide">
            无数据
        </div>
        <div class="page" style="margin-top:30px">
            <ul class="pageMenu clearfix ">
                <li class="firstPage">首页</li>
                <li class="prevPage "> < </li>
                <div class="pageObj clearfix">
                    
                </div>
                <li class="nextPage "> > </li>
                <li class="lastPage ">尾页</li>
                <li class="last " style="font-size: 14px;"><span class="totalPage"></span>页,跳转至 <input type="number" class="keuInput" value="1">
                    <button type="button" class="btnSure">确定</button>
                </li>
            </ul>
        </div>
    </div>
<script>
$(function(){
    var id=<%=request.getParameter("id") %>;
    var str='';
    if(id!=null){
        str='?id='+id;
    }
      
    
    $(".pageBox1").pageFun({  /*在本地服务器上才能访问哦*/
        interFace:"<%=basePath%>/teach/question/listquestionajax1"+str,  /*接口*/
        //interFace:{${classlist}},
        displayCount:9,  /*每页显示总条数*/
        maxPage:5,/*每次最多加载多少页*/
        dataFun:function(data){
            console.log(data);
            var dataHtml = "<ul id='cf'>"+
                "<li id='ml0'>"+
                    "<div class='user-head'>"+
                        "<div class='user-head-content'>"+
                        "<img src='"+data.userid.img+"' width='120' height='120'>"+
                        "</div>"+
                    "</div>"+
                    "<div class='title-name'>"+
                        "<div class='title-name-top'>"+
                            "<div class='title-name-txt'>"+
                            "<a href='<%=basePath%>/teach/question/page4?id="+data.id+
                                    "' style='font-size: 15px;' target='_blank'>"+ 
                                    "<span style='color: red'>"+data.title+"</span>"+
                                "</a>"+
                            "</div>"+
                            "<div class='title-forum-first'></div>"+
                        "</div>"+
                        "<div class='title-name-bottom'>"+
                            "<div class='title-name-title'>"+
                                data.userid.username+
                                "<span class='title_txt'>发布时间:</span>";
                                var date=new Date(data.twtime);
                                var d1=date.getDate();
                                var y=date.getFullYear();
                                var m=date.getMonth() + 1;
                                 var time = y+'/'+m+'/'+d1;
                                 dataHtml+=time;  
                                 dataHtml+=
                                "</div>"+
                            "</div>"+
                        "</div>"+
                    "</li>"+
            "</ul>";
                return dataHtml;
        },
        pageFun:function(i){
            var pageHtml = '<li class="pageNum">'+i+'</li>';
                return pageHtml;
        }
    })
})
</script>

后台向前台传递的参数:
    @RequestMapping("/listquestionajax")
    @ResponseBody
    public JSONObject listquestionajax(Integer id) {
        JSONObject jo = new JSONObject();
        Map<String,Object> result=service.listquestionbyid(id);
        jo.put("status",  "ok");
        jo.put("message", "success");
        jo.put("datas", result);
        return jo;
    }

实现js分页;

前台日期处理

  var date=new Date(data.twtime);
                                var d1=date.getDate();
                                var y=date.getFullYear();
                                var m=date.getMonth() + 1;
                                 var time = y+'/'+m+'/'+d1;

 

posted @ 2017-12-19 15:09  *眉间缘*  阅读(177)  评论(1编辑  收藏  举报