Design and implementation of e-commerce system (10): DWZ Framework and third-party paging component integration

At night, it was just, using the DWZ framework in the backend management system.
First, directly using the official website of the Demo,dwz-jui, the programming language independent of the pure static of that original project.

  quickly set up the left menu, and after opening the menu, the tab page appears, The contents of the target page are then displayed.

  Then, follow the table pagination section.  

 DWZ comes with a paging component that feels too troublesome, on the one hand the pagination is divided into 4 sections showing , mainly including:
Pagerform, query condition
Pagerheader, page table header
Pagercontent, the body of the page table
Panlebar, pagination bar number column.

On the other hand, paging html and JS, you need to display the variables on the backend. The list collection and paging parameters of the
table body need to be obtained from the backend, such as the Java context variable. See the following example:  

<form id= "Pagerform" method= "post" action= "demo_page1.html" ><input type= "hidden" name= "status" value= "${ Param.status} "><input type=" hidden "name=" keywords "value=" ${param.keywords} "/><input type=" hidden " Name= "Pagenum" value= "1"/><input type= "hidden" name= "Numperpage" value= "${model.numperpage}"/><input Type= "hidden" name= "OrderField" value= "${param.orderfield}"/></form><div class= "PageHeader" >< Form onsubmit= "return Navtabsearch (this);" action= "demo_page1.html" method= "POST" ><div class= "Searchbar" > <table class= "Searchcontent" ><tr><td> my client: <input type= "text" name= "keyword"/></td> <td><select class= "Combox" name= "province" ><option value= "" > All Provinces </option></select> </td><td> file Date: <input type= "text" class= "date" readonly= "true"/></td></tr></table ><div class= "Subbar" ><ul><li><div class= "buttonactive" ><div class= "Buttoncontent" ><button type= "Submit" > Search </button></div></div></li></ul ></div></div></form></div><div class= "PageContent" ><div class= "PanelBar" > <ul class= "ToolBar" ><li><a class= "Add" href= "demo_page4.html" target= "Navtab" ><span> Add < /span></a></li></ul></div><table class= "table" width= "100%" layoutH= "138" >< thead><tr><th width= "> Customer name </th></tr></thead><tbody><tr target=" Sid _user "rel=" 1 "><td> Tianjin Nong Shun </td></tr></tbody></table><div class=" Panelbar "> <div class= "pages" ><span> show </span><select class= "Combox" name= "Numperpage" onchange= " Navtabpagebreak ({numPerPage:this.value}) "><option value=" >20</option></select><span > Bar, Total ${totalcount} bar </span></div><div class= "pagination" targettype= "Navtab" totalCount= "200" NumperPage= "pagenumshown=" currentpage= "1" ></div></div></div> 

Therefore, I do not want to use this self-bringing paging.
In the past, a colleague of the second hand wrote the paging component, and I modified it to maintain a version of myself in the future. As a result, the backend uses its own paging component fugrid.js.
However, a problem has been encountered. Either, own grid component error, or DWZ dwz.ui.js initui function error.
Analyze Problems：
On the new page alone, access the page where the grid component is located, which can be displayed correctly, stating that the code is not a problem.
There is no error with the Table,initui function that comes with it.

Continue analysis:
Discover that the Initui method calls some methods,$ ("Div.panel", $p). JPanel (), and then prompt that XXX has no JPanel method, which eventually causes the grid component to die. Grid component of the code, I do not want to modify, DWZ components of the code, have not read, and do not want to modify, modify the future upgrade on the trouble.
I tried a way, since the DWZ error caused the grid component to remain stuck, if this error is caught ?

Add Try-catch block, or error. Is it a cache?
<script src= "static/framework/dwzjs/dwz.ui.js?a=1" type= "Text/javascript" ></script>
Add an A parameter to prevent caching, to find or to error.

Different ways :

function Initui (_box) {var $p = $ (_box | | document), try {   $ ("Div.panel", $p). JPanel ();       catch (E) {Console.warn (e);}}

Inside the Initui method, catch this exception, finally OK.

You do not need to modify the DWZ business logic, and you do not need to change the grid component's code.
If DWZ is upgraded, it only needs to be upgraded, then add the code to catch the exception, not to care about the logic of the DWZ component.

Design and implementation of e-commerce system (10): DWZ Framework and third-party paging component integration