JQuery Easy-UI 实现动态分页

easy ui 链接 

Easy-UI 通过datagrid函数实现分页：ajax传递pagesize与pagenumber给服务器，服务器根据请求参数查出一页数据，并通过JSON格式返回到页面，datagrid函数自动对JSON数据解析展示，请注意JSON格式一定要正确。

<p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">themes</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="kwd" style="color: rgb(0, 0, 136);">default</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">css</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">themes</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">icon</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">css</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="lit" style="color: rgb(0, 102, 102);">1.6</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">min</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">js</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">min</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">js</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">json</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="lit" style="color: rgb(0, 102, 102);">2.4</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">js</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">jquery</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">easyui</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">json2</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">js</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="com" style="color: rgb(136, 0, 0);">//使用datagrid实现动态分页</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="com" style="color: rgb(136, 0, 0);">$(function(){</span>

<span class="pln" style="color: rgb(0, 0, 0);">   $</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">'#dg'</span><span class="pun" style="color: rgb(102, 102, 0);">).</span><span class="pln" style="color: rgb(0, 0, 0);">datagrid</span><span class="pun" style="color: rgb(102, 102, 0);">({</span>
<span class="pln" style="color: rgb(0, 0, 0);">       title</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">'信息列表'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       width</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">'auto'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       height</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">600</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       nowrap</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       striped</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       collapsible</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       border</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">       showFooter</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       pagination</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       rownumbers</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">false</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       fitColumns</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">false</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>
<span class="pln" style="color: rgb(0, 0, 0);">       pageSize</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="lit" style="color: rgb(0, 102, 102);">10</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">       </span>
<span class="pln" style="color: rgb(0, 0, 0);">       pageList</span><span class="pun" style="color: rgb(102, 102, 0);">:[</span><span class="lit" style="color: rgb(0, 102, 102);">10</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">15</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">20</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">25</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">30</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">35</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">40</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">45</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">50</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">100</span><span class="pun" style="color: rgb(102, 102, 0);">],</span><span class="pln" style="color: rgb(0, 0, 0);"> </span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">       sortName</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'flightCode'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span>

<span class="pln" style="color: rgb(0, 0, 0);">       frozenColumns</span><span class="pun" style="color: rgb(102, 102, 0);">:[[</span>
<span class="pln" style="color: rgb(0, 0, 0);">           </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">field</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'ck'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">checkbox</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">},</span>
<span class="pln" style="color: rgb(0, 0, 0);">           </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">field</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'code'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">title</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'航班号'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">width</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="lit" style="color: rgb(0, 102, 102);">80</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">hidden</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">sortable</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">}</span>
<span class="pln" style="color: rgb(0, 0, 0);">       </span><span class="pun" style="color: rgb(102, 102, 0);">]],</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">       columns</span><span class="pun" style="color: rgb(102, 102, 0);">:[[</span>
<span class="pln" style="color: rgb(0, 0, 0);">           </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">field</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'name'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">title</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'名称'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">width</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="lit" style="color: rgb(0, 102, 102);">80</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">hidden</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">},</span><span class="pln" style="color: rgb(0, 0, 0);">  </span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);">	   </span><span class="com" style="color: rgb(136, 0, 0);">//注意formatter函数可以对显示值进行格式化处理，比如日期显示格式，函数自定义。</span>
<span class="pln" style="color: rgb(0, 0, 0);">           </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">field</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'col4'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">title</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">'日期'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">hidden</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">true</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">width</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="lit" style="color: rgb(0, 102, 102);">120</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">formatter</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">value</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">row</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">index</span><span class="pun" style="color: rgb(102, 102, 0);">){</span><span class="kwd" style="color: rgb(0, 0, 136);">return</span><span class="pun" style="color: rgb(102, 102, 0);">;}}</span>
<span class="pln" style="color: rgb(0, 0, 0);">         </span><span class="pun" style="color: rgb(102, 102, 0);">]],</span>
<span class="pln" style="color: rgb(0, 0, 0);">       onDblClickRow</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">index</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">value</span><span class="pun" style="color: rgb(102, 102, 0);">){</span>
<span class="pln" style="color: rgb(0, 0, 0);">            $</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">'#dg'</span><span class="pun" style="color: rgb(102, 102, 0);">).</span><span class="pln" style="color: rgb(0, 0, 0);">datagrid</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">'selectRow'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">index</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">   </span>
<span class="pln" style="color: rgb(0, 0, 0);">       </span><span class="pun" style="color: rgb(102, 102, 0);">},</span>
<span class="pln" style="color: rgb(0, 0, 0);">       onClickCell</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">index</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">field</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">value</span><span class="pun" style="color: rgb(102, 102, 0);">){</span>
<span class="pln" style="color: rgb(0, 0, 0);">       </span><span class="pun" style="color: rgb(102, 102, 0);">},</span>
<span class="pln" style="color: rgb(0, 0, 0);">   </span><span class="pun" style="color: rgb(102, 102, 0);">});</span>
<span class="pln" style="color: rgb(0, 0, 0);">      </span><span class="kwd" style="color: rgb(0, 0, 136);">var</span><span class="pln" style="color: rgb(0, 0, 0);"> p </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> $</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">'#dg'</span><span class="pun" style="color: rgb(102, 102, 0);">).</span><span class="pln" style="color: rgb(0, 0, 0);">datagrid</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">'getPager'</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">  </span>
<span class="pln" style="color: rgb(0, 0, 0);">      $</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">p</span><span class="pun" style="color: rgb(102, 102, 0);">).</span><span class="pln" style="color: rgb(0, 0, 0);">pagination</span><span class="pun" style="color: rgb(102, 102, 0);">({</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          onSelectPage</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">pageNumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> pageSize</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">                getData</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">pageNumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> pageSize</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          </span><span class="pun" style="color: rgb(102, 102, 0);">},</span>
<span class="pln" style="color: rgb(0, 0, 0);">       onChangePageSize</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">pageNumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> pageSize</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">                getData</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">pageNumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> pageSize</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          </span><span class="pun" style="color: rgb(102, 102, 0);">},</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          onRefresh</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">pageNumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> pageSize</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">                getData</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">pageNumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> pageSize</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          </span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);">  </span>
<span class="pln" style="color: rgb(0, 0, 0);">      </span><span class="pun" style="color: rgb(102, 102, 0);">});</span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="pun" style="color: rgb(102, 102, 0);">});</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>

<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="kwd" style="color: rgb(0, 0, 136);">var</span><span class="pln" style="color: rgb(0, 0, 0);"> getData </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">pasenumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">pagesize</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">      $</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">ajax</span><span class="pun" style="color: rgb(102, 102, 0);">({</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          type</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">'POST'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          url</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> queryPaginationURL</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="com" style="color: rgb(136, 0, 0);">//用户请求数据的URL</span>
<span class="pln" style="color: rgb(0, 0, 0);">          data</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">"currentPageSize="</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">+</span><span class="pln" style="color: rgb(0, 0, 0);"> pagesize </span><span class="pun" style="color: rgb(102, 102, 0);">+</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">"&currentPageNumber="</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">+</span><span class="pln" style="color: rgb(0, 0, 0);"> pasenumber</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          error</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">XMLHttpRequest</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> textStatus</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> errorThrown</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">              alert</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">textStatus</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          </span><span class="pun" style="color: rgb(102, 102, 0);">},</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          success</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">data</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">              $</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">'#dg'</span><span class="pun" style="color: rgb(102, 102, 0);">).</span><span class="pln" style="color: rgb(0, 0, 0);">datagrid</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">'loadData'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> data</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">          </span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">      </span><span class="pun" style="color: rgb(102, 102, 0);">});</span><span class="pln" style="color: rgb(0, 0, 0);"> </span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="pun" style="color: rgb(102, 102, 0);">};</span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="com" style="color: rgb(136, 0, 0);">//页面初始化时调用函数加载数据</span>
<span class="pln" style="color: rgb(0, 0, 0);">  $</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pun" style="color: rgb(102, 102, 0);">(){</span>
<span class="pln" style="color: rgb(0, 0, 0);">      getData</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="lit" style="color: rgb(0, 102, 102);">1</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="lit" style="color: rgb(0, 102, 102);">10</span><span class="pun" style="color: rgb(102, 102, 0);">);</span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="pun" style="color: rgb(102, 102, 0);">});</span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="kwd" style="color: rgb(0, 0, 136);">function</span><span class="pln" style="color: rgb(0, 0, 0);"> refreshPage</span><span class="pun" style="color: rgb(102, 102, 0);">(){</span>
<span class="pln" style="color: rgb(0, 0, 0);">      getData</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="lit" style="color: rgb(0, 102, 102);">1</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">10</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">  </span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="pun" style="color: rgb(102, 102, 0);">};</span><span class="pln" style="color: rgb(0, 0, 0);"> Easy-UI 通过datagrid函数实现分页：ajax传递pagesize与pagenumber给服务器，服务器根据请求参数查出一页数据，并通过JSON格式返回到页面，datagrid函数自动对JSON数据解析展示，请注意JSON格式一定要正确。
jquery-easyui/themes/default/easyui.css

jquery-easyui/themes/icon.css

jquery-easyui/jquery-1.6.min.js

jquery-easyui/jquery.easyui.min.js

jquery-easyui/jquery.json-2.4.js

jquery-easyui/json2.js

//使用datagrid实现动态分页

$(function(){

   $('#dg').datagrid({
       title: '信息列表',
       width: 'auto',
       height: 600,
       nowrap: true,
       striped: true,
       collapsible:true,
       border: true, 
       showFooter:true,
       pagination:true,
       rownumbers:false,
       fitColumns:false,
       pageSize:10,       
       pageList:[10,15,20,25,30,35,40,45,50,100], 

       sortName:'flightCode',

       frozenColumns:[[
           {field:'ck',checkbox:true},
           {field:'code',title:'航班号',width:80,hidden:true,sortable:true}
       ]], 
       columns:[[
           {field:'name',title:'名称',width:80,hidden:true},  

	   //注意formatter函数可以对显示值进行格式化处理，比如日期显示格式，函数自定义。
           {field:'col4',title:'日期',hidden:true,width:120,formatter: function(value,row,index){return;}}
         ]],
       onDblClickRow: function(index,value){
            $('#dg').datagrid('selectRow',index);   
       },
       onClickCell: function(index,field,value){
       },
   });
      var p = $('#dg').datagrid('getPager');  
      $(p).pagination({ 
          onSelectPage: function (pageNumber, pageSize) { 
                getData(pageNumber, pageSize); 
          },
       onChangePageSize:function (pageNumber, pageSize) { 
                getData(pageNumber, pageSize); 
          }, 
          onRefresh:function (pageNumber, pageSize) { 
                getData(pageNumber, pageSize); 
          }  
      });
  }); 

  var getData = function (pasenumber,pagesize) { 
      $.ajax({ 
          type: 'POST', 
          url: queryPaginationURL, //用户请求数据的URL
          data: "currentPageSize=" + pagesize + "¤tPageNumber=" + pasenumber, 
          error: function (XMLHttpRequest, textStatus, errorThrown) { 
              alert(textStatus); 
          }, 
          success: function (data) { 
              $('#dg').datagrid('loadData', data); 
          } 
      }); 
  };
  //页面初始化时调用函数加载数据
  $(function(){
      getData(1,10);
  });
  function refreshPage(){
      getData(1, 10);  
  }; 

 <table id="dg" class="easyui-datagrid"  toolbar="#toolbar" singleSelect="true"> </table>


JSON数据格式
{                                                      
 "total":239,                                                      
 "rows":[                                                          
  {"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},         
  {"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},

 ]                                                          
}         



</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);"><</span><span class="pln" style="color: rgb(0, 0, 0);">table id</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="str" style="color: rgb(0, 136, 0);">"dg"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">class</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="str" style="color: rgb(0, 136, 0);">"easyui-datagrid"</span><span class="pln" style="color: rgb(0, 0, 0);">  toolbar</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="str" style="color: rgb(0, 136, 0);">"#toolbar"</span><span class="pln" style="color: rgb(0, 0, 0);"> singleSelect</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="str" style="color: rgb(0, 136, 0);">"true"</span><span class="pun" style="color: rgb(102, 102, 0);">></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);"></</span><span class="pln" style="color: rgb(0, 0, 0);">table</span><span class="pun" style="color: rgb(102, 102, 0);">></span></span></p>

JSON数据格式

<p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">                                                      </span>
<span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">"total"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="lit" style="color: rgb(0, 102, 102);">239</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">                                                      </span>
<span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">"rows"</span><span class="pun" style="color: rgb(102, 102, 0);">:[</span><span class="pln" style="color: rgb(0, 0, 0);">                                                          </span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="str" style="color: rgb(0, 136, 0);">"code"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"001"</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="str" style="color: rgb(0, 136, 0);">"name"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"Name 1"</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="str" style="color: rgb(0, 136, 0);">"addr"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"Address 11"</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="str" style="color: rgb(0, 136, 0);">"col4"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"col4 data"</span><span class="pun" style="color: rgb(102, 102, 0);">},</span><span class="pln" style="color: rgb(0, 0, 0);">         </span>
<span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="str" style="color: rgb(0, 136, 0);">"code"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"002"</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="str" style="color: rgb(0, 136, 0);">"name"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"Name 2"</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="str" style="color: rgb(0, 136, 0);">"addr"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"Address 13"</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="str" style="color: rgb(0, 136, 0);">"col4"</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="str" style="color: rgb(0, 136, 0);">"col4 data"</span><span class="pun" style="color: rgb(102, 102, 0);">},</span></span></p><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px;"><span style="line-height: 21px; font-size: 12px;"><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">]</span><span class="pln" style="color: rgb(0, 0, 0);">                                                          </span>
<span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);">   </span></span><span class="pln" style="color: rgb(0, 0, 0);">      </span></p>

 
 
<span><span class="keyword">package</span><span> thejavabean;  </span></span>
<li><span>  </span></li>
import java.io.IOException;  
import java.io.PrintWriter;  
import java.sql.SQLException;  
import java.util.ArrayList;  
import java.util.List;  
  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
import net.sf.json.JSONArray;  
  
public class Table_info extends HttpServlet {  
  
    public void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
  
        try {  
            response.setContentType("text/html");  
            response.setCharacterEncoding("UTF-8");  
            PrintWriter out = response.getWriter();  
            String page = request.getParameter("page"); // 当前页数  
            String rows = request.getParameter("rows"); // 每页显示行数    
              
            List<Student> allList=selectAll();   //获取所有数据  
            int p=Integer.parseInt(page);      
            int r=Integer.parseInt(rows);  
            int begin=(p-1)*r;  //当前页开始项  
            int num=begin;  
            int count=r;  
            List<Student> list=new ArrayList();  
            System.out.println();  
            while(count>0&&num<allList.size()){  
                list.add(allList.get(num));   
                num++;  
                count--;  
            }  
            int total=selectAll().size();  
            String json = "{\"total\":"+total+" , \"rows\":"+JSONArray.fromObject(list).toString()+"}";  
              
            response.getWriter().write(json.toString());  
            out.flush();  
            out.close();  
        } catch (SQLException e) {  
            e.printStackTrace();  
        }  
          
    }  
    public List<Student> selectAll() throws SQLException{  
        StudentManage sm=new StudentManage();  
        return sm.selectAll("");  
          
    }  
    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        this.doGet(request, response);  
          
    }  
  
}