views:

46

answers:

1

I had started another post wanting to know how to use jqgrid when you are converting a html table to grid. I've got that working. However the data is not paged. It converts table to grid, displays the pager controls and all; however it shows page 1 of 0. The data is paged only when I select a different page size from the drop-down.

Why is the data not paged? Do I need to call anything else to make this happen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;



<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head><title>
    jqGrid Actual Demo
</title><link type="text/css" rel="Stylesheet" href="jquery-ui-1.8.4.custom/css/custom-theme/jquery-ui-1.8.4.custom.css" /><link type="text/css" rel="Stylesheet" href="jquery.jqGrid-3.7.2/css/ui.jqgrid.css" />

    <script src="jquery.jqGrid-3.7.2/js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>

    <script src="jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js" type="text/jscript"></script>

    <script type="text/javascript">
        $(function() {
            tableToGrid('#GridView1', {
                datatype: 'local',
                rowNum: 10,
                pager: '#pager',
                rowList: [10, 20, 30]
            });
        });
    </script>

</head>
<body>
    <form name="form1" method="post" action="Default2.aspx" id="form1">

    <div>
        <div>
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">EmployerID</th><th scope="col">EmployeeID</th><th scope="col">Lastname</th><th scope="col">FirstName</th><th scope="col">Addr1</th><th scope="col">Addr2</th><th scope="col">City</th><th scope="col">State</th><th scope="col">Zip</th><th scope="col">Country</th>
        </tr><tr>
            <td>285</td><td>   519828</td><td>TURTZ             </td><td>JAIME DEE         </td><td>1249 NEVADA SKY ST            </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89101     </td><td>US </td>
        </tr><tr>
            <td>710</td><td>    00862</td><td>LOPEZ             </td><td>JOSE              </td><td>2752 E. TROPICANA             </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89120     </td><td>USA</td>
        </tr><tr>
            <td>710</td><td>    00832</td><td>BLUE              </td><td>JOSE              </td><td>3924 AQUARMARINE WAY #81      </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89103     </td><td>USA</td>
        </tr><tr>
            <td>710</td><td>    00101</td><td>PECK              </td><td>MARICELA          </td><td>2601 GRAND CANYON DR #2037    </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89117     </td><td>USA</td>
        </tr><tr>
            <td>710</td><td>    00855</td><td>GONZALEZ          </td><td>FLOYD             </td><td>1500 STARDUST RD #3082        </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89109     </td><td>USA</td>
        </tr><tr>
            <td>875</td><td>    27599</td><td>ESCAMILLA         </td><td>FRANCISCO         </td><td>6689 CHURNET VALLEY           </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89139     </td><td>US </td>
        </tr><tr>
            <td>875</td><td>    27599</td><td>ESCAMILLA         </td><td>FRANCISCO         </td><td>6689 CHURNET VALLEY           </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89139     </td><td>US </td>
        </tr><tr>
            <td>CCR</td><td>    96208</td><td>COLLIER           </td><td>SYLVIA            </td><td>705 WASHINGTON #21            </td><td>                              </td><td>RENO                          </td><td>NV </td><td>89053     </td><td>   </td>
        </tr><tr>
            <td>710</td><td>      113</td><td>YU                </td><td>YENJEN            </td><td>8120 MT ROYAL CT              </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89128     </td><td>USA</td>
        </tr><tr>
            <td>190</td><td>    41643</td><td>MCBEATH           </td><td>WILLIAM           </td><td>2212 PAIUTE MEADOWS           </td><td>                              </td><td>LAS VEGAS                     </td><td>NV </td><td>89134     </td><td>US </td>
        </tr>
        <!-- up to 300 rows -->
    </table>
</div>

        <div id="pager">
        </div>
    </div>
    </form>
</body>
</html>
+1  A: 

It seems to me that you have the same problem as described in http://stackoverflow.com/questions/3491963/pagination-problem-in-jqgrid-with-array-data/3495210#3495210.

Try to call

jQuery("#GridView1").setGridParam({ rowNum: 10 }).trigger("reloadGrid");

after tableToGrid.

Oleg
+1 sweet! thanx :)
deostroll