我如何使用ajax分頁或jquery分頁？

Question

我使用此代碼分頁

 <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 --> 
     <% } %> 

但改變頁面索引，頁面刷新的時候。但我不想刷新頁面我想用jquery或ajax。我怎麼能得到這個工作？

Answer 1

那麼你提交一個表單：

form.submit(); 

執行完全回發到服務器，並刷新頁面。如果你想使用AJAX，你應該使用AJAX請求提交這種形式，像這樣：

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); 
     } 
    }); 
} 

顯然，爲了這個工作，你將不得不把該網格爲局部視圖：

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

，然後讓分頁顯示控制器動作只返回這個局部視圖，因爲它會使用AJAX調用：

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

這是說我想你用真格的，如推薦或Telerik ASP.NET MVC Grid，而不是編寫那麼多難以維護的代碼。