PIXNET Logo登入

程式筆記本

跳到主文

寫的、查的做個紀錄方便查閱。

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 12月 28 週三 201114:07

  • 自己弄的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%">&nbsp;</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>
(繼續閱讀...)
文章標籤

incode 發表在 痞客邦 留言(0) 人氣(558)

  • 個人分類：綜合
▲top
  • 7月 07 週三 201015:31

  • ajax讀取資料庫，使用jquery及json

PHP部份
<?php
require_once('../Connections/con_Set.php');
foreach($_GET AS $key => $value) { $_GET[$key] = mysql_real_escape_string($value); }
$sql = <<<sql
SELECT dr.name, dr.did, ci.license, ci.car_category, dr.phone, com.name AS com_name, ci.brand, ci.cc
FROM tr_car_inf ci, tr_driver dr, tr_company com
WHERE ci.cid = com.cid
AND ci.did = dr.did
sql;
if ($_GET['driver']!=null) $sql .= "AND `dr`.`name` LIKE '%{$_GET['driver']}%' ";
if ($_GET['license']!=null) $sql .= "AND `ci`.`license` LIKE '%{$_GET['license']}%' ";
if ($_GET['phone']!=null) $sql .= "AND `dr`.`phone` LIKE '%{$_GET['phone']}%' ";
if ($_GET['com_name']!=null) $sql .= "AND `com`.`name` LIKE '%{$_GET['com_name']}%' ";
if ($_GET['car_category']!=null) $sql .= "AND `ci`.`car_category` LIKE '%{$_GET['car_category']}%' ";
if ($_GET['brand']!=null) $sql .= "AND `ci`.`brand` LIKE '%{$_GET['brand']}%' ";
if ($_GET['cc']!=null) $sql .= "AND `ci`.`cc` LIKE '%{$_GET['cc']}%' ";
$sql .=<<<sql
ORDER BY `dr`.`name` ASC
sql;
//echo $sql;
$data_array = array();
$result = mysql_query($sql) or trigger_error(mysql_error());
while($row = mysql_fetch_array($result)){
    
     $data_array[] = array
            (
                "driver" => $row['name'],
                "license" => $row['license'],
                "phone" => $row['phone'],
                "com_name" => $row['com_name'],
                "car_category" => $row['car_category'],
                "brand" => $row['brand'],
                "cc" => $row['cc']
            );
        
}
 
echo json_encode($data_array);
(繼續閱讀...)
文章標籤

incode 發表在 痞客邦 留言(0) 人氣(4,514)

  • 個人分類：綜合
▲top
1

文章搜尋

文章分類

  • Codeigniter (4)
  • 綜合 (2)
  • jQUery Plugin (1)
  • PHP (9)
  • jQuery (5)
  • Javascript (1)
  • 未分類文章 (1)

最新文章

  • 讀寫檔案
  • codeigniter去index.php
  • Codeigniter系統開發佈署筆記(1)
  • jquery 紀錄
  • 自己弄的jQuery ajax查詢 - 整合jQuery pager
  • 自己弄的jQuery ajax查詢 - PHP檔（回傳）
  • 自己弄的jQuery ajax查詢 - HTML檔（查詢區）
  • codeigniter extend
  • Codeiginter Session登入登出 控制器、模組、視圖試作
  • PHP ob_start() 介紹

熱門文章

  • (4,415)PHP民國西元互轉
  • (4,956)PHP ob_start() 介紹

文章精選

誰來我家

參觀人氣

  • 本日人氣：
  • 累積人氣：