Local Dynamic Loading page

I do not know that the small partners in the front page, will not have the same experience with me, the overall system is generally required a whole framework, only the local need to refresh occasionally. Words don't say much, the following is what I want to achieve.

Obviously, I use the red border in the place is the entire project page need to have, and yellow two border, some pages adopt the same style, some change the yellow frame above, some change the yellow border below.

So I thought about using AJAX to dynamically request content from other pages. This and will not let the index page of the code content too much, you can also make a few styles of the same plate uniform style, request the same page, easy.

First of all, I left two blank div on the main page, which is where the two yellow borders are located.

<div id= "Navboxcontent" > <div id= "Boxbutton" > </div> <div id= "MainContent" > </d Iv></div>

The contents of the yellow border above, put in another right1.html file. The following is the content in right1.html.

<ul style= "margin-left:30px" > <li><div class= "but" id= "add" ></div></li> <li><div class= "but" id= "edit" ></div></li> <li><div class= "but" id= "del" onclick= "del ()" ></div></li></ul><div id=" search "><input type=" text " Placeholder= "Please enter the keyword" ></div>

Below the contents of the yellow border, put in the table.html. The table style uses the DataGrid in the Easyui.

<table id= "DG"   style= "width:100%;height:100%;"  data-options= "                                      rownumbers:false,                                      singleSelect:true,                                      autoRowHeight:false,                                      pagination:true,                                      resizehandle: ' Right ' ">    <thead>    <tr >    </tr>    </thead></table>

The CSS style control in right1.html and table.html above can be placed directly in the unified CSS style file in index.

Next is the JS dynamic request.

$ (function () {    //Enterprise Information   User management    $ ("#companyInformation"). Click (function () {        $.ajax ({//button bar display              url: "Right1.html",             datatype: "HTML",             type: "Get" ,             success:function (data) {                 $ ("#boxButton"). HTML (data) ;                 $ ("#boxButton "). CSS ({" Height ":" 50px "," Background ":" url (' Images/index/search_bg.png ') "})              }        });       &nBsp;$.ajax ({//table display            url: "table.html",            datatype: "HTML",            type: "Get",            success:function (data) {                $ ("#mainContent"). HTML (data);                $ ("#mainContent"). CSS ({"Height": "509px"});                $.ajax ({                    url: "Datagrid_data.json",                    type: "POST",       &Nbsp;            datatype: "JSON",                    success: function (data) {                        $ ("#dg"). DataGrid ({                             columns:[data.title]    //Dynamic Title                         });                         $ ("#dg"). DataGrid ("LoadData", data.rows);   //Dynamic Fetch data                         $ ("#dg"). DataGrid (' GetPager '). Pagination ({//page bar below text display                             pagesize: 15,//the number of record bars displayed per page, Default is 10                            pagelist:[15,30,45,60],//shows a few records per page                              beforePageText:  ' first ',///Page text box before display of Chinese characters                              afterPageText:  ' page      total  {pages}  page ',                             displayMsg:  ' current display  {from} - {to}  record      total  {total}  Record ',                            onbeforerefresh:function () {                                 $ (this). Pagination (' loading ');//Loading data in ...                                 $ (this). Pagination (' loaded ');  // Data loading Complete                             }                        })                     }                });            }       });     });

Of course, I also said before, many of my columns of the page may be to request the same page. So how to add the same event to two buttons. Here, I have adopted a way of doing this:

$ ("#companyInformation"). Add ($ ("#userManage")). Click (function () {...});

That is, the Add method of JS, so that when you click on the ID named Companyinformation and usermanage menu will load this table page.

Local Dynamic Loading page