MVC3下利用Infrastics Jquery Grid+JPaginate 制作Grid

显示效果
页面代码(Index.cshtml)：
@using AspnetMvc.NorthwindService
@using AspnetMvc.ServiceReference1
@using Infragistics.Web.Mvc
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>AdvanceFilter</title>
</head>
<body>
<link type="text/css" href="/go.html?url=../../Style/mvc/jQueryThemes/base/ig.ui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/go.html?url=../../Style/PageJquey/css/style.css" media="screen"/>
<link href="/go.html?url=../../Style/mvc/jQueryThemes/base/ig.ui.editors.css" rel="stylesheet" type="text/css" />
<link href="/go.html?url=../../Style/mvc/jQueryThemes/base/ig.ui.grid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.tmpl.js"></script>
<script type="text/javascript" src="../../Scripts/Samples/combined/min/ig.ui.min.js"></script>
<script type="text/javascript" src="../../Scripts/ig.util.js"></script>
<script type="text/javascript" src="../../Scripts/ig.dataSource.js"></script>
<script type="text/javascript" src="../../Scripts/ig.ui.shared.js"></script>
<script type="text/javascript" src="../../Scripts/ig.ui.editors.js"></script>
<script type="text/javascript" src="../../Scripts/ig.ui.grid.framework.js"></script>
<script type="text/javascript" src="../../Scripts/ig.ui.grid.filtering.js"></script>
<script src="../../Style/PageJquey/jquery.paginate.js" type="text/javascript"></script>
   @* <script type="text/javascript">
        $("#grid1").live("iggridfilteringdatafiltering", function (event, args) { alert(args.owner._currentAdvancedExpressions.toString()); });
    </script>*@
      <script type="text/javascript">
          $('#igGrid1').live('iggridfilteringdatafiltered', function (event, args) {
              $.ajax({
                  url: "/Home/ChangePagingBar",
                  cache: false,
                  type: 'POST',
                  dataType: 'html',
                  //data: ({ page: $("#igGrid1") }),
                  success: function (data, textStatus, jqXHR) {
                      $("#paging").html(data);
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      alert($("#grid").val());
                  }
              });
          });
         $(document).ready(function () {
        $("#demo1").paginate({
            count: @ViewData["pageNum"],
            start: 1,
            display: 16,
            border: true,
            border_color: '#fff',
            text_color: '#fff',
            background_color: 'black',
            border_hover_color: '#ccc',
            text_hover_color: '#000',
            background_hover_color: '#fff',
            images: false,
            mouse: 'press',
            onChange: function (page) {
                $.ajax({
                    url: "/Home/Paging",
                    cache: false,
                    type: 'POST',
                    dataType: 'html',
                    data: ({ page: page }),
                    success: function (data, textStatus, jqXHR) {

                        $("#bbb").html(data);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert($("#grid").val());
                    }
                });
            }
        });






        $("#clearButton").click(function () {
            $("#igGrid1").igGridFiltering('filter', ([{ fieldName: "MetricId", expr: "", cond: "startWith"}]));
            //$("#igGrid1").igGridPaging("pageIndex", 0);
        });



        var preFileName = "Content/themes/UIDarkness/jquery.ui.custom.css";
        var preFileRef = document.createElement("link");
        preFileRef.setAttribute("rel", "stylesheet");
        preFileRef.setAttribute("type", "text/css");
        preFileRef.setAttribute("href", preFileName);
        document.getElementsByTagName("head")[0].appendChild(preFileRef);
        $("#ThemeSelector").change(function () {
            var filename = "Content/themes/" + $(this).attr('value') + "/jquery.ui.custom.css";
            var fileref = document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
            document.getElementsByTagName("head")[0].appendChild(fileref);
        });
    });
        
    </script>
  <h2>Select a theme : 
<select id="ThemeSelector">
    <option value="UIDarkness" selected="selected">UIDarkness</option>
    <option value="UILightness" >UILightness</option>
    <option value="Smoothness" >Smoothness</option>
    <option value="Redmond" >Redmond</option>
    <option value="LeFrog" >LeFrog</option>
    <option value="Trontastic" >Trontastic</option>
    <option value="MintChoc" >MintChoc</option>
</select>
</h2>
<div>
<input id="clearButton" type="button" value="Reset"/>
</div>

<div id="grid">
@(Html.Infragistics().Grid<MetricNodes>()
        .ID("igGrid1")
    .Columns(column =>
    {
        column.For(x => x.MetricId).DataType("int").HeaderText("MetricId").Width("150");
        column.For(x => x.HostName).DataType("string").HeaderText("HostName").Width("200");
        column.For(x => x.MetricName).DataType("string").HeaderText("MetricName").Width("200");
        //column.For(x => x.AccountDate).DataType("date").HeaderText("Account Date");
        //column.For(x => x.AccountType).DataType("string").HeaderText("Account Type");
        //column.For(x => x.AccountBalance).DataType("number").HeaderText("Account Balance");
    })
    .Features(features =>
                  {
                   
        features.Filtering().Mode(FilterMode.Advanced).Type(OpType.Remote);
                      
        //features.Paging().PageSize(10);
                      

        features.Sorting().Mode(SortingMode.Single).Type(OpType.Remote).ColumnSettings(settings =>
        {
            settings.ColumnSetting().ColumnKey("Account Number").AllowSorting(true);

        });
        features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);
    })
    .ClientDataSourceType(ClientDataSourceType.JSON)
    .Width("550")
    .Height("400")
        .LocalSchemaTransform(true)
        //.DataSource(ViewData["metrics"])
            .DataSourceUrl("/Home/GetMeteicNodes")
        .DataBind().Render()
)
<div id="bbb"></div>
</div>

<div id="paging">
    <div id="demo1"></div>
</div>
</body>
</html>

@using Aspne