项目分页一些经验总结

项目使用的是jquery.page分页插件  使用前先下载相关的资源文件压缩包 将js文件和css文件引入  ，jquery.page用法

先指定一个div  id=page1

<div id="page1"></div>

<div class="m-paging">
  <div id="page1"></div>
</div>

 $("#page1").Page({
              totalPages:${page.totalPages},//total Pages
              liNums: ${page.pageSize},//the li numbers(advice use odd)
              activeClass: 'activP', //active class style
              firstPage: '首页',//first button name
              lastPage: '末页',//last button name
              prv: '上一页',//prev button name
              next: '下一页',//next button name
              hasFirstPage: true,//whether has first button
              hasLastPage: true,//whether has last button
              hasPrv: true,//whether has prev button
              hasNext: true,//whether has next button
              callBack : function(page){
             $.ajax({
                  url: "${webPath}/equipment/findByPage.do",
                  data: {
                      pageNum: page,
                  },
                  type: "POST",
                  dataType: "JSON",
                  success: function(data) {
                      var str = "";
                      var Lists=data.dataList
                       for(var k in Lists) {
                         str += "<tr><td>" + Lists[k].equipmentid + "</td><td>" + Lists[k].equipmentid + "</td><td>" + Lists[k].snno + "</td><td>" 
                          + Lists[k].equipmenttype + "</td><td>" +Lists[k].sceneid + "</td><td>" 
                          +Lists[k].alarmstatus + "</td><td>" +Lists[k].eletric + "</td><td>" +Lists[k].eletric + "</td><td>" +Lists[k].workstatus + "</td><td>  <a class='delete'><span>删除</span></a>" +"</td></tr>";
                      }  
                      $("#nr1").html(str);
                  }
              });
              }
          }); 

 

这里使用的ajax技术，因为在回调函数内访问后台返回数据会刷新页面，整体效果不好，使用ajax可以实现局部刷新。返回的json数据动态拼接到页面里