jqgrid:从现有表中分页的问题

时间:2010-08-25 14:21:16

标签: jquery jqgrid pagination html-table

在将html表格转换为网格时,我开始想要知道如何使用jqgrid的另一个post。我有那个工作。但是,数据未被分页。它将表格转换为网格,显示寻呼机控件和所有内容;但它显示page 1 of 0。仅当我从下拉列表中选择不同的页面大小时才会分页数据。

为什么数据没有被分页?我需要打电话给其他任何事情才能实现这个目标吗?

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



<html xmlns="http://www.w3.org/1999/xhtml">
<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>

2 个答案:

答案 0 :(得分:2)

在我看来,您遇到与Pagination problem in jqgrid with array data中描述的问题相同的问题。

尝试致电

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

tableToGrid之后。

答案 1 :(得分:0)

调用tableToGrid

后,您可以将以下代码编写为变通方法

jQuery("#GridView1").jqGrid('setGridParam', {page: 1}).trigger("reloadGrid");