自己弄的jQuery ajax查詢 - 整合jQuery pager－程式筆記本

這不是一般常搜尋到的jquery pager，js貼在最後。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網頁標題</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.5");
google.load("jqueryui", "1.5.2");
</script>

       <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
       <script type="text/javascript" language="javascript" src="js/jquery.pager.js"></script>


<script type="text/javascript" charset="utf-8">
   $(document).ready(function() {

       var pages_click;//用來傳遞
       $("#per").change(function(){

           ejajax();

       })

       $("input.os").blur(function(){
           $("#dis_st").val(0);
           $("#loading").stop();
           //加入緩幾秒
           ejajax();

       })

       PageClick = function(pageclickednumber) {
       $("div.pager").pager({ pagenumber: pageclickednumber, pagecount: 15,
       buttonClickCallback: PageClick});
       pages_click = pageclickednumber;
           ejajax("pages");

       }


       $("#sub").click(function(){
           $("tr").remove(".db_list");
           $("tr").remove(".s_list");
           $("#dis_st").val(0);
           ejajax();

       })

       $("input.2page").click(function(){
           $("tr").remove(".db_list");
           $("tr").remove(".s_list");

           ejajax("to");

       })

       $("tr.s_list").hover(function(){
           $("tr").remove(".db_list");
           $("tr").remove(".s_list");

           ejajax("to");

       })



   function ejajax(type){

   $("tr").remove(".db_list");
   $("tr").remove(".s_list");
   var sSearch = $("#sSearch").val();
   var sSearch_1 = $("#sSearch_1").val();
   var sSearch_2 = $("#sSearch_2").val();
   var sSearch_3 = $("#sSearch_3").val();
   var sSearch_4 = $("#sSearch_4").val();
   var sSearch_5 = $("#sSearch_5").val();

       switch(type){

          default:

           var dis_st = (parseInt($("#dis_st").val())<=0)?0:parseInt($("#dis_st").val());
           var data = {
           "sSearch": sSearch,
           "sSearch_1" : sSearch_1,
           "sSearch_2" : sSearch_2,
           "sSearch_3" : sSearch_3,
           "sSearch_4" : sSearch_4,
           "sSearch_5" : sSearch_5,
           "dis_st" : $("#dis_st").val(),
           "dis_len" : $("#per").val()
           }
          break;

          case "to":


           var a1 = $("#per").val();
           var a2 = ($("input.goto").val()>parseInt($("a.total_page").text()))?parseInt($("a.total_page").text()):$("input.goto").val();
           var dis_st = a1*a2-a1;

           $("#dis_st").val(dis_st);



           var data = {
           "sSearch": sSearch,
           "sSearch_1" : sSearch_1,
           "sSearch_2" : sSearch_2,
           "sSearch_3" : sSearch_3,
           "sSearch_4" : sSearch_4,
           "sSearch_5" : sSearch_5,
           "dis_st" : dis_st,
           "dis_len" : $("#per").val()
           }

          break;

          case "pages":



          $("#dis_st").val(dis_st);
          var a1 = $("#per").val();
          var a2 = (pages_click>parseInt($("a.total_page").text()))?parseInt($("a.total_page").text()):pages_click;
          var dis_st = a1*a2-a1;


          var data = {
           "sSearch": sSearch,
           "sSearch_1" : sSearch_1,
           "sSearch_2" : sSearch_2,
           "sSearch_3" : sSearch_3,
           "sSearch_4" : sSearch_4,
           "sSearch_5" : sSearch_5,
           "dis_st" : dis_st,
           "dis_len" : $("#per").val()
           }


          break;

       };





       $("#loading").fadeIn("slow");

           $.ajax({
               url: "ejquery-.php",
               data:data,
               type: "POST",
               dataType: "json",
               success: function(Ddata) {


                   var i = 0;

                   var total = Ddata["iTotalRecords"];
                   var total = Ddata["iTotalDisplayRecords"];
                   var aaData = Ddata["aaData"];
                   if (aaData != "") {
                   $.each(aaData, function() {
                   $("#show").append("<tr class=\"s_list\">" +
                   "<td class='num'>" + (i+1) + /*"-" + aaData[i][0] + */"</td>" +
                   "<td class='pt'> <a target=\"_blank\" href=\"" + aaData[i][4] + "\">" + aaData[i][1] + "</a></td>" +
                   "<td class='issn'>" + aaData[i][2] + "</td>" +
                   "<td class='eissn'>" + aaData[i][3] + "</td>" +
                   "<td class='range'>" + aaData[i][5] + "</td>" +
                   "</tr>");
                       i++;
                   });
                   }else{
                   var nodata = "No Articles Found";
                   $("#show").append("<tr class=\"s_list nodata\" align=\"center\">" +
                   "<td colspan=\"5\">" + nodata +"</td></tr>");

                   }


               $("#dis_st").val(dis_st);
               $("a.total").text(total);
               var p = Math.ceil(total / $("#per").val());
               var per = parseInt($("#per").val());
               var st = parseInt($("#dis_st").val());
               var page = Math.ceil(st / per)+1;

               $("div.pager").pager({ pagenumber: page, pagecount: p, buttonClickCallback: PageClick });



               $("a.total").text(total);
               $("a.page").text(page);
               $("a.total_page").text(p);


           },

               Error: function() {
                   alert("ERROR!!!");
               }
           });
           $("#loading").ajaxStart(function(){
           $(this).fadeIn("slow");}
           ).ajaxStop(function(){
           $(this).fadeOut("slow");
           });

           $("div.status").fadeIn("slow");
       }//end function

   })
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
   $("div.pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
   });
   PageClick = function(pageclickednumber) {
   $("div.pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick
   });

}
</script>
<body>
<div id="wrap">
   <div id="container">

       <div id="header">
           <h1></h1>
       </div>


       <div id="bar">
           <div id="search_bar">
               <input id="sSearch" name="sSearch" size="30" type="text" value="" />
               <input id="sub" type="submit" name="Submit" value="送出" />
           </div>
           <div class="pager"></div>
           <div class="status">
Page <a class="page"></a> of <a class="total_page"></a> | <a class="total"></a> Records.

GO to Page<input class="goto" name="goto" size="4" type="text" value="" /> <input class="2page" type="submit" name="2page" value="GO" />
<input name="post" size="10" type="hidden" value="" /></div>
       </div>



       <div id="content">
           <div id="loading" style="display:none" ><img src="images/ajax-loader.gif" />Loading....</div>
            <select name="select" id="per">
              <option value="10">顯示10筆</option>
              <option value="30">顯示30筆</option>
              <option value="50">顯示50筆</option>
              <option value="100">顯示100筆</option>
            </select>
            <br />
            <table cellspacing="0" cellpadding="0" id="show">
<tr bgcolor="#FFE9C8" height="24">
    <th></th>
    <th style="text-align:left;"><input name="sSearch_1" type="text" class="os" id="sSearch_1" size="60"/>    </th>
    <th><input name="sSearch_2" type="text" class="os" id="sSearch_2" size="10"/>    </th>
    <th><input name="sSearch_3" type="text" class="os" id="sSearch_3" size="10"/>    </th>
    <th><input name="sSearch_5" type="text" id="sSearch_5" class="os"/></th></tr>
<tr bgcolor="#FFE9C8" height="24" class="title">
    <th width="3%"> </th>
    <th width="67%" style="text-align:left;">資料抬頭
    <th width="10%">資料抬頭</th>
    <th width="10%">資料抬頭</th>
    <th width="10%">資料抬頭</th>
</tr>
</table>

<input name="tt_str" size="10" type="hidden" value="" />
<input name="dis_st" id="dis_st" size="10" type="hidden" value="0" />
<input name="key" size="10" type="hidden" value="" />
<div class="pager" ></div>
<div class="status">
Page <a class="page"></a> of <a class="total_page"></a> | <a class="total"></a> Records.

GO to Page<input class="goto" name="goto" size="4" type="text" value="" /> <input class="2page" type="submit" name="2page" value="GO" />
<input name="post" size="10" type="hidden" value="" /></div>
       </div>
       </div>

       <div id="footer">
           COPYRIGHT 2011
       </div>
</div>
</div>
</body>
</html>

/*----------------下面jquery pager code-------------------*/

/*
* jQuery pager plugin
* Version 1.0 (12/22/2008)
* @requires jQuery v1.2.6 or later
*
* Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html
*
* Copyright (c) 2008-2009 Jon Paul Davies
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/
*
* This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome!
*
* Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest });
*
* Where pagenumber is the visible page number
*       pagecount is the total number of pages to display
*       buttonClickCallback is the method to fire when a pager button is clicked.
*
* buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)
* Where pageclickednumber is the number of the page clicked in the control.
*
* The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes
* Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report.
*/
(function($) {

    $.fn.pager = function(options) {

        var opts = $.extend({}, $.fn.pager.defaults, options);

        return this.each(function() {

        // empty out the destination element and then render out the pager with the supplied options
            $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));

            // specify correct cursor activity
            $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
        });
    };

    // render and return the pager with the supplied options
    function renderpager(pagenumber, pagecount, buttonClickCallback) {

        // setup $pager to hold render
        var $pager = $('<ul class="pages"></ul>');

        // add in the previous and next buttons
        $pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));

        // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
        var startPoint = 1;
        var endPoint = 9;

        if (pagenumber > 4) {
            startPoint = pagenumber - 4;
            endPoint = pagenumber + 4;
        }

        if (endPoint > pagecount) {
            startPoint = pagecount - 8;
            endPoint = pagecount;
        }

        if (startPoint < 1) {
            startPoint = 1;
        }

        // loop thru visible pages and render buttons
        for (var page = startPoint; page <= endPoint; page++) {

            var currentButton = $('<li class="page-number">' + (page) + '</li>');

            page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });
            currentButton.appendTo($pager);
        }

        // render in the next and last buttons before returning the whole rendered control back.
        $pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));

        return $pager;
    }

    // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
    function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {

        var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');

        var destPage = 1;

        // work out destination page for required button type
        switch (buttonLabel) {
            case "first":
                destPage = 1;
                break;
            case "prev":
                destPage = pagenumber - 1;
                break;
            case "next":
                destPage = pagenumber + 1;
                break;
            case "last":
                destPage = pagecount;
                break;
        }

        // disable and 'grey' out buttons if not needed.
        if (buttonLabel == "first" || buttonLabel == "prev") {
            pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
        }
        else {
            pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
        }

        return $Button;
    }

    // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
    $.fn.pager.defaults = {
        pagenumber: 1,
        pagecount: 1
    };

})(jQuery);