3
 
1
​
2
    <div id="grid_paging" style="margin:5px auto;"></div>    
3
​

127
 
1
​
2
    $(function () {
3
        var colM = [
4
            { title: "Order ID", width: 100, dataIndx: "OrderID" },
5
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
6
            { title: "Product Name", width: 190, dataIndx: "ProductName" },
7
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
8
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
9
            { title: "Order Date", width: 100, dataIndx: "OrderDate" },
10
            { title: "Required Date", width: 100, dataIndx: "RequiredDate" },
11
            { title: "Shipped Date", width: 100, dataIndx: "ShippedDate" },
12
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
13
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
14
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
15
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress" },
16
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
17
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion" },
18
            { title: "Shipping Postal Code", width: 130, dataIndx: "ShipPostalCode" }
19
        ];
20
        var dataModel = {
21
            location: "remote",            
22
            dataType: "JSON",
23
            method: "GET",
24
            url: "/pro/invoice/get"
25
            //url: "/invoice.php", //for PHP
26
        }
27
        var pageModel = { 
28
            type: "local", 
29
            rPP: 20, strRpp: "{0}", 
30
​
31
            //customize localization strings.
32
            strDisplay: "{0} to {1} of {2}",
33
            strPage: "Page {0} / {1}",
34
                 
35
            layout: ['first','prev', 'next','last', "|", "strPage"]                
36
        }   
37
        var grid1 = $("div#grid_paging").pqGrid({
38
            width: 900,
39
            height: 300,
40
            showTitle: false,
41
            collapsible: false,            
42
            pageModel: pageModel,                      
43
            toolbar: {
44
                cls: 'pq-toolbar',
45
                items: [
46
                    {
47
                        type: 'button',
48
                        label: "Custom layout",
49
                        listener: function() {
50
                            //debugger;
51
                            //this.pager().destroy();
52
                            this.option('pageModel.layout',['strDisplay', '|',"strPage", "|", "first","prev","next","last"])
53
                            this.refresh();
54
                        }
55
                    },
56
                    {
57
                        type: 'button',
58
                        label: "Default layout",
59
                        listener: function() {
60
                            //debugger;
61
                            //this.pager().destroy();
62
                            this.option('pageModel.layout',$.paramquery.pqPager.defaults.layout)
63
                            this.refresh();
64
                        }
65
                    },
66
                    { type: 'separator'},
67
                    {
68
                        type: 'select',
69
                        cls:'rpp',
70
                        label: "Rpp: ",
71
                        value: pageModel.rPP,
72
                        options: [10, 20, 50, 100, 1000],
73
                        listener: function(evt) {
74
                            this.option('pageModel.rPP', $(evt.target).val())
75
                            this.refreshDataAndView();
76
                        }
77
                    },
78
                    {
79
                        type: 'textbox',
80
                        cls: 'curpage',
81
                        label: "Page No: ",
82
                        listener: {
83
                            timeout: function(evt) {
84
                                this.goToPage({page:$(evt.target).val()})
85
                            }
86
                        }
87
                    },
88
                    { type: 'separator'},
89
                    {
90
                        type: 'button',
91
                        label: "Prev",
92
                        cls:'prev',
93
                        listener: function() {
94
                            var page = this.option('pageModel.curPage');
95
                            this.goToPage({page: page-1})
96
                        }
97
                    },
98
                    {
99
                        type: 'button',
100
                        label: "Next",
101
                        cls:'next',
102
                        listener: function() {
103
                            var page = this.option('pageModel.curPage');
104
                            this.goToPage({page: page+1})
105
                        }
106
                    },
107
                    {
108
                        type: 'button',
109
                        label: "Toggle pager",
110
                        //cls:'next',
111
                        listener: function() {
112
                            this.pager().widget().toggle()
113
                            this.refresh();
114
                        }
115
                    }
116
                ]
117
            },
118
            dataModel: dataModel,
119
            colModel: colM,
120
            wrap: false, hwrap: false,
121
            //freezeCols: 2,            
122
            numberCell: { resizable: true, title: "#" },
123
            title: "Shipping Orders"
124
        });
125
    });
126
​
127
​

​x
 
1
​
2
.pq-toolbar .curpage{
3
    width:35px;
4
}
5
​

45
 
1
​
2
public class Invoice
3
{
4
    [Key]
5
    public long rowID { get; set; }
6
    public int OrderID { get; set; }
7
    public String CustomerName { get; set; }
8
    public String ProductName { get; set; }
9
    public Decimal UnitPrice { get; set; }
10
    public short Quantity { get; set; }            
11
    public DateTime? OrderDate { get; set; }
12
    public DateTime? RequiredDate { get; set; }        
13
    public Decimal Freight { get; set; }//money
14
    public String ShipName { get; set; }
15
    public DateTime? ShippedDate { get; set; }        
16
    public String ShipAddress { get; set; }
17
    public String ShipCity { get; set; }
18
    public String ShipRegion { get; set; }
19
    public String ShipPostalCode { get; set; }
20
    public String ShipCountry { get; set; }
21
}
22
public class invoiceController : Controller
23
{
24
    //without paging (load at once)
25
    public ActionResult get()
26
    {
27
        pqTestContext db = new pqTestContext();
28
​
29
        //take first 250 records.
30
        var orders = (from order in db.Invoices
31
                        orderby order.OrderID
32
                        select order).Take(250);
33
​
34
        StringBuilder sb = new StringBuilder(@"{""data"":");
35
​
36
        JavaScriptSerializer js = new JavaScriptSerializer();
37
​
38
        String json = js.Serialize(orders);
39
        sb.Append(json);
40
        sb.Append("}");
41
​
42
        return this.Content(sb.ToString(), "text/text");
43
    }
44
}
45
​