jquery.pagination 分页插件

下载链接

http://www.jq22.com/yanshi5697

js代码内容

 	  var listLength = '' 
      var pageNum = 1
      var data = {
              parameter: "{\"PageSize\":12,\"PageIndex\":0}",
              cMethodName: "GetNews"
          }
          
      //第一步：先获取一次数据，然后根据数据渲染页面和分页按钮
      
      $.ajax({
              url: "http://139.196.121.139:7010/Default/WebSiteAPI",
              type: "post",
              data:data,
              dataType: "json",
              success: function(data) {
              
                var list = data.Status_Data.data
                
                listLength = data.Status_Data.recordCount
                
                var pageNum = Math.ceil(listLength / 12); //总页数=总条数/每页显示数

			//设置分页按钮
               $('.Pagination').pagination({
                      pageCount:pageNum,//页数
                      prevContent:"<",//上一页显示内容
                      nextContent:">",//下一页显示内容
                      count:2,//左右两边显示几个按钮
                      showData:2,//每页显示条数
                      keepShowPN:true, //是否一直显示上一页下一页
                      callback: function (api) { //页面点击时回调函数
                          var data = {
                                  parameter: "{\"PageSize\":12,\"PageIndex\":"+(api.getCurrent()-1)+"}", //通过当前页来调ajax
                                  cMethodName: "GetNews"
                              }
                          $.ajax({
                                  url: "http://139.196.121.139:7010/Default/WebSiteAPI",
                                  type: "post",
                                  data:data,
                                  dataType: "json",
                                  success: function(data) {
                                    var list = data.Status_Data.data
                                    //拿到数据后渲染DOM
                                      var contentUse = ''
                                      list.map(e=>{
                                        var date = e.dInputDate.slice(5,10)
                                       contentUse +=  `
                                        <div class="each_news_box">
                                          <a href="news_inner.html?${e.ID}" title="">
                                            <h3>${e.Title}</h3>
                                            <span>${date}</span>
                                            <p>
                                              ${e.Brief}
                                            </p>
                                          </a>
                                        </div>
                                        `
                                      })
									//放入dom
                                      $('.newsMain_body').html(contentUse)
                                  }
                                })

                      }
                  });
				
				//根据获取到的data先渲染一次页面内容
                var contentUse = ''
                list.map(e=>{
                  var date = e.dInputDate.slice(5,10)
                   contentUse +=  `
                    <div class="each_news_box">
                      <a href="news_inner.html?${e.ID}"  title="">
                        <h3>${e.Title}</h3>
                        <span>${date}</span>
                        <p>
                          ${e.Brief}
                        </p>
                      </a>
                    </div>
                    `
                })
                $('.newsMain_body').html(contentUse)
              }
            })