2. 程式人生 > >JQuery Easy-UI 實現動態分頁

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);">"&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>
  1. <span><span class="keyword">package</span><span> thejavabean;  </span></span>
  2. <li><span>  </span></li>
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.sql.SQLException;  
  6. import java.util.ArrayList;  
  7. import java.util.List;  
  8. import
     javax.servlet.ServletException;  
  9. import javax.servlet.http.HttpServlet;  
  10. import javax.servlet.http.HttpServletRequest;  
  11. import javax.servlet.http.HttpServletResponse;  
  12. import net.sf.json.JSONArray;  
  13. publicclass Table_info extends HttpServlet {  
  14.     publicvoid doGet(HttpServletRequest request, HttpServletResponse response)  
  15.             throws ServletException, IOException {  
  16.         try {  
  17.             response.setContentType("text/html");  
  18.             response.setCharacterEncoding("UTF-8");  
  19.             PrintWriter out = response.getWriter();  
  20.             String page = request.getParameter("page"); // 當前頁數
  21.             String rows = request.getParameter("rows"); // 每頁顯示行數  
  22.             List<Student> allList=selectAll();   //獲取所有資料
  23.             int p=Integer.parseInt(page);      
  24.             int r=Integer.parseInt(rows);  
  25.             int begin=(p-1)*r;  //當前頁開始項
  26.             int num=begin;  
  27.             int count=r;  
  28.             List<Student> list=new ArrayList();  
  29.             System.out.println();  
  30.             while(count>0&&num<allList.size()){  
  31.                 list.add(allList.get(num));   
  32.                 num++;  
  33.                 count--;  
  34.             }  
  35.             int total=selectAll().size();  
  36.             String json = "{\"total\":"+total+" , \"rows\":"+JSONArray.fromObject(list).toString()+"}";  
  37.             response.getWriter().write(json.toString());  
  38.             out.flush();  
  39.             out.close();  
  40.         } catch (SQLException e) {  
  41.             e.printStackTrace();  
  42.         }  
  43.     }  
  44.     public List<Student> selectAll() throws SQLException{  
  45.         StudentManage sm=new StudentManage();  
  46.         return sm.selectAll("");  
  47.     }  
  48.     publicvoid doPost(HttpServletRequest request, HttpServletResponse response)  
  49.             throws ServletException, IOException {  
  50.         this.doGet(request, response);  
  51.     }  
  52. }  


相關推薦

JQuery Easy-UI 實現動態分頁

Easy-UI 通過datagrid函式實現分頁：ajax傳遞pagesize與pagenumber給伺服器，伺服器根據請求引數查出一頁資料，並通過JSON格式返回到頁面，datagrid函式自動對JSON資料解析展示，請注意JSON格式一定要正確。 <p st

jQuery Easy UI 實現頁面的Loading效果（類似於Android的ProgressDialog）

前言 很常用的一種前端效果，比如當用戶點選網頁的某個按鈕傳送了一條非同步請求，如果響應時間過長容易導致使用者重複點選，一方面影響使用者體驗一方面容易造成不必要的服務端壓力，Easy UI有現成

jquery page.js 實現ajax分頁

呼叫的是豆瓣的api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g

jquery easy-ui 分頁插件的運用(給td添加事件,獲取匯總內容)

gin submit isp columns tag lac summary format put <#include ‘/admin/express-header.html‘ > <div class="main" style=" background:

springmvc + jquery datatable + ajax實現服務端動態分頁查詢

一、實現目標，如上圖所示 二、需要匯入的js和css如下        1、 jquery.dataTables.css         2、jquery.js          3、 jquery.dataTables.js 三、jsp頁面（datatableTest

利用Mybatis的動態SQL實現物理分頁

利用Mybatis 的動態SQL 實現物理分頁 摘要：實際專案中，經常會遇到分頁的問題，mybatis 自帶的分頁使用的是記憶體分頁，如果資料量較大，那麼必定 會發生記憶體溢位。本文提出一種方法，利用mybatis 強大的動態 sql，為查詢語句加上物理分頁功能。 關鍵詞：

jquery easy ui 1.5實現檔案匯入功能

             昨天向大家展示了easy ui 的匯出功能，今天向大家展示下匯入的功能，也是通過jxl第三方包實現的。結合網上資源然後自己整理下就ok了，效果圖如下： 如果不用easy ui元件最好加上一個上傳按鈕實現功能。 上傳後，服務端請求相應，通過fil

基於jquery 的分頁外掛，前端實現假分頁效果

上次分享了一款jquery外掛，現在依舊分享這個外掛，不過上一次分享主要是用於regular框件，且每一頁資料都是從後端獲取過來的，這一次的分享主要是講一次性獲取完資料 然後手動進行分頁。此需求基本上是和前端搜尋掛鉤的。所有的資料都在頁面裡只是展示的不同。這樣前端搜尋就能從全

jQuery Easy UI Draggable(拖動)組件

utf-8 agg style 對象 defaults range sheet ole ims 上文已經提到過了 jQuery EasyUI插件引用一般我們經常使用的有兩種方式（排除easyload載入方式），所以本篇要總結的Draggable組件相同有兩種方式載入

Asp.Net北大青鳥總結(四)-使用GridView實現真假分頁

void 每次 第三方控件 ati exec open() lld ret ges 這段時間看完了asp.net視頻。可是感覺到自己的學習好像沒有鞏固好，於是又在圖書館裏借了幾本關於asp.net的書感覺真的非常好自己大概對於asp.net可以實現主要的小D

7個jquery easy ui 基本組件圖解

打開 .json nal single lis help open pro article 以下給出7個jquery easy ui 基本組件； 1 基本面板 <!DOCTYPE html> <html> <head> &l

Easy UI combogrid動態加載數據

遠程 panel images 指定 ret 技術 fit title response 場景： 　　datagrid的每一行允許編輯，一行中有一個字段，編輯時，提供下拉框選項，供選擇。 　　下拉框選項有多個列。如下圖所示：(點擊紅框內的下拉按鈕，會彈出綠框內的內容) 　　

SpringData JPA實現CRUD,分頁與多參數排序

method clas asc spring from pda des home 參數 　　Spring Data 項目的目的是為了簡化構建基於 Spring 框架應用的數據訪問計數，包括非關系數據庫、Map-Reduce 框架、雲數據服務等等，SpringData JPA

bootstrap-paginator + ajax 實現動態翻頁功能

標簽 還需要 ceil div 動態 bootstra 單獨 number ges 1、下載http://plugins.jquery.com/bootstrap-paginator/ 2、引用<script src="/static/bootstrap/js/boo

【TP3.2】TP3.2下實現ajax分頁（原創+親測可用）

條件 func edit syn model 多條 ade ges var 一，寫在最開始：ajax分頁的原理，是利用了js的ajax執行請求，獲取分頁list和分頁page 【代碼塊】，去替換頁面顯示數據的【代碼塊】 技術：js的ajax + TP3.2的fet

SAP UI 搜索分頁技術

一次 fec gin 新浪 bsp customer 保存 ace osi 搜索分頁技術往往和另一個術語Lazy Loading（懶加載）聯系起來。今天由Jerry首先介紹S/4HANA，CRM Fiori和S4CRM應用裏的UI搜索分頁的實現原理。後半部分由SAP成都研究

bootstrap-table+Thinkphp實現server分頁

rim select spa ota link set 代碼 this tex 界面需要：此處不提供文件下載，請自行到官網下載。 <link href="./css/plugins/bootstrap-table/bootstrap-table.min.css"

SpringBoot+Mybatis配置Pagehelper分頁插件實現自動分頁

pri ldb tar pos method prop 註意 dss stk SpringBoot+Mybatis配置Pagehelper分頁插件實現自動分頁 **SpringBoot+Mybatis使用Pagehelper分頁插件自動分頁，非常好用，不用在自己去計算和組裝

element UI實現動態生成多級表頭

required enter nextTick ops () vue 技術 opd 循環 一、效果圖 二、封裝兩個組件，分別為DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用遞歸來對表頭進行循環生成 Dynami

Koa2學習之旅----結合 jqPaginator實現列表分頁

1.下載jqPaginator.js  放在靜態目錄裡面 2、在需要分頁的地方引入jqPaginator.js  3、在需要分頁的地方加個空div     <div id="page" class="pagination"></