jQuery Grid Plugin - jqGrid - Topic: I need help with pagination from array data http://www.trirand.com/blog/?page_id=393/help/i-need-help-with-pagination-from-array-data Simple:Press Version 5.7.5.3 ulix on I need help with pagination from array data http://www.trirand.com/blog/?page_id=393/help/i-need-help-with-pagination-from-array-data#p12344 Help http://www.trirand.com/blog/?page_id=393/help/i-need-help-with-pagination-from-array-data#p12344 Hello everybody,

I am new to jQgrid, and would like to use it.

I want to set data source from array data, client side.

But, when I do so, I don't obtain the pagination, I only have a scroll bar on left side of the grid, with all the items in the same page.

Can someone help me please?

Following my code, in main part copied from the tutorial of 3.4.4 version

Thank you!

<html>      
    <head>
        <title>jqGrid Demo
        </title>
        <link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery.jqGrid.js" type="text/javascript"></script>
        <script src="js/jqModal.js" type="text/javascript"></script>
        <script src="js/jqDnR.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){

                jQuery("#list").jqGrid({
                    datatype: 'local',
                    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
                    colModel :[
                        {name:'invid',index:'invid', width:55, sorttype:'int'},
                        {name:'invdate',index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'},
                        {name:'amount',index:'amount', width:80, align:'right',sorttype:'float'},
                        {name:'tax',index:'tax', width:80, align:'right',sorttype:'float'},
                        {name:'total',index:'total', width:80,align:'right',sorttype:'float'},
                        {name:'note',index:'note', width:150, sortable:false} ],
                    pager: jQuery('#pager'),

                    rowNum:3,
                    viewrecords: true,
                    imgpath: 'themes/basic/images',
                    caption: 'My first grid'
                }).navGrid("#pager",{edit:false,add:false,del:false});

                for (var i = 0; i<data.length; i++){
                    jQuery("#list").addRowData(i+1, data[i]);
                }

            });

        </script>
    </head>
    <body>
        <script>

            var data = [
                {
                    invid:"3",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"44",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"55",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"66",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},  {
                    invid:"3",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"44",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"55",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"66",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},{
                    invid:"3",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"44",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"55",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"66",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},  {
                    invid:"3",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"44",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"55",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"},
                {
                    invid:"66",
                    invdate:"2007-10-01",
                    note:"note",
                    amount:"200.00",
                    tax:"10.00",
                    total:"210.00"}
            ];
        </script>
        <table id="list" class="scroll">
        </table>
        <div id="pager" class="scroll" style="text-align:center;">
        </div>
    </body>
</html>

]]> Mon, 23 Nov 2009 11:42:17 +0200