jqGrid分頁不能使用json數據類型

Question

我似乎無法讓jqGrid分頁工作。當我點擊下一步/上一步/重新加載或當我嘗試過濾器時，它不會發出請求。只要我點擊其中任何一個按鈕，所有的記錄就會消失。

這是一個被髮送初始請求，所以你可以看到，所有這些參數都在被傳遞。

https://www.xxxxxxx.com/getallorders?contactId=333&bucketId=444&_search=false&nd=1366982305621&rows=2‌​0&page=1&sidx=PKId&sord=desc 

這將返回記錄正確的號碼，如果我手動執行它，並傳遞比方說，page = 2我確實得到適當的設置。問題似乎是請求沒有提出。

jQuery("#grid").jqGrid({ 
    url:'/GetAllOrders', 
    mtype: "GET", 
    datatype: "json", 
    jsonReader: { 
     root: "Rows", 
     page: "Page", 
     total: "Total", 
     records: "Records", 
     repeatitems: false, 
     userdata: "UserData", 
     id: "Id" 
    }, 
    postData: { 
     contactId: currentUserId, 
     bucketId: currentBucketId 
    }, 
    colNames:[ 
     'Id', 
     'Cancel', 
     'Order #', 
     'Order Date', 
     'Bucket', 
     'Warehouse', 
     'Destination', 
     'Status', 
     'Tracking #', 
     'Transport By', 
     'Ordered By', 
     'Order Items' 
    ], 
    colModel:[ 
     {name:'Id',index:'Id', width:5, align:"center", hidden: true}, 
     {name:'Cancel', index:'Cancel',width:80, align:"center", formatter: cancelLinkFormatter, search:false }, 
     {name:'OrderNumber',index:'OrderNumber', width:80, align:"center"}, 
     {name:'OrderDate',index:'OrderDate', width:140, align:'right'}, 
     {name:'Bucket',index:'Bucket', width:180, align:"center", hidden: false}, 
     {name:'Warehouse',index:'Warehouse', width:80, align:"center", hidden: true}, 
     {name:'Destination',index:'Destination', width:150}, 
     {name:'StatusCode', index:'StatusCode', width:100, align: 'center'}, 
     {name:'TrackingNumber', index:'TrackingNumber', width:100, align: 'center'}, 
     {name:'TransportCompany', index:'TransportCompany', width:100, align: 'center'}, 
     {name:'OrderedBy', index:'OrderedBy', width:100, align: 'center'}, 
     {name:'OrderItems', index:'OrderItems', width:100, align: 'center'} 
    ], 
    viewrecords: true, 
    rowNum: 20, 
    autowidth: false, 
    width: 860, 
    height: 450, 
    rowList:[10,20,30,40,50], 
    pager: jQuery('#pager'), 
    sortname: 'Id', 
    align: 'center', 
    sortorder: "desc", 
    loadonce: false, 
    ignoreCase: true, 
    caption:"Orders" 
}).navGrid('#pager',{edit:false,add:false,del:false}); 
setSearchSelect('StatusCode'); 
jQuery("#grid").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"}); 

這是我在初始加載時從服務器獲得的json響應。

{ 
"Total":2, 
"Page":1, 
"Records":28, 
"Rows":[ 
    { 
     "PKId":1234, 
     "OrderNumber":"XXXXXX97", 
     "Cancel":"Cancel", 
     "OrderDate":"Jul 11 2012 12:37PM", 
     "Warehouse":"", 
     "Bucket":"xxxxxxxx", 
     "StatusCode":"Shipped Complete", 
     "StatusLink":"View Info", 
     "TrackingNumber":"xxxxxxx", 
     "TransportCompany":"xxxxxxxx", 
     "Destination":"xxxxxxx", 
     "BucketId":110, 
     "ShippingEmail":"xxxxxxxx", 
     "OrderedBy":"xxxxxxxx", 
     "OrderItem":"xxxxxxx" 
    }, 
    .... MORE DATA HERE ... 20 OBJECTS ALL-TOGETHER WITHIN Rows Array 
    { 
     "PKId":13434, 
     "OrderNumber":"XXXXXX97", 
     "Cancel":"Cancel", 
     "OrderDate":"Jul 11 2012 12:37PM", 
     "Warehouse":"", 
     "Bucket":"xxxxxxxx", 
     "StatusCode":"Shipped Complete", 
     "StatusLink":"View Info", 
     "TrackingNumber":"xxxxxxx", 
     "TransportCompany":"xxxxxxxx", 
     "Destination":"xxxxxxx", 
     "BucketId":110, 
     "ShippingEmail":"xxxxxxxx", 
     "OrderedBy":"xxxxxxxx", 
     "OrderItem":"xxxxxxx" 
    }, 
], 
"UserData":null 
} 

有什麼建議嗎？

順便說一句，當我使用loadonce: true和當我一次加載所有數據時，分頁和過濾工作得很好，但是，由於記錄太多，我只能切換到服務器端。

編輯 我發現了這個問題。首先，我很抱歉沒有包括其他代碼。 你看，我也有loadComplete，這對我造成了問題。 問題中的代碼將起作用，所以我想感謝大家的參與。

這是造成問題的loadComplete。一旦我刪除它，它開始正確分頁。

 loadComplete: function() { 
     setParamsOnComplete(); 
     var myGrid = jQuery("#grid"); 
     var ids = myGrid.getDataIDs(); 
     for (var i = 0, idCount = ids.length; i < idCount; i++) { 
      jQuery("#"+ids[i]+" a",myGrid[0]).click(function(e) { 
       var hash=e.currentTarget.hash;// string like "#?id=0" 
       if (hash.substring(0,6) === "#S?id=") { 
        var id = hash.substring(6,hash.length); 
        var text = this.textContent || this.innerText; 
        dialog.dialog({ title: 'Status Information', 
         buttons:{ Ok: function() { 
             jQuery(this).dialog("close"); 
            } 
           }, 
         open: function() { 
            jQuery('.ui-dialog-buttonpane').find('button:contains("Ok")').css('font-size', '10px'); 
           }   
        }); 
        dialog.dialog('open'); 
       } 
       if (hash.substring(0,6) === "#C?id=") { 
        var id = hash.substring(6,hash.length); 
        var text = this.textContent || this.innerText; 
        var changed = false; 
        var additionalMesages = ""; 
        jQuery.post("DataFetcher.asp", { 'action': "cancelOrder", 'id':id }, function(xml) { 
         changed = (xml === 'True'); 
         additionalMesages = xml; 
        }).success(function(){ 
         if (changed){ 
          showDialogCustomTitle("Success", "You've successfully cancelled the order " + id + "."); 
          jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid'); 
         }else if (additionalMesages.split("_")[1] == "2"){ 
          showDialogCustomTitle("Error", additionalMesages.split("_")[2]); 
         }else if (additionalMesages.split("_")[1] == "1"){ 
          showDialogCustomTitle("Error", additionalMesages.split("_")[2]); 
         } 
        }); 
       } 
       //e.preventDefault(); 
      }); 
     } 
    }, 

對我來說，下一個任務可能是找出爲什麼loadComplete會導致問題。

編輯2 發現第一個問題與loadComplete。昨天晚上我太累了，注意到了這一點，但是當這個網格用xml填充並在客戶端分頁時，剩下的代碼肯定會造成問題。謝謝大家再次參與。 :)

jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');

Answer 1

既然你已經設置loadonce:false，尋呼和過濾請求設法把在服務器端進行處理。由於這可能不會發生在你的情況下，將不會有數據返回並設置在jqGrid中。

如果您使用的是loadonce:false和datatype:"json" jqGrid選項，那麼您的服務器必須實現您的網格分頁。服務器接收一些參數，這些參數在'GET'請求的情況下附加到url或者在"POST"請求的情況下在HTTP主體中發送，即：行，頁面，sidx，sord。

例如，如果您的表有一列，其索引'Col1'作爲當前的排序列，而rowNum: 20則表示您的網址將附加baseUrl?rows=20&page=1&sidx=Col1&sord=asc。您的服務器端編碼應該修改您的數據查詢，以使其具有ORDER BY (Col1 datafield in the table) asc和rowNum from 1 to 20。

如果您按照上述說明完成並且無法正常工作，則應驗證您的服務器代碼。