Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You have two main problems. The first one: the sorting. It's very easy to solve. jqGrid with <code>datatype: 'json'</code> ask the get <em>only one page of sorted data</em>. If the user change the sorting order or go to the next page for example the new request with another parameters will be send to the server.</p> <p>If you want that the data will be loaded <strong>only once from the server</strong> and then will be <em>locally</em> sorted or paged you need just add <code>loadonce: true</code> option to the grid. You have to returns still correctly sorted data to have correct sort order initially.</p> <p>For performance reason you should always include <code>gridview: true</code> to the list of used options.</p> <p>The next your problem with two formats of JSON data returned from the server you can solve in the simple way. You can modify the <code>jsonReader</code> to the following:</p> <pre><code>jsonReader: { repeatitems: false, id: "InternetAddress", root: function (obj) { if ($.isArray(obj)) { return obj; } if ($.isArray(obj.items)) { return obj.items; } return []; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { if ($.isArray(obj)) { return obj.length; } if ($.isArray(obj.items)) { return obj.items.length; } return 0; } } </code></pre> <p>The corresponding demos: <a href="http://www.ok-soft-gmbh.com/jqGrid/PSolano1.htm" rel="nofollow">the first one</a> and <a href="http://www.ok-soft-gmbh.com/jqGrid/PSolano2.htm" rel="nofollow">the second one</a> use the same code, but read different formatted JSON data (the data which you posted). Both produce the same results. I changed <code>rowNum</code> to <code>rowNum: 2</code> to demonstrate that local paging work. Additionally you can consider to use <code>height: 'auto'</code> instead of fixed value <code>height: 500</code>. The <code>rowNum</code> which you use will define the height of the grid.</p> <p>Additionally I included in the second demo the line</p> <pre><code>$("#list2").jqGrid('filterToolbar', {stringResult: true, defaultSearch: 'cn', searchOnEnter: false}); </code></pre> <p>to demonstrate the power of <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3atoolbar_searching" rel="nofollow">local data filtering</a>. I added one more option <code>ignoreCase: true</code> to have case insensitive filtering/searching of data.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload