how i use ajax paging or jquery paging?

I use this code for paging

        <script type="text/javascript">
            function goToPage(pageIndex) {

                $("#currentPage").val(pageIndex);
                $("#gridAction").val("CurrentPageChanged");

                submitForm();
            }

            function onPageSizeChange(pageIndex) {

                $("#gridAction").val("PageSizeChanged");
                submitForm();
            }

            function submitForm() {
                var form = $("#grid").parents("form:first");
                form.submit();
            }            
        </script>       

        <style type="text/css">

                div {
                        /* border: solid 1px black; */
                }       

                #grid {
                        width: 100%;    /* use this field to set width of the whole grid */
                        display: table;
                }

                #grid table {
                        width: 100%;
                }


                #grid #pager {
                        white-space: nowrap;
                        font-size: 9pt;
                        margin-bottom : 5px;
                }


                #grid #pager .section {
                        width: 33.3%;
                        vertical-align: middle;
                }       


                #grid #pager #navButtons table {
                        width: 165px;
                        margin-left: auto;  /* center */
                        margin-right: auto;
                }

                #grid #pager #navButtons table td {
                        text-align: center;
                }

                #grid #pager #navButtons .disabled {
                        color: #C0C0C0;
                        text-align: center;
                }

                #grid #pager #navButtons a {
                        text-decoration: none;
                }

                #grid #pager #navButtons a {
                        text-decoration: none;
                }

                #grid #pager #rowsPerPage {
                        text-align: right;
                }

                #grid #data table {
                  border: solid 1px #e8eef4;
                  border-collapse: collapse;
                }

                #grid #data table td {
                  padding: 5px;   
                  border: solid 1px #e8eef4;
                }

                #grid #data table th {
                  padding: 6px 5px;
                  text-align: left;
                  background-color: #e8eef4; 
                  border: solid 1px #e8eef4;   
                  white-space: nowrap;
                }


        </style>



   <p>
        <%= Html.ActionLink("Add New", "Add") %>
    </p>


    <% using (Html .BeginForm()) { %>

    <div id="grid">
                <% if (Model.Count() == 0) { %>
                        <div id="emptyMessage">
                                There are no customers that match specified criteria.
                        </div>
                <% } else { %>


                <div id="header">
                        <div id="pager">
                                <table>
                                        <tr>
                                                <td id="stats" class="section">
                                                        <%=ViewData["pagerStats"] %>
                                                </td>

                                                <td id="navButtons" class="section">                    
                                                        <% if ((bool)ViewData["isPagerVisible"]) { %>
                                                                <table>
                                                                        <tr>
                                                                                <td>
                                                                                        <% if ((bool)ViewData["isFirstPage"]) { %>
                                                                                                <span class="disabled">&lt;&lt;</span>
                                                                                        <% } else { %>
                                                                                                <a href="#" onclick="goToPage(1)">&lt;&lt;</a>  
                                                                                        <% } %>
                                                                                </td>

                                                                                <td>
                                                                                        <% if ((bool)ViewData["isFirstPage"]) { %>
                                                                                                <span class="disabled">&lt;</span>
                                                                                        <% } else { %>
                                          开发者_如何学运维                                                      <a href="#" onclick="goToPage(<%= ViewData["previousPage"] %>)">&lt;</a>  
                                                                                        <% } %>
                                                                                        </td>

                                                                                <td>
                                                                                        <%//=Html.TextBox("currentPage", ViewData["currentPage"], new {style = "width:25px", maxlength = 5}) %> 
                                                                                        <%= Html.Hidden("currentPage") %>
                                                                                        Page <%= ViewData["currentPage"] %> of <%= ViewData["totalPages"] %>
                                                                                </td>

                                                                                <td>
                                                                                        <% if ((bool)ViewData["isLastPage"]) { %>
                                                                                                <span class="disabled">&gt;</span>
                                                                                        <% } else { %>
                                                                                                <a href="#" onclick="goToPage(<%= ViewData["nextPage"] %>)">&gt;</a> 
                                                                                        <% } %>
                                                                                </td>

                                                                                <td>
                                                                                        <% if ((bool)ViewData["isLastPage"]) { %>
                                                                                                <span class="disabled">&gt;&gt;</span>
                                                                                        <% } else { %>
                                                                                                <a href="#" onclick="goToPage(<%= ViewData["lastPage"] %>)">&gt;&gt;</a> 
                                                                                        <% } %>
                                                                                </td>

                                                                        </tr>
                                                                </table>
                                                        <% } else { %>
                                                                <%= Html.Hidden("currentPage") %>
                                                        <% } %>
                                                        </td>                                           

                                                        <td id="rowsPerPage" class="section">
                                                                <%= Html.DropDownList("pageSize", CustomerController.PageSizeSelectList(), new { onchange = "onPageSizeChange()" })%> rows per page                   
                                                        </td>
                                                </tr>
                                        </table>                                                                                
                                </div>  <!-- pager -->
                        </div> <!-- header -->

                        <%= Html.Hidden("gridAction") %>

                        <div id="data">
                                <table>
                                        <tr>
                                                <th></th>
                                                <th>
                                                        ID
                                                </th>
                                                <th>
                                                        First Name
                                                </th>

                                                <th>
                                                        Last Name
                                                </th>

                                                <th>
                                                        Phone
                                                </th>


                                        </tr>

                                        <% foreach (var item in Model) { %>

                                                <tr>
                                                        <td>
                                                                <%= Html.ActionLink("Edit", "Edit", new { id=item.CustomerID_FK}) %> |
                                                                <%= Html.ActionLink("Delete", "Delete", new { id = item.CustomerID_FK })%>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerID_FK) %>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerName) %>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerFullName) %>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerTypeID) %>
                                                        </td>


                                                </tr>

                                        <% } %>

                                </table>
                        </div> <!-- data -->

                <% } %>
        </div>  <!-- grid -->   
        <% } %>

but when changing page index ,the page refreshes. But I do not want refresh page I want use jquery or ajax. How could I get this to work?

Well you are submitting a form:

form.submit();

which performs a full postback to the server and refreshes the page. If you want to use AJAX you should submit this form using an AJAX request, like this:

function submitForm() {
    var form = $("#grid").parents("form:first");
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
            // Update only the portion of the DOM that contains the grid:
            $('#grid').html(result);
        }
    });
}

Obviously in order for this to work you will have to put this grid into a partial view:

<% using (Html.BeginForm("Paginate", null)) { %>
    <div id="grid">
        <%= Html.Partial("_Grid", Model) %>
    </div>
<% } %>

and then have your Paginate controller action return only this partial view as it will be invoked using AJAX:

[HttpPost]
public ActionResult Paginate(int currentPage)
{
    // ... paginate your dataset here
    return PartialView("_Grid", model);
}

This being said I would recommend you using a real grid such as MvcContrib.Grid or Telerik ASP.NET MVC Grid instead of writing that much code that is hard to maintain.