JQuery to build a customer/service decoupled link model discussion on the efficiency of Table paging code _jquery

If your company's development environment or project development environment is in a single language development environment, the framework does not apply because one of the framework's uses is for business modules that are developed in multiple languages in a project, and new projects require the functionality of these modules, and, in the past, it is certainly a redevelopment, At least the business functions developed by other languages are turned into WebService interfaces for new code calls, in which case the framework discussed in this article can be used and the language differences can be eliminated on the client side, with only pure JavaScript and HTML static code for development.

Of course, even in a single language environment, this model can still be used for development, but developers will not be able to enjoy a variety of excellent server-side controls (ASP.net controls, specifically for Java-developed controls, and so on), only using pure JavaScript controls, This can be inconvenient for developers (especially developers who rely on server-side controls).

After talking about two posts, we find that this model is completely useful, it separates the language of the server from the client, and the developer of the client (under theoretical conditions) can completely ignore the language of the server, only for pure JavaScript development, Use the Ajax methods provided in jquery to communicate with the server-side approach.

　　

From the overall architecture diagram above, we can see that its clients are WebService interfaces to obtain data and transmit data, and what language the service-side business model develops, and that there is absolutely no need to pay attention to it (of course, in reality, The general WebService interface is preferably a language developed with the service-side business model.

This is the first time you can think of an efficiency problem:

As we all know, the efficiency of the WebService interface is slow, so this is not to make use of this structure model development of the site slow, so, rather than using the conventional method of development, not only familiar with the speed is also good?

Let's look at the following inferences:

1 The efficiency of the WebService interface is slow <---> Get data asynchronously, can the two counteract each other?

2 The client adopts the way of post, can reduce the amount of data, can partially offset the efficiency of WebService interface is slow?

Above two inferences, although we did not complete the comparison, but can be sure that they are hedging efficiency, webservice slow, reflected in the page is no wonder that the page is waiting for a long time does not come out, resulting in a decline in user experience, but because of the way of asynchronous acquisition, this situation will appear? I don't think so.

In the transmission process, the use of post method, the amount of data is greatly reduced, and the use of asynchronous mode, the actual operation effect should be quite good.

But how do we deal with certain special situations and the common problems, such as the paging of table tables?

Table table data padding and paging this very common problem on the page poses a threat to these inferences, the reason is because the general paging code is to return the data to the client memory, and then paging, so a large number of data from the server to the client, will inevitably cause problems, In fact, this problem is not only the problem of this framework, all the code in this way to pagination in the case of the problem, but the framework of the WebService interface with the client communication, the problem is the importance of the infinite amplification.

Here we will discuss paging processing in this framework:

Environment: Visual Studio 2005

JQuery 1.3.2

SQLServer2005

Pagination principle:

From the image above, you can see that no matter how much data is in the datasheet, the data returned to the client every time is a page of data, this method is not in the way of stored procedures, but on the webservice side of the processing.

Code fragment:

Server-side fills table table code----:

Description

Tb_web_nz_investment is the entity class, the corresponding Table object

Flowid the field properties of the Table object to obtain a similar data record

The code has the "Home", "Last", "Middle page" elements to filter, the return of the generic List object to filter the scope

Copy Code code as follows:

<summary>
Table filling service side of paging function
</summary>
<param name= "Flowid" ></param>
<param name= "PageCount" > per page number </param>
<param name= "currentpage" > Current page </param>
<returns></returns>
[WebMethod]
[Scriptmethod (Responseformat = Responseformat.json)]
public string load_contributiveperson_table (string flowid, int pagecount, int currentpage)
{
list<tb_web_nz_investment> list = new list<tb_web_nz_investment> ();

List = Objbusinessfacade.gettb_web_nz_investment_collectionbyflowid (FLOWID);
int totalpagecount = 0;
if (PageCount!= 0)
{
if (list. Count% PageCount) > 0)
{
Totalpagecount = list. Count/pagecount + 1;
}
Else
{
Totalpagecount = list. Count/pagecount;
}
}//if

if (currentpage = 1)
{
First page
if (PageCount < list. Count)
{
List. RemoveRange (PageCount, list. Count-pagecount);
}

}
else if (CurrentPage > 1 && currentpage < Totalpagecount)
{
Middle Page

int R1 = (CurrentPage-1) * PAGECOUNT-1;
int R2 = currentpage * PageCount;
List<tb_web_nz_investment> List1 = new list<tb_web_nz_investment> ();
for (int i = 0; i < list. Count; i++)
{
if (i > R1&&i<r2)
{
List1. ADD (List[i]);
}
}
List. Clear ();
list = List1;
}
else if (currentpage = = Totalpagecount)
{
Last
But the list of displayed objects returned can only be the record in the last page.
We need to remove the element object that is not the last page.
List. RemoveRange (0, (CurrentPage-1) * PageCount);
}

return new JavaScriptSerializer (). Serialize (list);
}

Principle Illustration:-----------------------

Combine the above code and the diagram to explain:

1) homepage Operation :

List. RemoveRange (PageCount, list. Count-pagecount);

Translated into numbers: list. RemoveRange (5,14-5);

The elements displayed on the first page: A1 A2 A3 A4 A5 corresponding index: 0 1 2 3 4

List.  RemoveRange (5,14-5); Excludes all elements after the index value is 5 (including itself), so that only the A1-A5 element is in the list

2 Middle page Operation : (This is the 2nd page)

CurrentPage equals 2.

int R1 = (CurrentPage-1) * PAGECOUNT-1; equals 4
int R2 = currentpage * PageCount; equals 10

R1 and R2 represent two interval-range indexes, that is, the element between index 4 (excluding index 4) and index 10 (excluding index 10) is the element we want to take out

Copy Code code as follows:

List<tb_web_nz_investment> List1 = new list<tb_web_nz_investment> ();
for (int i = 0; i < list. Count; i++)
{
if (i > R1&&i<r2)
{
List1. ADD (List[i]);
}
}
List. Clear ();
list = List1;

3) Last operation:
Last
But the list of displayed objects returned can only be the record in the last page.
We need to remove the element object that is not the last page.
List. RemoveRange (0, (CurrentPage-1) * PageCount);
The last code is a little bit simpler.
From the above server-side code, we see that although every time from the database to return all the code to the WebService end, but through this method, it will be useless records all filtered, the remaining elements passed to the customer service side, so no matter how many records, each return page only a little bit, improve efficiency, Avoids the problem of webservice passing large data, so that the framework does not have any problems in terms of delivering large data (excluding some of its special things), and using this framework has no problem with efficiency, even faster than regular pages.
Client code fragment:
The client will no longer specify that the client needs to pass in
PageCount the number of records displayed per page
CurrentPage Current Page
HTML for tables:
Code

Copy Code code as follows:

<table id= "Tdata" width= "100%" >
<thead id= "Thead" >
<tr id= "Tr_header" class= "Mytabletr_header" align= "center" style= "height:25px" >
&LT;TD style= "width:1%; Display:none "class=" mytabletd "></td>
&LT;TD style= "width:10%" > Investment human </td>
&LT;TD style= "width:10%" > Investor </td>
&LT;TD style= "width:10%" > Investment mode </td>
&LT;TD style= "width:10%" > Pledged capital contributions </td>
&LT;TD style= "width:10%" > Paid-in Capital Contributions </td>
&LT;TD style= "width:10%" > Contribution ratio </td>
&LT;TD style= "width:15%" > Balance payment period </td>
&LT;TD style= "width:15%" > information is complete </td>
&LT;TD style= "width:10%" > Operations </td>
</tr>
</thead>
<tbody id= "Tbody_data" ></tbody>
<tfoot id= "Tfoot_foot" >
<tr align= "Right" >
&LT;TD style= "width:100%" colspan= "9" >
<a href= "#" id= "first_a" > Home </a>
<a href= "#" id= "prev_a" > Prev </a>
<a href= "#" id= "next_a" > next page </a>
<a href= "#" id= "Last_a" > Last </a>
Jump to <input id= "Topageno" type= "text" style= "width:20px; height:10px; font-size:9px "/> Page |
Total Pages: <span id= "Showtotalpage" style= "color:red" ></span> page
</td>
</tr>
</tfoot>
</table>

JS function to populate data:
Code

Copy Code code as follows:

Bootstrap Data fill table (table)
function Load_tabledata (flowid,currentpage)
{
$.ajax ({
Type: "POST",
Url:ipserver + "Jsonservice.asmx/load_contributiveperson_table",
Data: "{flowid: '" +flowid+ "', PageCount:" +pagecount+ ", CurrentPage:" + currentpage + "}",
ContentType: "Application/json; Charset=utf-8 ",
DataType: "JSON",
Success:function (msg) {
msg = Msg.replace (new RegExp (' ^|[ ^\\\\] \ \\\\/date\\ (-?[ 0-9]+) \ \\\\/\\ "', ' G ')," $1new Date ($) ");
var data = eval ("+ msg +");
var strtr= "";
var rowcount = 1;
Jquery.each (data, function (REC) {
STRTR = "<tr id= ' tr_" + rowcount + "' class= ' mytabletr ' align= ' center ' >";
Strtr + = "<td style= ' width:1%;" Display:none ' id= ' key_ ' +rowcount+ ' class= ' mytabletd ' > ' + this. Invid + "</TD>";
Strtr + = "<td style= ' width:10% ' class= ' mytabletd ' >" + this. Invtypename + "</TD>";
Strtr + = "<td style= ' width:10% ' class= ' mytabletd ' >" + this. INV + "</TD>";
Strtr + = "<td style= ' width:10% ' class= ' mytabletd ' >" + this. Conform + "</TD>";
Strtr + = "<td style= ' width:10% ' class= ' mytabletd ' >" + this. Subconam + "</TD>";
Strtr + = "<td style= ' width:10% ' class= ' mytabletd ' >" + this. Acconam + "</TD>";
Strtr + = "<td style= ' width:10% ' class= ' mytabletd ' >" + this. Conprop + "</TD>";
Strtr + = "<td style= ' width:15% ' class= ' mytabletd ' >" + this. Baldeper_shortstring + "</TD>";
Strtr + = "<td style= ' width:15% ' class= ' mytabletd ' >" + this. Isdatacompleteness + "</TD>";
Strtr + = "<td style= ' width:10% ' class= ' mytabletd ' ><a id= ' link_ '" +rowcount+ "' href= ' # ' > Choose &LT;/A&GT;&LT;/TD > ";
STRTR = "</TR>";
rowcount++;
});//jquery.each
$ ("#tbody_Data"). empty ();
$ ("#tbody_Data"). Append (STRTR);
$ ("#CurrentPage"). HTML (currentpage);
},
Error:function (msg) {
Alert ("Error:" + msg);
}
});
}//function Load_tabledata ()

Homepage, previous page, next page, last action:
Description

Copy Code code as follows:

$ ("#CurrentPage"). HTML () stores the current page (the calling code is red at the previous function)
$ ("#TotalPageCount"). HTML () store total pages (the calling code has a special function, see below)

Code

Copy Code code as follows:

$ ("#First_A"). Click (function () {//Home link action
Load_tabledata (strflowid,1);
});
$ ("#Prev_A"). Click (function () {//Prev link action
var intcurrentpage = number (c);
if (intcurrentpage>1)
{
Load_tabledata (strflowid,intcurrentpage-1);
}
});
$ ("#Next_A"). Click (function () {//Next page link action
var intcurrentpage = number ($ ("#CurrentPage"). html ());
var inttotalpagecount = number ($ ("#TotalPageCount"). html ());
if (Intcurrentpage<inttotalpagecount)
{
Load_tabledata (strflowid,intcurrentpage+1);
}
});
$ ("#Last_A"). Click (function () {//Last link action
Intlastpage = Number ($ ("#TotalPageCount"). html ());
Load_tabledata (Strflowid,intlastpage);
});

Returns the client function for the total number of pages:
Code

Copy Code code as follows:

return pages
function Get_tabledata_totalcount (FLOWID)
{
$.ajax ({
Type: "POST",
Url:ipserver + "Jsonservice.asmx/get_contributivepersontable_totalpagecount",
Data: "{flowid: '" +flowid + "', PageCount:" +pagecount+ "}",
ContentType: "Application/json; Charset=utf-8 ",
DataType: "JSON",
Success:function (msg) {
var data = eval ("+ msg +");
Jquery.each (data, function (REC) {
$ ("#TotalPageCount"). HTML (this. Info);
$ ("#showTotalPage"). HTML (this. Info);
});//jquery.each
},
Error:function (msg) {
Alert ("Error:" + msg);
}
});
}
<div id= "CurrentPage" ></div>
<div id= "Totalpagecount" ></div>

Final Effect Chart:

Summarize:

There are a number of ways to populate and page with table data, just to provide a way to filter through the server, so that the data returned to the client is always a little bit more efficient.

The application and exploration of the framework is progressing steadily ...