JQGrid page Navigation with JSON data inside GSP(groovy server pages)?

Question

First thing I want to know that which type of pagination is more preferable (Client side or Server side) in "jqGrid" structure for gsp page.

My issue is that when I set "loadonce:true" then automatically sorting is work and navigation icons(arrows) are getting disabled. When I comment out "loadonce:true" then sorting stop working and navigation arrows are enabled but not working at all.

I'm using following things in my project and my page navigation is not working.

Cotroller

class TestDBController {

    def dataSource


    def index = {

    }

    def jq_customer_list = {

        try {
            def sql = new Sql(dataSource)

            String query = "select * from employee"
            List customers = sql.rows(query)
            def count1 = sql.rows(query).size()
            def jsonCells = customers.collect {
            [cell: [it.fname,
                    it.lname,
                    it.age,
                    it.id ] 
            ]           
            }                   
            def jsonData= [ rows: jsonCells]
            render jsonData as JSON     
        }
        catch(Exception e)
        {
            System.out.println("Generated exception is "+e)
        }
      } 
}

GSP with jqgrid code -

css and javascript files -

<link rel="stylesheet" href="${resource(dir: 'css', file: 'timeTable.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir:'css/ui-lightness',file:'jquery-ui-     1.9.2.custom.css')}"type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'ttajqgridtable.css')} "type="text/css">

<g:javascript src="jquery-1.8.3.js" />
<g:javascript src="grid.locale-en.js" />
<g:javascript src="jquery.jqGrid.min.js" /> 
<g:javascript src="jquery-ui-1.9.2.custom.min.js" />

JQuery code

<body>
        <table id="list" class="scroll jqTable"></table>
        <div id="pager" class="scroll"></div>

        <script type="text/javascript">

            $(document).ready(function () {
             jQuery("#list").jqGrid({

                  url:'${g.createLink( controller:'TestDB', action:'jq_customer_list' )}',
                  datatype: "json",               
                  colNames:['first Name','Last Name','Age','id'],
                  colModel:[
                    {name:'fName'},
                    {name:'lName'},
                    {name:'age'},
                    {name:'id'}   
                  ],
                  rowNum: 5,
                  width : 1000,
                  height: 500,
                  shrinkToFit: true,
                  pager: "#pager",
                  paging: true,
                 viewrecords: true,
                 gridview: true,
                 loadonce:true,              
                  rowList : [ 5,10, 25],                 
                  sortname : 'fname',
                  viewrecords : true,
                  sortorder : "desc",                
                  rownumbers: true,                  
                  altRows:true,                 
                  caption: "Division Data"                
                });
             jQuery("#list").jqGrid('setGridParam',{datatype:'json'});
             jQuery("#tabs").tabs();             
            });           
            </script>

    </div>

 </body>
 </html>

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

If you only have a small resultset to work with, and you are certain it will never grow, then client side pagination is probably fine. If you're working with larger sets of data, then you will want to implement server side pagination.

There is a more thorough discussion about the differences between client and server side pagination here.

In order to implement server side pagination with jqgrid, you will need to do something with the max and offset parameters that jqgrid submits to your controller's jq_customer_list action. It's actually pretty straightforward, take a look at the Groovy Sql docs for an example.

edited May 23 '17 at 12:20

Community

1
1

answered Oct 14 '14 at 19:14

rcgeorge23

3,594
4
29
54

In controller I'm getting 2000 records on an average, so which type of pagination is fine for me. – user3913652 Oct 15 '14 at 09:53
You'll need to make a judgement call - if the time taken to pull those 2000 records onto the client and sort/search through them etc while they're all there is acceptable then you're probably better off going with client side pagination as it's less work to implement... – rcgeorge23 Oct 16 '14 at 06:58

score 0 · Answer 2 · answered Oct 15 '14 at 10:11

loadonce is implemented with JQGrid 3.7. If want to implement proper Pagination, Sorting and Searching just use never versions(latest one) of jqGrid.

Here is my working example -

CSS and JS file with proper order -

<link rel="stylesheet"href="${resource(dir:'css/ui-lightness',file:'jquery-ui-1.9.2.custom.css')}"type="text/css">
<link rel="stylesheet"href="${resource(dir: 'css', file: 'ttajqgridtable.css')}" type="text/css">    
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" type="text/css">

<g:javascript src="jquery-1.11.0.min.js" />
<g:javascript src="grid.locale-en.js" />
<g:javascript src="jquery.jqGrid.min.js" /> 
<g:javascript src="jquery-ui-1.9.2.custom.min.js" />

Jquery and JQGrid code -

    <script type="text/javascript">           
        $(document).ready(function () {
         jQuery("#clist").jqGrid({

              url:'${g.createLink( controller:'TableDataJQgrid', action:'jq_customer_list' )}',
              datatype: "json",
              mtype:"post",
              colNames:['first Name','Last Name','Age','id'],
              colModel:[
                        {name:'fName', width:120, sortable: true, editable: true, align: 'center' },
                        {name:'lName',  width:120, sortable: true, editable: true, align: 'center'},
                        {name:'age',   width:80, sorttype:"int", sortable: true, editable: false, align: 'center'},
                        {name:'id' ,  width:80, sorttype:"int", sortable: true, editable: false , align: 'center'}

              ],
              rowNum: 5,
              width : 1000,
              height: 500,
              shrinkToFit: true,
              pager: "#list_pager",
              paging: true,
              viewrecords: true,
              gridview: true,
              loadonce:true,                
              rowList : [ 5,10, 25],  
              rowTotal: 21,               
              sortname : 'fname',
              viewrecords : true,
              sortorder : "desc",                
              rownumbers: true,                  
              altRows:true,                 
              caption: "Division Data"
          });
       jQuery("#list").jqGrid('navGrid','#list_pager'{edit:false,add:false,del:false});         
        });           
        </script>

JQGrid page Navigation with JSON data inside GSP(groovy server pages)?

2 Answers2