Home > Developer > JavaScript
Adapted from php version, original:
JQuery + PHP implement browsing more content http://www.helloweba.com/view-blog-130.html
The implementation in. net is recorded here.
1. Create a database table test and insert some test data.:
Copy codeThe Code is as follows:
Go
If exists (select * from sysobjects where name = 'test ')
Drop table [test]
Go
Create table [test] (
[Id] [int] IDENTITY (1, 1 ),
[Author] [varchar] (50 ),
[Content] [varchar] (2000 ),
[CreateOn] [datetime]
)
Declare @ index int;
Set @ index = 1;
While (@ index <1000)
Begin
Insert into test ([author], [content], [createOn])
Values
('Author' + cast (@ index as varchar (4), 'content' + cast (@ index as varchar (4), DATEADD (DAY, @ index, getdate ()))
Set @ index = @ index + 1
End
Go
2. Create an html file
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script src = "js/jquery-1.4.4.min.js" type = "text/javascript"> </script>
<Script src = "js/jquery. more. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('# More'). more ({'address': 'ajax/data. ashx'}) // The address requested from the background
});
</Script>
<Style type = "text/css">
More
{
Margin: 10px auto;
Width: 560px;
Border: 1px solid #999;
}
. Single_item
{
Padding: 20px;
Border-bottom: 1px dotted # d3d3d3;
}
. Author
{
Position: absolute;
Left: 0px;
Font-weight: bold;
Color: # 39f;
}
. CreateOn
{
Position: absolute;
Right: 0px;
Color: #999;
}
. Content
{
Line-height: 20px;
Word-break: break-all;
}
. Element_head
{
Width: 100%;
Position: relative;
Height: 20px;
}
. Get_more
{
Margin: 10px;
Text-align: center;
}
. More_loader_spinner
{
Width: 20px;
Height: 20px;
Margin: 10px auto;
Background: url(loader.gif) no-repeat;
}
</Style>
</Head>
<Body>
<Div id = "more">
<Div class = "single_item">
<Div class = "element_head">
<Div class = "createOn">
</Div>
<Div class = "author">
</Div>
</Div>
<Div class = "content">
</Div>
</Div>
<A href = "javascript:;" class = "get_more" >:: click to load more content: </a>
</Div>
</Body>
</Html>
3. Create a general processing program data. ashx
Copy codeThe Code is as follows:
<% @ WebHandler Language = "C #" Class = "data" %>
Using System;
Using System. Web;
Using Microsoft. Practices. EnterpriseLibrary. Data;
Public class data: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
Int last = Convert. ToInt32 (context. Request. Params ["last"]); // number of start records
Int amount = Convert. ToInt32 (context. Request. Params ["amount"]); // displays the number of records at a time.
Database db = DatabaseFactory. CreateDatabase ();
//// The Date Field createOn is first formatted; otherwise, a format like this is generated./Date (1310292162507 )/
String SQL = string. format ("select id, author, content, convert (varchar (100), createOn, 120) createOn from (select row_number () over (order by id) as rowNum, * from test) as t"
+ "Where rowNum> {0} and rowNum <= {1}", last, last + amount );
System. Data. DataTable dt = db. ExecuteDataSet (System. Data. CommandType. Text, SQL). Tables [0];
Context. Response. Write (JSONHelper. DataTableToJSON (dt); // output json format
}
Public bool IsReusable {
Get {
Return false;
}
}
}
Appendix: jquery. more. js plug-in content
Copy codeThe Code is as follows:
(Function ($ ){
Var target = null;
Var template = null;
Var lock = false;
Var variables = {
'Last': 0
}
Var settings = {
'Amount ': '10 ',
'Address ':'',
'Format': 'json ',
'Template': '. single_item ',
'Trigger': '. get_more ',
'Scroll ': 'false ',
'Offset': '123 ',
'Spinner _ Code ':''
}
Var methods = {
Init: function (options ){
Return this. each (function (){
If (options ){
$. Extend (settings, options );
}
Template = $ (this). children (settings. template). wrap ('<div/>'). parent ();
Template.css ('display', 'None ')
$ (This). append ('<div class = "more_loader_spinner">' + settings. spinner_code + '</div> ')
$ (This). children (settings. template). remove ()
Target = $ (this );
If (settings. scroll = 'false '){
$ (This). find (settings. trigger). bind ('click. more ', methods. get_data );
$ (This). more ('get _ data ');
}
Else {
If ($ (this). height () <= $ (this). attr ('rollheight ')){
Target. more ('get _ data', settings. amount * 2 );
}
$ (This). bind ('scroll. more', methods. check_scroll );
}
})
},
Check_scroll: function (){
If (target. scrollTop () + target. height () + parseInt (settings. offset)> = target. attr ('scrollheight') & lock = false ){
Target. more ('get _ data ');
}
},
Debug: function (){
Var debug_string = '';
$. Each (variables, function (k, v ){
Debug_string + = k + ':' + v + '\ n ';
})
Alert (debug_string );
},
Remove: function (){
Target. children (settings. trigger). unbind ('. more ');
Target. unbind ('. more ')
Target. children (settings. trigger). remove ();
},
Add_elements: function (data ){
// Alert ('adding elements ')
Var root = target
// Alert (root. attr ('id '))
Var counter = 0;
If (data ){
$ (Data). each (function (){
Counter ++
Var t = template
$. Each (this, function (key, value ){
If (t. find ('.' + key) t. find ('.' + key). text (value );
})
// T. attr ('id', 'more _ element _ '+ (variables. last ++ ))
If (settings. scroll = 'true '){
// Root.append(t.html ())
Root.children('.more_loader_spinner'{.before(t.html ())
} Else {
// Alert ('...')
Root.children(settings.trigger%.before(t.html ())
}
Root. children (settings. template + ': last'). attr ('id', 'more _ element _' + (variables. last ++) + 1 ))
})
}
Else methods. remove ()
Target.children('.more_loader_spinner'mirror.css ('display', 'None ');
If (counter <settings. amount) methods. remove ()
},
Get_data: function (){
// Alert ('getting data ')
Var ile;
Lock = true;
Target. children (". more_loader_spinner" ).css ('display', 'block ');
Vertex (settings.trigger).css ('display', 'None ');
If (typeof (arguments [0]) = 'number') ile = arguments [0];
Else {
Ile = settings. amount;
}
$. Post (settings. address ,{
Last: variables. last,
Amount: ile
}, Function (data ){
Detail (settings.trigger).css ('display', 'block ')
Methods. add_elements (data)
Lock = false;
}, Settings. format)
}
};
$. Fn. more = function (method ){
If (methods [method])
Return methods [method]. apply (this, Array. prototype. slice. call (arguments, 1 ));
Else if (typeof method = 'object' |! Method)
Return methods. init. apply (this, arguments );
Else $. error ('method' + Method + 'does not exist! ');
}
}) (JQuery)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
