JQuery Easy-UI 實現動態分頁
阿新 • • 發佈:2019-01-29
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);">"¤tPageNumber="</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
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import net.sf.json.JSONArray;
- publicclass Table_info extends HttpServlet {
- publicvoid 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("");
- }
- publicvoid doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- this.doGet(request, response);
- }
- }