JS分頁(yè)的實(shí)現(xiàn)（同步與異步）

更新時(shí)間：2017年09月16日 16:02:44 投稿：mrr

這篇文章主要介紹了JS分頁(yè)的實(shí)現(xiàn)（同步與異步）,需要的朋友可以參考下

分頁(yè)技術(shù)分為后端分頁(yè)和前端分頁(yè)。

前端分頁(yè)

將數(shù)據(jù)一次性全部取出來(lái)，然后通過(guò)js進(jìn)行分頁(yè)，有其弊端：假設(shè)有商品表dbgoods，存放99999萬(wàn)條數(shù)據(jù) ，執(zhí)行查詢(xún)語(yǔ)句
select *from dbgoods where 1=1 將查詢(xún)結(jié)構(gòu)用List<goods>list 進(jìn)行接收，服務(wù)端將這么龐大的數(shù)據(jù)量傳遞給前端，會(huì)造成下載量大（流量都是錢(qián)），服務(wù)器壓力大等。

后端分頁(yè)

后端分頁(yè)是每次請(qǐng)求只查詢(xún)一頁(yè)的值，以mysql為例(查詢(xún)第一條開(kāi)始，查詢(xún)8條)

select * from dbgoods order by id limit 0,8;

后端同步分頁(yè)

原理：需要有個(gè)Bean記錄分頁(yè)的信息，

public class PageBean{
 private long total;  //總記錄數(shù)
 private List<T> list; //結(jié)果集
 private int pageNum; // 第幾頁(yè)
 private int pageSize; // 每頁(yè)記錄數(shù)
 private int pages;  // 總頁(yè)數(shù)
 private int size;  // 當(dāng)前頁(yè)的數(shù)量 <= pageSize，該屬性來(lái)自ArrayList的size屬性

當(dāng)我們首次加載時(shí)，加載的是第一頁(yè)的分頁(yè)數(shù)據(jù)：

值得注意的是

以前我是這樣編寫(xiě)sql語(yǔ)句得到總條數(shù)的：

select *from dbgoods ;
//用Lits<goods> lists去存儲(chǔ) 得到的數(shù)據(jù)，如果數(shù)據(jù)有幾萬(wàn)條，
//為了得到一個(gè)數(shù)字，去開(kāi)辟這么大的空間，實(shí)屬浪費(fèi)
PageBean page=new PageBean();
page.setTotal=lists.size();

其實(shí)正確的打開(kāi)方式是：

select count(*) from dbgoods where 1=1 ;
//查詢(xún)語(yǔ)句返回的是一個(gè)表的總記錄數(shù)，int型，
//where 1==1是為了查詢(xún)搜索，做sql語(yǔ)句拼接

同步實(shí)現(xiàn)異步，從jsp界面?zhèn)鬟fcurrentpage參數(shù)到servlet，servlet通過(guò)request請(qǐng)求得到參數(shù)，通過(guò)dao層數(shù)據(jù)庫(kù)查詢(xún)后將數(shù)據(jù)再傳會(huì)到j(luò)sp界面。

瀏覽器看到的界面效果是：jsp--->servlet----->jsp（跳轉(zhuǎn)，用戶(hù)體驗(yàn)不好）

如果有搜索框，在進(jìn)行搜索分頁(yè)時(shí)，點(diǎn)擊搜索按鈕，等到查詢(xún)數(shù)據(jù)傳遞到j(luò)sp界面時(shí)，jsp已經(jīng)是個(gè)全新的頁(yè)面，搜索框里的文本框內(nèi)容已經(jīng)消失，解決方法就是在點(diǎn)擊搜索的時(shí)候，將文本框的值也放在request請(qǐng)求，一起發(fā)給servlet，再通過(guò)servlet傳遞到新的jsp （超級(jí)繁瑣）

兩種解決方法：

（1）做兩個(gè)界面一樣的，一個(gè)用于顯示全部數(shù)據(jù)情況下的分頁(yè)，當(dāng)點(diǎn)擊查詢(xún)時(shí)，得到數(shù)據(jù)后用另外的頁(yè)面（下一頁(yè)點(diǎn)擊事件是去執(zhí)行搜索的情況）去顯示

（2）使用session：當(dāng)點(diǎn)擊搜索查詢(xún)時(shí)，將搜索條件記錄在session里面，當(dāng)點(diǎn)擊下一頁(yè)時(shí)，去判斷session的值，如果是空，則執(zhí)行全部數(shù)據(jù)的下一頁(yè)，如果不為空，則將session的值取出來(lái)，作為查詢(xún)的條件，下一頁(yè)執(zhí)行有搜索條件的查詢(xún)語(yǔ)句。麻煩點(diǎn)：session的銷(xiāo)毀不好控制，容易bug

總之，用同步實(shí)現(xiàn)分頁(yè)，會(huì)有各種不開(kāi)心

Ajax異步分頁(yè)

//jsp界面一個(gè)函數(shù)，傳遞查詢(xún)頁(yè)碼，繪制表格
 function InitTable(currentpage)
     {
      $.ajax({
       type:"get",
       url:"CustomServlet?type=search&currentpage="+currentpage,
       async:true,
       dataType:"json",
       success:function(data)
       {
        DrawTable(data); //繪制表格
       }
      });
     }
function DrawTable(data) //根據(jù)傳遞過(guò)來(lái)的json繪制表格
     {
      //給總頁(yè)數(shù)賦值
      $("#custom_all").text(data.pagelist.total);
     //給當(dāng)前頁(yè)賦值
$("#custom_currunt_page").text(data.pagelist.pageNum);
     //給總頁(yè)數(shù)賦值
 $("#custom_all_page").text(data.pagelist.pages);
      var _th="<th><input id='cb_all' type='checkbox'></th>"
      +"<th>ID</th>"
      +"<th>客戶(hù)名稱(chēng)</th>"
      +"<th>公司名稱(chēng)</th>"
      +"<th>聯(lián)系人</th>"
      +"<th>性別</th>"
      +"<th>聯(lián)系電話(huà)</th>"
      +"<th>手機(jī)</th>"
      +"<th>QQ</th>"
      +"<th>電子郵箱</th>"
      +"<th>通訊地址</th>"
      +"<th>創(chuàng)建時(shí)間</th>";
      document.getElementsByTagName("tbody")[0].innerHTML=_th;
       for(var i=0;i<data.pagelist.list.length;i++)
       {
        var customerCreatetime= format(data.pagelist.list[i].customerCreatetime, 'yyyy-MM-dd');
        var _tr=document.createElement('tr');
        msg="<td><input type='checkbox'></td><td>"+data.pagelist.list[i].customerId+"</td><td>"+data.pagelist.list[i].customerName+"</td><td>"+data.pagelist.list[i].customerCompanyname+"</td><td>"+data.pagelist.list[i].customerContactname+"</td><td>"+data.pagelist.list[i].customerSex+"</td><td>"+data.pagelist.list[i].customerTelephone+"</td><td>"+data.pagelist.list[i].customerPhone+"</td><td>"+data.pagelist.list[i].customerQq+"</td><td>"+data.pagelist.list[i].customerEmail+"</td><td>"+data.pagelist.list[i].customerAddress+"</td><td>"+customerCreatetime+"</td>"
       _tr.innerHTML=msg;         
        document.getElementsByTagName("tbody")[0].appendChild(_tr);
       }
     }

初次加載時(shí)，默認(rèn)調(diào)用

//初始化表格
      InitTable(1);

值得注意的是，重點(diǎn)來(lái)了：

我們進(jìn)行搜索的時(shí)候，定義一個(gè)全局的變量mydata，作用域?yàn)閜age

var mydata="";

下面看下點(diǎn)擊搜索按鈕的事件代碼

btns.eq(1).click( //搜索按鈕點(diǎn)擊事件
          function()
         {
      //custom_dialog_form是搜索的form表單，將其搜索條件序列化后賦值給一個(gè)全局變量     mydata=$("#custom_dialog_form").serialize();
           $.ajax({
            type:"post",
            url:"CustomServlet?type=search&currentpage=1",
            async:true,
            dataType:"json",
            data:mydata, //傳遞數(shù)據(jù)
            success:function(data)
            {
             DrawTable(data);
             $("#custom_dialog").css("display","none");
            }
           });
         }
          );

解決同步的搜索情況下的下一頁(yè)訪問(wèn)到的是全部數(shù)據(jù)的下一頁(yè)問(wèn)題：

 function InitTable(currentpage) //無(wú)搜索條件下的查詢(xún)，傳遞一個(gè)頁(yè)碼
     {
      $.ajax({
       type:"get",
       url:"CustomServlet?type=search&currentpage="+currentpage,
       async:true,
       dataType:"json",
       success:function(data)
       {
        DrawTable(data);
       }
      });
     }
     function InitTableSearch(currentpage)//有搜索添加的查詢(xún)，傳遞頁(yè)碼
     {
       $.ajax({
        type:"post",
        url:"CustomServlet?type=search&currentpage="+currentpage,
        async:true,
        dataType:"json",
        data:mydata,
        success:function(data)
        {
         DrawTable(data);
         $("#custom_dialog").css("display","none");
        }
       });
     }
//下一頁(yè)
      $("#custom_btn_next").click(
        function ()
        {
         var currentpage=$("#custom_currunt_page").text(); //獲取頁(yè)面的當(dāng)前頁(yè)的值
         var pages=$("#custom_all_page").text(); //獲取總頁(yè)數(shù)
         currentpage++;
         if(currentpage<=pages)
          {
          if(mydata=="") //判斷全局變量mydata是否為空，空表示沒(méi)有進(jìn)行搜索查詢(xún)
          {
          InitTable(currentpage);
          }
         else
          {
           InitTableSearch(currentpage); //進(jìn)行條件搜索
          }
          }
        });

由于是異步刷新，所以全局變量mydata是有值的，手動(dòng)自己刷新頁(yè)面重新加載，mydata就會(huì)初始化為空，就又默認(rèn)執(zhí)行無(wú)條件搜索語(yǔ)句。巧妙的解決了搜索和顯示全部的下一頁(yè)問(wèn)題，上一頁(yè)首頁(yè)尾頁(yè)同理。

總結(jié)

以上所述是小編給大家介紹的JS分頁(yè)的實(shí)現(xiàn)（同步與異步），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: