jqgrid page displayed as blank (not even headers are also displayed)

Question

I am trying to use jqgrid with spring mvc. when I run the application the grid is not displayes and i observe that then controller itself is not reached. Below is my jqgrid code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="/resources/mytheme/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/resources/mytheme/css/jqgrid/i.jqgrid.css" />

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="/resources/mytheme/js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/resources/mytheme/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/resources/mytheme/js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
    $("#list").jqGrid({
        url: "Ebus/crud",
        datatype: "json",
        mtype: "GET",
        colNames: ["Id", "FirstName", "LastName"],
        colModel: [
            { name: "id", width: 55 },
            { name: "firstName", width: 90 },
            { name: "lastName", width: 80, align: "right" }
        ],
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "id",
        sortorder: "firstName",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "id"
        },
        caption: "My first grid"
    }); 
}); 
</script>

</head>
<body>
<h1>jqgrid example</h1>
    <table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div> 
</body>
</html>

Below is my controller

 @RequestMapping(value="/users" ,method = RequestMethod.GET)
    public @ResponseBody  CustomUserResponse getAll(
    ) {
        System.out.println("Received request to get all users");
        List<LoginForm> users = loginService.getUsers();
        CustomUserResponse response = new CustomUserResponse();
        response.setRows(users);
        response.setRecords( String.valueOf(users.size()) );
        response.setPage( "1" );
        response.setTotal( "10" );
        return response;
    }

And my CustomUserResponse code is

public class CustomUserResponse {

    private String page;
    private String total;
    private String records;
    private List<LoginForm> rows;

    public CustomUserResponse() {
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

    public String getTotal() {
        return total;
    }

    public void setTotal(String total) {
        this.total = total;
    }

    public String getRecords() {
        return records;
    }

    public void setRecords(String records) {
        this.records = records;
    }

    public List<LoginForm> getRows() {
        return rows;
    }

    public void setRows(List<LoginForm> rows) {
        this.rows = rows;
    }
}

score 1 · Answer 1 · edited May 23 '17 at 11:50

I don't use Spring myself, so I can't help you in the server code. I still see some clear problems in your code.

You included .../css/jqgrid/i.jqgrid.css instead of ui.jqgrid.css. So I suppose that you don't loaded required CSS.
You use very old jQuery UI 1.8.6. Why you need to use such retro versions of jQuery UI?
You included very very old jQuery 1.4.4, which should be now only in museum. The current version of jqGrid support jQuery starting with jQuery 1.7.2, but it's strictly recommended to use the current 1.11.2 or 2.1.3 version
You don't included the information which version of jqGrid you use. It could be very important on every case of troubleshooting.
I don't see in your server code any implementation of server side paging or sorting. You just set total 10 without any testing of input parameters or the actual number of items in List<LoginForm> users. If you have not so much items in the grid (for example less as 1000) then you can return array of all items in the server response and to use loadonce: true option of jqGrid.
I would recommend you to use Fiddler or Developer Tools of IE/Chrome/Firefox (press F12 to start) to trace HTTP traffic between the server and the clien. I suppose that the option url: "Ebus/crud" which you use is wrong. The trace will help you better to understand what will be send from the client to the server and back. It is very helpful by troubleshooting.
I recommend you to include loadError callback in the list of jqGrid options. See the old answer for details.

jqgrid page displayed as blank (not even headers are also displayed)

1 Answers1