kinanson的技術回憶

首先去抓取pagination的plugin

然後再去抓取json.net

有關於任何格式轉json的文章，可以參考 [ASP.net WebForm] 利用JSON.net 實現 DataTable轉JSON字串、JSON字串轉DataTable

有關於template的單純說明，可以參考in91大大的[jQuery]透過jQuery Template把JSON資料套入範本

因為這篇是在講整合，所以就不想針對細節的部份一一說明。

然後先引用進來各jquery的參考檔

<link href="css/pagination.css" rel="stylesheet" type="text/css" />
<script src="Jscript/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Jscript/jquery.pagination.js" type="text/javascript"></script>

//下面這些是引用template必須的，要得到欄位資訊則是${欄位}
<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="Checkbox1" type="checkbox" value="${nid}" /></td>
            <td>${title}</td><td>${udate}</td></tr>

</script>

     
 /*pagination可預設的值和說明               

maxentries	总条目数	必选参数，整数
items_per_page	每页显示的条目数	可选参数，默认是10
num_display_entries	连续分页主体部分显示的分页条目数	可选参数，默认是10
current_page	当前选中的页面	可选参数，默认是0，表示第1页
num_edge_entries	两侧显示的首尾分页的条目数	可选参数，默认是0
link_to	分页的链接	字符串，可选参数，默认是"#"
prev_text	“前一页”分页按钮上显示的文字	字符串参数，可选，默认是"Prev"
next_text	“下一页”分页按钮上显示的文字	字符串参数，可选，默认是"Next"
ellipse_text	省略的页数用什么文字表示	可选字符串参数，默认是"…"
prev_show_always	是否显示“前一页”分页按钮	布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always	是否显示“下一页”分页按钮	布尔型，可选参数，默认为true，即显示“下一页”按钮
callback	回调函数	默认无执行效果

*/          

function showDeteil() {
            $("#Pagination").pagination(總筆數 , {
                prev_text: "上一頁",
                next_text: "下一頁",
                num_edge_entries: 2,
                num_display_entries: 8,
               
                callback: pageselectCallback
            });
            function pageselectCallback(page) {               
                $.ajax({
                    type: "POST",
                    url: "Admin_news.ashx",                 
                    data: { "page": parseInt(page + 1) },
                    success: function (data) {
                        var myarray = $.parseJSON(data);
                        $("#myTempl").tmpl(myarray).appendTo("#listview");
                        if (myarray.length > 0) {                           
                            $('#listview').show();
                        }
                        else {
                            $('#listview').hide();
                        }
                    }
                });
            }           
        }
       
         $(function () {               
            showDeteil();           
        });

        //html的部份
   
    <div id="list">
        <table id="listview">
            <tr>                 
                <th>      
                   
                </th>                 
                <th>
                    標題
                </th>
                <th>
                    時間
                </th>
            </tr>
        </table>
    </div>
     <div id="Pagination" class="pagination" style="width: 90%; margin-left: auto; margin-right: auto;">

    </div> 

    //Admin_news.ashx的部份
    using Newtonsoft.Json;

     string result="";
     int page =Convert.ToInt16(context.Request["page"]);
     DataTable dt = new DataTable();
     APDB DB = new APDB();
               
     dt = DB.GETlatest_news(page);
     result = JsonConvert.SerializeObject(dt, Formatting.Indented);
     context.Response.Write(result);
    
     //APDB的GETlatest_news部份，連線字串和開啟關閉的程式碼就不寫了

    public DataTable GETlatest_news(int page)
    {       
        int start = page * 10 - 9;
        int end = page * 10;
        cmd.CommandText = "select * from (select row_number() over (order by nid desc)" +
        " as rownum, * from latest_news) as newtable where rownum>="+start+" and rownum<="+end;
        SqlDataReader dr = cmd.ExecuteReader();
        DataTable dt = new DataTable();         

        dt.Load(dr);
        return dt;
    }