kinanson的技術回憶

有現成可以用的plugin可以實現這功能，可以參考官方網站

我則是自己做的，也在此就做個記錄

首先是引用各種需要的檔案進來，因為我是用jquery template來做的，這方面我就不多說了

<script src="Jscript/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/x-jquery-tmpl" id="myTempl">
        <tr><td><input id="Hidden1" type="hidden" value="${aid}" /><a href="askd1.aspx?aid=${aid}">${title}</a></td>
        <td>${name}</td><td>${adate}</td><td>${num}</td></tr>
</script>

<script type="text/javascript">

//用ajax撈資料的方法，方便呼叫，用id則是要>id的方式去抓下一頁的筆料
        function showDetial(id) {                    
            $.post("ask.ashx", { aid: id }, process);
            function process(data) {
                var myarray = $.parseJSON(data);
                $("#myTempl").tmpl(myarray).appendTo("#listview");              
            }          
        }
        $(function () {

//一開始先從id>0開始抓，我是用select top 5 from table where id>0

            showDetial(0);           
            $(window).scroll(function () {
                var $BodyHeight = $(document).height();
                var $ViewportHeight = $(window).height();
                $ScrollTop = $(this).scrollTop();
                if ($BodyHeight == ($ViewportHeight + $ScrollTop)) {

//這邊則是要抓最末筆的id，這時候會變成 select top 5 from table where id>最末筆id
                    showDetial($('tr:last #Hidden1').val());
                }
            });

//下面則是為了，如果按f5重整的話，如果捲軸不是在最頂部的話，資料會重覆，預設就會跑scroll，所以這邊判斷如果是有按按鍵的話，就把捲軸置於最上方,e.which==116則是代表按下F5的按鍵，有關於按鍵代碼，可以參考此篇
            $(window).keydown(function (e) {
                if (e.which == 116) {
                    $('html, body').scrollTop(0);
                }
            });
        });
</script>

接著是html

 <div id="list">   
	    <table id="listview" style="width:80%">
            <tr>
            <th>主題</th><th>發表人</th><th>發表時間</th><th>回應</th>
            </tr>
        </table>     
</div>
<div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">載入中...</div>

接著則是ask.ashx的部份

<%@ WebHandler Language="C#" Class="ask" %>

using System;
using System.Web;
using System.Data;
using Newtonsoft.Json;

public class ask : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        DataTable dt = new DataTable();
        APDB db = new APDB();
        context.Response.ContentType = "text/plain";
        string  result = "";
        int aid = 0; 
        aid = Convert.ToInt16(context.Request["aid"]);
        dt = db.GETaskh(aid);
        //這段則是json.net的寫法，包含上面的using Newtonsoft.Json;，有興趣可以參考下面的網址
        //http://www.dotblogs.com.tw/shadow/archive/2011/11/30/60083.aspx
        result = JsonConvert.SerializeObject(dt, Formatting.Indented);
        context.Response.Write(result);       
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

APDB的部份

 public DataTable GETaskh(int aid)
    {
        OpenDB();
        cmd.CommandText = "select top 5 * from askh where aid=@aid";
        cmd.Parameters.Add("@aid", SqlDbType.Int).Value = aid;
        using (dr = cmd.ExecuteReader())
        {
            dt.Load(dr);
            closeDB();           
        }
        return dt;
    }