Home > Developer > Ajax

JS + Ajax + Jquery: 1/2 page without refreshing pages and grouping

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Copy codeThe Code is as follows: <% @ Page language = "c #" Codebehind = "GroupText. aspx. cs" AutoEventWireup = "false" Inherits = "test1.GroupText" %>
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<Title> GroupText </title>
<Meta name = "GENERATOR" Content = "Microsoft Visual Studio. NET 7.1">
<Meta name = "CODE_LANGUAGE" Content = "C #">
<Meta name = "vs_defaultClientScript" content = "JavaScript">
<Meta name = "vs_targetSchema" content = "http://schemas.microsoft.com/intellisense/ie5">
<LINK href = "css/wmh.css" href = "css/wmh.css" type = "text/css" rel = "stylesheet">
<Script src = "js/jquery. js" type = "text/javascript"> </script>
<Script src = "js/Common. js" type = "text/javascript"> </script>
<Script src = "js/getCommonTable. js" type = "text/javascript"> </script>
<Script src = "js/GroupText. js" type = "text/javascript"> </script>
<Script language = "javascript"> <! --
Var ecid = '000000 ';
Var jpstr = "";
Var pageSize = 8;

// --> </Script>

</HEAD>
<Body MS_POSITIONING = "GridLayout">
<Form id = "Form1" method = "post" runat = "server">
<Div class = "listDiv" style = "height: 100%; PADDING-TOP: 2px">
<Table cellSpacing = "0" cellPadding = "0" width = "100%" border = "0">
<Tr class = "dg_header">
<Td style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center "> activity name </td>
<Td style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center "> sender </td>
<Td style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center "> receiver </td>
<Td style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 12%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center "> sending time </td>
<Td style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 38%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center "> send content </td>
<Td style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center "> Points </td>
<Td style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center "> Status </td>
</Tr>
<Tr>
<Td class = "dg_line" style = "BORDER-BOTTOM: 0px solid" style = "BORDER-BOTTOM: 0px solid "vAlign =" top "width =" 100% "colSpan =" 7"
Height = "100%">
<Div id = "divcontent" style = "WIDTH: 100%; HEIGHT: 100%" align = "left"> </div>
</Td>
</Tr>
<Tr>
<Td class = "dg_line" style = "BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid "style =" BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid"
Width = "100%" colSpan = "10">
& Lt; table width = "100%" & gt;
<Tr>
<Td class = "pgtext"> A total of <span id = "recordcount" style = "COLOR: red" style = "COLOR: red"> 0 </span> records
Currently, the <span id = "curpageindex" style = "COLOR: red" style = "COLOR: red "> 0 </span> <font color =" red ">/</font> <span id =" pgcount "style =" COLOR: red "style =" COLOR: red "> 0 </span> page
<Input class = "pageText" id = "gototxt" type = "text" maxLength = "10" name = "gototxt" runat = "server">
<Input id = "gotopg" type = "button" class = "goBtn"> </td>
<Td align = "right">


</Td>
</Tr>
</Table>
</Td>
</Tr>
</Table>
</Div>
</Form>
</Body>
</HTML>

Common. jsCopy codeThe Code is as follows: Common. js:
// Time format

Function getDateByFormat (oldDate ){
Var Dy = oldDate. getFullYear ();
Var Dm = oldDate. getMonth () + 1;
Var Dd = oldDate. getDate ();
If (Dm <10 ){
Dm = "0" + Dm;
}
If (Dd <10 ){
Dd = "0" + Dd;
}
Var newDate = Dy + '-' + Dm + '-' + Dd;

Return newDate;
}
// Format the date-time
Function getDateTimeByFormat (oldDate ){
Var Dy = oldDate. getFullYear ();
Var Dm = oldDate. getMonth () + 1;
Var Dd = oldDate. getDate ();
Var Dh = oldDate. getHours ();
Var Dmi = oldDate. getMinutes ();
Var Ds = oldDate. getSeconds ();
If (Dm <10)
Dm = "0" + Dm;
If (Dd <10)
Dd = "0" + Dd;

If (Dh <10)
Dh = "0" + Dh;
If (Dmi <10)
Dmi = "0" + Dmi;
If (Ds <10)
Ds = "0" + Ds;

Var newDate = Dy + '-' + Dm + '-' + Dd + ''+ Dh + ':' + Dmi + ':' + Ds;
Return newDate;
}

// Only numbers can be entered
Function txtnumber ()
{
If (event. keyCode> 57) | (event. keyCode <48 ))
Return false; else return true;
}

// Only numbers and letters can be entered

Function txtnumchar ()
{// 65-90 97-122
Var kcode = event. keyCode;
If (kcode> = 48 & kcode <= 57)
Return true;
Else if (kcode> = 65 & kcode <= 90)
Return true;
Else if (kcode> = 97 & kcode <= 122)
Return true;
Else
Return false;
}

GetCommonTable. jsCopy codeThe Code is as follows: getCommonTable. js
// Obtain the table Header
Function getTableHeadByWidth (widthSize, ids ){
Var Tableone = "<table id = 'tab" + ids + "'border = '0' cellspacing = '0' cellpadding = '0 '";
Var Tabletwo = "> ";
If (widthSize = "")
Return Tableone + Tabletwo;
Else
Return Tableone + "width =" + widthSize + Tabletwo;

}

// Get the first tr td and pass a width value
Function getTrAndTdFirstByCWidth (classname, widthSize ){
Var tdone = "<tr ";
Var tdtwo = "> <td style =" BORDER-BOTTOM: 1px solid; "style =" BORDER-BOTTOM: 1px solid; "align = 'center '";
Var tdthr = "> ";
If (classname = "")
Tdone + = tdtwo;
Else
Tdone + = "class = '" + classname + "'" + tdtwo;

If (widthSize = "")
Tdone + = tdthr;
Else
Tdone + = "width =" + widthSize + tdthr;

Return tdone;
}

// Get the next TD and pass a width value
Function getTdNextByWidth (widthSize ){
Var tdone = "</td> <td style =" BORDER-BOTTOM: 1px solid "style =" BORDER-BOTTOM: 1px solid "align = 'center '";
Var tdtwo = "> ";
If (widthSize = "")
Return tdone + tdtwo;
Else
Return tdone + "width =" + widthSize + tdtwo;
}

// Get the last td
Function getTdLastByWidth (widthSize ){
Var tdone = "</td> <td style =" BORDER-BOTTOM: 1px solid "style =" BORDER-BOTTOM: 1px solid "align = 'center '";
Var tdtwo = "> ";
If (widthSize = "")
Return tdone + tdtwo;
Else
Return tdone + "width =" + widthSize + tdtwo;
}
// Obtain the last tr/td
Function getTrAndTdLast (){
Return "</td> </tr> ";
}

// Obtain the end of the table
Function getTableLast (){
Return "</table> ";
}

// Obtain img
Function getImgByParams (imgUrl, altstr, eventName, eventParams, imgid ){
Var one = "If (imgUrl! = "")
One + = "src = '" + imgUrl + "'";
If (altstr! = "")
One + = "alt = '" + altstr + "'";
If (imgid! = "")
One + = "id = '" + imgid + "'";

One + = "onclick = '" + eventName + "(" + eventParams + ");'> ";

Return one
}

// -------- Sort ---------------------------
// Sort by field content
SortByBtnidAndCellName = function (btnId, cellName, celltype ){
Var way = getOpType (btnId); // 0 is positive. 1 is inverted
Var ds = userdata. value;
Var sortarr = new Array ();
If (ds! = Null) & (typeof (ds) = "object ")){
Var len = ds. Rows. length;
If (celltype = 's' | celltype = 'n '){
For (var j = 0; j <len; j ++ ){
Sortarr [j] = ds. Rows [j] [cellName]; //. substr (0, 1); // pass the character
}
} Else if (celltype = 'D '){
For (var I = 0; I <len; I ++ ){
Sortarr [I] = getDateByFormat (ds. Rows [I] [cellName]); // Date passed
}
}
If (sortarr! = ''){
Var indexarr = new Array ();
Indexarr = getSortArray (sortarr, celltype); // obtain a new sorting rule
If (indexarr! = ''){
SetSortAginbyWay (indexarr, way );
}
}
}
}

// Obtain sorting
GetOpType = function (btnid) {// return 0 in positive order, 1 in reverse order
Var imgName = $ ("#" + btnid). attr ("src ");
Var wz = imgName.indexOf('.gif ');
Var oldImg = imgName. substr (wz-9, 9 );
If (oldImg = 'sort _ desc ') {// The current status is in reverse or unordered order. sort_ascc must be in positive order.
$ ("#" + Btnid). attr ("src", "../Images/sort_ascc.gif ");
Return 0;
} Else {
$ ("#" + Btnid). attr ("src", "../Images/sort_desc.gif ");
Return 1;
}

}
// Sort by JS Sort to obtain new sorting rules
GetSortArray = function (sortdatearr, celltype) {// The parameter is array
Var sortstr = '';
For (var k = 0; k <sortdatearr. length; k ++ ){
If (sortstr = '')
Sortstr = sortdatearr [k];
Else
Sortstr + = '^ % ^' + sortdatearr [k];
}
Var newsortdate = sortdatearr;
Var len = sortdatearr. length;

If (celltype = 's' | celltype = 'D ')
Newsortdate. sort (); // sort the characters
Else {// numerical sorting
For (var I = 0; I <len; I ++ ){
Var tmp = 0;
For (var j = I + 1; j <len; j ++ ){
If (newsortdate [I]> newsortdate [j]) {
Tmp = newsortdate [I];
Newsortdate [I] = newsortdate [j];
Newsortdate [j] = tmp;
}
}
}
}

Var tmpsortdate = sortstr. split ('^ % ^ ')

Var resultarr = new Array ();
For (var I = 0; I <len; I ++ ){
For (var j = 0; j <len; j ++ ){
If (newsortdate [I] = tmpsortdate [j]) {
Resultarr [I] = j;
Tmpsortdate [j] = '| ';
Break;
}
}
}

Return resultarr;
};

// -------------------- End -------------------------------
// Delete duplicate mobile phone numbers
SplitRepeatMobile = function (mobile ){
Var mob = mobile;
For (var I = 0; I <mob. length; I ++ ){
For (var j = I + 1; j <mob. length; j ++ ){
If (mob [I] = mob [j]) {
Mob. splice (j, 1 );
}
}
}
Return mob;
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery unobtrusive ajax min jquery ajax encoding jquery ajax file upload codeigniter jquery ajax jquery ajax rest jquery ajax upload multiple files php jquery ajax json example
Related Article
JQuery AJAX Timeout Timeout problem detailed _jquery
The difference between traditional web development patterns a...
JQuery ajax File Download _ajax
Ajax various implementation methods compare _ajax
Ajax Getting Started Guide (ii)
SPRINGMVC passing a parameter list object through Ajax or pas...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More