Javascript 误导性的jqgrid文档：客户端排序，但服务器端分页

这个问题已经被回答了多次。但在这里，我想指出，如果文档中提供的代码在没有额外代码的情况下无法实现，那么首先为什么要在那里给出它。这简直是误导。文档中给出的代码实现了分页，但在排序时，网格数据就消失了

如果我错了，请纠正我

jQuery("#gridid").jqGrid({
...
datatype: 'json', // can be xml
loadComplete : function () {
   jQuery("#gridid").jqGrid('setGridParam',{datatype:'local'});
},
onPaging : function(which_button) {
   jQuery("#gridid").jqGrid('setGridParam',{datatype:'json'});
},
...
});

---

您没有发布获得代码的文档的确切引用。我找到了

---

jqGrid是一款开源产品，免费提供。这是实用的，但您应该理解，在这种情况下，产品及其文档不可能是完美的。您引用的代码部分可能在一些非常旧的jqGrid版本中工作，但在当前版本的jqGrid中它是错误的代码。实现“客户端排序，但服务器端分页”的意义非常可疑。关于你会发现的主题，我的旧答案。我现在会重写部分答案，但一般来说，使用旧版本测试的代码可能与jqGrid的新版本不完全兼容。

您没有发布获得代码的文档的确切参考。我找到了

---

jqGrid是一款开源产品，免费提供。这是实用的，但您应该理解，在这种情况下，产品及其文档不可能是完美的。您引用的代码部分可能在一些非常旧的jqGrid版本中工作，但在当前版本的jqGrid中它是错误的代码。实现“客户端排序，但服务器端分页”的意义非常可疑。关于你会发现的主题，我的旧答案。我现在会重写部分答案，但一般来说，使用旧版本测试的代码可能与jqGrid的新版本不完全兼容。

我可以说，没有任何地方发生故意误导。他们提供免费的插件，虽然它是一个非常巨大的插件。像奥列格这样的人所做的工作使它更加完美。对于您的问题，与“客户端排序和服务器端分页”相关的代码就是可以解决您的问题的代码。这是在奥列格的帮助下拍摄的

这是我的代码版本

  loadComplete: function(data) {

 var $this = $(this);
 if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
 // because one use repeatitems: false option and uses no
 // jsonmap in the colModel the setting of data parameter
 // is very easy. We can set data parameter to data.rows:
    $this.jqGrid('setGridParam', {
      datatype: 'local',
      data: data.userdata,
      pageServer: data.page,
      recordsServer: data.records,
      lastpageServer: data.total
      });
// because we changed the value of the data parameter
// we need update internal _index parameter:
    this.refreshIndex();
      if ($this.jqGrid('getGridParam', 'sortname') !== '') {
// we need reload grid only if we use sortname parameter,
// but the server return unsorted data
    $this.triggerHandler('reloadGrid');
}
} else {
    $this.jqGrid('setGridParam', {
    page: $this.jqGrid('getGridParam', 'pageServer'),
    records: $this.jqGrid('getGridParam', 'recordsServer'),
    lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
});
this.updatepager(false, true);}
}

onPaging:function(){
/*this code  is to fix the issue when we click on next page with some data in filter tool bar
     * along with this in grid definition( in filterToolbar ) we have to return true in "beforeClear "event 
     * */
    var data = $(this).jqGrid("getGridParam", "postData");
    data._search = false;
    data.filters=null;
    data.page=$(this).jqGrid("getGridParam","page");

    /* comment this line if you disable filter toolbar*/
    $(this)[0].clearToolbar();


    //Here making _search alone false will not solve problem, we have to make search also false. like in below.
    $(this).jqGrid('setGridParam', { search: false, postData:data });
    var data = $(this).jqGrid("getGridParam", "postData");


    /*this is to fix the issue when we go to last page(say there are only 3 records and page size is 5) and click 
     * on sorting the grid fetches previously loaded data (may be from its buffer) and displays 5 records  
     * where in i am expecting only 3 records to be sorted out.along with this there should be a modification in source code.
     */ 

    $(this).jqGrid("clearGridData");

    /* this is to make the grid to fetch data from server on page click*/

    $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");   

}   

---

对于您必须在源代码中进行的修改，请参见..

我可以说，在任何地方都不会发生故意误导。他们提供免费的插件，虽然它是一个非常巨大的插件。像奥列格这样的人所做的工作使它更加完美。对于您的问题，与“客户端排序和服务器端分页”相关的代码就是可以解决您的问题的代码。这是在奥列格的帮助下拍摄的

这是我的代码版本

  loadComplete: function(data) {

 var $this = $(this);
 if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
 // because one use repeatitems: false option and uses no
 // jsonmap in the colModel the setting of data parameter
 // is very easy. We can set data parameter to data.rows:
    $this.jqGrid('setGridParam', {
      datatype: 'local',
      data: data.userdata,
      pageServer: data.page,
      recordsServer: data.records,
      lastpageServer: data.total
      });
// because we changed the value of the data parameter
// we need update internal _index parameter:
    this.refreshIndex();
      if ($this.jqGrid('getGridParam', 'sortname') !== '') {
// we need reload grid only if we use sortname parameter,
// but the server return unsorted data
    $this.triggerHandler('reloadGrid');
}
} else {
    $this.jqGrid('setGridParam', {
    page: $this.jqGrid('getGridParam', 'pageServer'),
    records: $this.jqGrid('getGridParam', 'recordsServer'),
    lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
});
this.updatepager(false, true);}
}

onPaging:function(){
/*this code  is to fix the issue when we click on next page with some data in filter tool bar
     * along with this in grid definition( in filterToolbar ) we have to return true in "beforeClear "event 
     * */
    var data = $(this).jqGrid("getGridParam", "postData");
    data._search = false;
    data.filters=null;
    data.page=$(this).jqGrid("getGridParam","page");

    /* comment this line if you disable filter toolbar*/
    $(this)[0].clearToolbar();


    //Here making _search alone false will not solve problem, we have to make search also false. like in below.
    $(this).jqGrid('setGridParam', { search: false, postData:data });
    var data = $(this).jqGrid("getGridParam", "postData");


    /*this is to fix the issue when we go to last page(say there are only 3 records and page size is 5) and click 
     * on sorting the grid fetches previously loaded data (may be from its buffer) and displays 5 records  
     * where in i am expecting only 3 records to be sorted out.along with this there should be a modification in source code.
     */ 

    $(this).jqGrid("clearGridData");

    /* this is to make the grid to fetch data from server on page click*/

    $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");   

}   

---

对于源代码中需要进行的修改，请参见..

感谢您发布了这么好的答案。我在寻找更紧凑的东西，比如3-5行代码。只有在网格代码中隐式实现了它，这才有可能。希望在即将发布的版本中很快得到一个！谢谢你的回复。我在寻找更紧凑的东西，比如3-5行代码。只有在网格代码中隐式实现了它，这才有可能。希望在即将发布的版本中很快得到一个！