Exploring the efficiency of Table paging code in the link model of customer/service separation built by JQuery

JQuery's initial exploration of Table paging code efficiency in the link model of customer service separation! If your company's development environment or project development environment is in a single language development environment, the framework is not applicable, because one of the frameworks is to develop business modules in multiple languages for a project, and all new projects require the functions of these modules. According to the previous habits, they must be re-developed, at least the business functions developed in other languages are converted into webservice interfaces for new code calls. In this case, the framework discussed in this article can come in handy and eliminate language differences on the client. It only uses pure javascript and html static code for development.

Of course, even in a single language environment, you can still use this model for development, but developers cannot enjoy a variety of excellent server controls (Asp.net controls, controls specially developed for java). Only javascript controls can be used, which is inconvenient for developers (especially those who depend on server controls ).

After talking about the above two blog posts, we found that this model is completely useful. It completely isolates the language of the server from the client, and developers of the client (under theoretical conditions) the language type of the server can be completely ignored, and only Javascript development is performed. The AJAX method provided in JQUERY can be used to communicate with the server method.

　　

From the overall architecture diagram above, we can see that the client is a WebService interface to obtain and transmit data, and the service-side business model is developed in what language, you do not need to pay attention to it at all (of course, generally, WebService interfaces are best developed in the same language as the service model on the server ).

At this time, we can first think of efficiency issues:

As we all know, the efficiency of WebService interfaces is slow, so it is better to develop websites using this structure model, not only are you familiar with it, but the speed is also good?

Let's look at the following inferences:

1) The efficiency of the WebService interface is slow <---> can the two obtain data asynchronously offset each other?

2) Does the client adopt the Post method to reduce the amount of data and partially offset the slow efficiency of the WebService Interface?

Although we have not completely compared the above two inferences, we can say that they are highly efficient, and WebService is slow, it is not surprising that the page is not waiting for a long time, resulting in a decline in user experience. But is this still possible due to asynchronous acquisition? It should not.

In the transmission process, the Post method is adopted, the data volume is greatly reduced, and asynchronous mode is adopted. The actual running effect should be quite good.

But in some special cases, there are common problems, such as the paging of Table tables, what should we do?

Table data filling and paging, which are very common on pages, pose a threat to the above inferences, the reason is that the paging Code usually returns data to the client memory and then performs paging. Therefore, a large amount of data is transmitted from the server to the client, which will inevitably cause problems, in fact, this problem is not just a problem with this framework. All code that uses this method for paging has this problem, but this framework uses the WebService interface to communicate with the client, the importance of this problem is infinitely magnified.

We will discuss the paging processing in this framework as follows:

Environment: Visual studio 2005

JQuery 1.3.2

SQLServer2005

Paging principle:

We can see that no matter how much data is in the data table, the data returned to the client each time is a one-page data. This method does not adopt the Stored Procedure method, but is processed on the webservice end.

Code snippet:

Code for filling the Table on the server end ----:

Note:

TB_WEB_NZ_INVESTMENTIs an object class, corresponding to the table object

The field attribute of the FlowID table object. It is used to obtain a similar data record.

The Code filters the elements of the [homepage], [last page], and [intermediate page] to filter the returned generic List objects by scope.

The Code is as follows:

///

/// Use the pagination function to populate the table on the server.
///
///
/// Per page
/// Current page
///
[WebMethod]
[ScriptMethod (ResponseFormat = ResponseFormat. Json)]
Public string Load_ContributivePerson_Table (string FlowID, int PageCount, int CurrentPage)
{
List List = new List ();

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)
{
// Page 1
If (PageCount <list. Count)
{
List. RemoveRange (PageCount, list. Count-PageCount );
}

}
Else if (CurrentPage> 1 & CurrentPage <TotalPageCount)
{
// Intermediate page

Int R1 = (CurrentPage-1) * PageCount-1;
Int R2 = CurrentPage * PageCount;
List List1 = new List ();
For (int I = 0; I <list. Count; I ++)
{
If (I> R1 & I {
List1.Add (list [I]);
}
}
List. Clear ();
List = list1;
}
Else if (CurrentPage = TotalPageCount)
{
// Last page
// But the returned Display object list can only be the records on the last page
// Remove element objects that are not the last page.
List. RemoveRange (0, (CurrentPage-1) * PageCount );
}

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

Schematic diagram :-----------------------

Use the above Code and the diagram to explain:

1) homepage operations:

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

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

Element displayed on the homepage: A1 A2 A3 A4 A5 index: 0 1 2 3 4

List. RemoveRange (5, 14-5); // exclude all elements after the index value is 5 (including itself), so that the list contains only A1-A5 Elements

2) Intermediate page operations(Page 1)

CurrentPage equals 2

Int R1 = (CurrentPage-1) * PageCount-1; equal to 4
Int R2 = CurrentPage * PageCount; equal to 10

R1 and R2 represent two range indexes, that is, the elements between index 4 (excluding index 4) and index 10 (excluding index 10) are the elements we need to retrieve.

The Code is as follows:

List List1 = new List ();
For (int I = 0; I <list. Count; I ++)
{
If (I> R1 & I {
List1.Add (list [I]);
}
}
List. Clear ();
List = list1;

3) operation on the last page:
// Last page
// But the returned Display object list can only be the records on the last page
// Remove element objects that are not the last page.
List. RemoveRange (0, (CurrentPage-1) * PageCount );
The Code on the last page is simpler.
From the above server code, we can see that although every time all the code is returned from the database to the webservice end, this method filters out all the useless records, pass the remaining elements to the customer service end, so that no matter how many records there are, each page is returned only a little bit, improving efficiency and avoiding the problem of webservice passing big data, in this way, this framework basically does not have any problems in the transmission of big data (excluding some of its special things). Using this framework does not have any problems in efficiency, even faster than normal pages.
Client code snippet:
The client does not provide detailed description, and the client needs to input
PageCount number of records displayed per page
Current page number
Html of the table:
Code

The Code is as follows:

	Investor type	Investors	Funding Method	Subscribed capital contribution	Paid contribution	Investment Proportion	Balance payment period	Complete information?	Operation
Homepage Previous Page Next Page Last page JumpPage | Total page number: Page

Js functions for data filling:
Code

The Code is as follows:

// Guide data Filling 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 ($2 )");
Var data = eval ("(" + msg + ")");
Var strTR = "";
Var RowCount = 1;
JQuery. each (data, function (rec ){
StrTR + ="";
StrTR + =""+ This. INVID +"";
StrTR + =""+ This. INVTYPEName +"";
StrTR + =""+ This. INV +"";
StrTR + =""+ This. CONFORM +"";
StrTR + =""+ This. SUBCONAM +"";
StrTR + =""+ This. ACCONAM +"";
StrTR + =""+ This. CONPROP +"";
StrTR + =""+ This. baldeper_prop string +"";
StrTR + =""+ This. IsDataCompleteness +"";
StrTR + ="Select";
StrTR + ="";
RowCount ++;
}); // JQuery. each
$ ("# Tbody_Data"). empty ();
$ ("# Tbody_Data"). append (strTR );
$ ("# CurrentPage" ).html (CurrentPage );
},
Error: function (msg ){
Alert ("Error:" + msg );
}
});
} // Function Load_TableData ()

Operations on the home page, Previous Page, next page, and last page:
Note:

The Code is as follows:

$ ("# CurrentPage" ).html () stores the current page (Call code in red of the previous function)
$ ("# TotalPageCount" ).html () Total number of pages stored (Call Code has a dedicated function, see below)

Code

The Code is as follows:

$ ("# First_A"). click (function () {// homepage link operation
Load_TableData (strFlowID, 1 );
});
$ ("# Prev_A"). click (function () {// Previous Page Link operation
Var intCurrentPage = Number (c );
If (intCurrentPage> 1)
{
Load_TableData (strFlowID, intCurrentPage-1 );
}
});
$ ("# Next_A"). click (function () {// next page Link operation
Var intCurrentPage = Number ($ ("# CurrentPage" ).html ());
Var intTotalPageCount = Number ($ ("# TotalPageCount" ).html ());
If (intCurrentPage {
Load_TableData (strFlowID, intCurrentPage + 1 );
}
});
$ ("# Last_A"). click (function () {// link to the end page
IntLastPage = Number ($ ("# TotalPageCount" ).html ());
Load_TableData (strFlowID, intLastPage );
});

Client functions that return the total number of pages:
Code

The Code is as follows:

// Number of returned 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" pai.html (this. Info );
$ ("# ShowTotalPage" pai.html (this. Info );
}); // JQuery. each
},
Error: function (msg ){
Alert ("Error:" + msg );
}
});
}

Finally:

Summary:

There are still many ways to populate and pagination Table data. Here, we only provide a method to filter data through the server, so that the data returned from the client is always a little bit, improving efficiency.

The application of the Framework is being explored steadily ......