Jquery gridView分页

后台程序

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

using System;
using System.Web;
using System.Data;
using Tools;
using BLL;

public class handler : IHttpHandler {

    BLLCompanyBaseInfo BLL = new BLLCompanyBaseInfo();
    public void ProcessRequest (HttpContext context) {
        //不让浏览器缓存
        context.Response.Buffer = true;
        context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
        context.Response.AddHeader("pragma", "no-cache");
        context.Response.AddHeader("cache-control", "");
        context.Response.CacheControl = "no-cache";
        context.Response.ContentType = "text/plain";

        int pageindex;
        int.TryParse(context.Request["p"], out pageindex);

        string order = "Orgcode desc";
        if (!string.IsNullOrEmpty(context.Request["orderby"]))
        {
            string[] strarr = context.Request["orderby"].ToString().Split('_');
            if (strarr[1] == "0")
                order = strarr[0] + " asc";
            else
                order = strarr[0] + " desc";

        }

        if (pageindex == 0)
            pageindex = 1;

        DataTable dt = BLL.GetCompanyInfo(pageindex, order);

        string jsonData = FormatToJson.ToJson(dt, "Info");
        context.Response.Write(jsonData);  
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

前台程序：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_Default" %>

<!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 runat="server">
    <title>分页</title>
    <link href="jqueryPager/pagination.css" rel="stylesheet" type="text/css" />
    <script src="jqueryPager/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <script src="jqueryPager/jquery.pagination.js" type="text/javascript"></script>
     <script type="text/javascript">
        
      
        var orderby="";
        
        $().ready(function() {
             InitData(0);

            $("#pageTheme").change(function(){
                $("#Pagination").attr('class',$(this).val());
            });
                     
        });
        
        function pageselectCallback(page_id, jq) {
          //  alert(page_id);
            InitData(page_id);
        }
        
        function InitData(pageindx)
        {
            var tbody = "";
           
            $.ajax({
               type: "POST",//用POST方式传输
               dataType:"json",//数据格式:JSON
               url:'handler.ashx',//目标地址
               data:"p="+(pageindx+1)+"&orderby="+orderby,
               beforeSend:function(){$("#divload").show();$("#Pagination").hide();},//发送数据之前
               complete:function(){$("#divload").hide();$("#Pagination").show()},//接收数据完毕
               success:function(json) {
                        $("#productTable tr:gt(0)").remove();
                        var productData = json.Info;
                        $.each(productData, function(i, n) {
                            var trs = "";
                            trs += "<tr><td align=center>"+(pageindx*10+i+1)+"</td><td>" + n.Orgcode + "</td><td>" + n.Entname + "</td><td>" + n.Tel + "</td><td>" + n.Districtcode + "</td></tr>";

                            tbody += trs;
                        });

                        $("#productTable").append(tbody);

                        $("#productTable tr:gt(0):odd").attr("class", "odd");
                        $("#productTable tr:gt(0):even").attr("class", "enen");
                        
                        
                        $("#productTable tr:gt(0)").hover(function(){
                            $(this).addClass('mouseover');
                        },function(){
                            $(this).removeClass('mouseover');
                        });
                }});
            
                $("#Pagination").pagination(<%=pagecount %>, {
                    callback: pageselectCallback,
                    prev_text: '« 上一条',
                    next_text: '下一条 »',
                    items_per_page:10,
		            num_display_entries:6,
		            current_page:pageindx,
		            num_edge_entries:2
                });
            
        }

        function Sort(ordercolumn,ordertipid)
        {
            
            var ordertype="";//1:desc,0:asc
            var $orderimg = $("#"+ordertipid);
            if($orderimg.html()!="")
            {
                var imgsrc = $("img",$orderimg).attr("src");
                
                if(imgsrc.indexOf("asc")>-1){
                 $(".ordertip").empty();
                   $orderimg.html(" <img src=\"images/sort_desc.gif\" align=\"absmiddle\">");
                
                    ordertype = 1;
                }
                else
                { $(".ordertip").empty();
                    $orderimg.html(" <img src=\"images/sort_asc.gif\" align=\"absmiddle\">");
                   
                    ordertype = 0;
                }
            }
            else
            {
             $(".ordertip").empty();
                 $orderimg.html(" <img src=\"images/sort_desc.gif\" align=\"absmiddle\">");
                    ordertype = 1;
            }
            
            orderby = ordercolumn+"_"+ordertype;
            
            InitData(0);
        } 

        
    </script>
    
    
    
    <style type="text/css">
        table{ width:600px; background-color:#ffffff}
      table th{ height:24px; background-color:#037E12; color:White;}
      .odd{ background-color:#5FD66C}
      .enen{ background-color:#BCF5C4}
      .mouseover{ background-color:orange;}
      
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divload" style="top:50%; right:50%;position:absolute; padding:0px; margin:0px; z-index:999">
        <img src="images/spinner3-greenie.gif" /></div>
    <div>
    
        <table cellpadding=5 cellspacing=1 width=620 id="productTable" align="center">
            <tr>
             <th style="width:100px"><a style="cursor:pointer;">序号</a><span id="Span1" class="ordertip"></span></th>
                <th style="width:100px"><a style="cursor:pointer;" onclick="Sort('Orgcode','productid');return false;">组织机构代码</a><span id="productid" class="ordertip"></span></th>
                <th style="width:200px"><a style="cursor:pointer;" onclick="Sort('Entname','ProductName');return false;">公司名</a><span id="ProductName" class="ordertip"></span></th>
                <th style="width:200px"><a style="cursor:pointer;" onclick="Sort('Tel','UnitPrice');return false;">公司电话</a><span id="UnitPrice" class="ordertip"></span></th>
                <th style="width:120px"><a style="cursor:pointer;" onclick="Sort('Districtcode','Discontinued');return false;">地区</a><span id="Discontinued" class="ordertip"></span></th>
            </tr>
        </table>
    
    </div>
    <div id="Pagination" class="digg" ></div>
    <div style=" text-align:center;">分页样式:
    <select id="pageTheme">
        <option value="digg">digg</option>
        <option value="meneame">meneame</option>
        <option value="flickr">flickr</option>
        <option value="sabrosus">sabrosus</option>
        <option value="scott">scott</option>
        <option value="black">black</option>
        <option value="black2">black2</option>
        <option value="black-red">black-red</option>
        <option value="grayr">grayr</option>
        <option value="yellow">yellow</option>
        <option value="jogger">jogger</option>
        <option value="starcraft2">starcraft2</option>
        <option value="tres">tres</option>
        <option value="megas512">megas512</option>
        <option value="technorati">technorati</option>
        <option value="youtube">youtube</option>
        <option value="msdn">msdn</option>
        <option value="badoo">badoo</option>
        <option value="manu">manu</option>
        <option value="viciao">viciao</option>
        <option value="green-black">green-black</option>
        <option value="yahoo2">yahoo2</option>
   
    </select>
    </div>
    </form>
</body>
</html>