Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript" src = "scripts/jquery-1.7.1.min.js"> </script>
<Script type = "text/javascript" src = "scripts/jquery-1.7.1.js"> </script>
<Script type = "text/javascript" src = "script/jquery. pagination. js"> </script>
<Script type = "text/javascript">
$ (Function (){
// This demo loads paging elements through Ajax
Var initPagination = function (data ){
Var feedback = "";
$. Each (data. list, function (index, d ){
Var str = "";
Str + = "<dl class = 'result' style = 'display: none; '> ";
Str + = "<dt> </dt> ";
Str + = "<dd> <a href = '#' title = 'vyyu'> VYyu </a> </dd> ";
Str + = "<dd class = 'Gray '> </dd> ";
Str + = "<dd>" + d + "</dd> ";
Str + = "</dl> ";
Feedback + = str;
});
$ ("# Feedback"). empty (). append (feedback); // load the content of the corresponding page
// Alert (datac. list. length );
// Var num_entries = $ (". result"). length;
Var num_entries = data. list. length;
// Create a page
$ ("# Page"). pagination (num_entries ,{
Num_edge_entries: 1, // Number of edge pages
Num_display_entries: 5, // number of subject pages
Callback: pageselectCallback,
Items_per_page: 3, // one item is displayed on each page
Prev_text: "Previous Page ",
Next_text: "Next page"
});
PageselectCallback (0 );
}
Function pageselectCallback (page_index, jq ){
Var resultList = $ (". result ");
// Var feedback = "";
// Alert (resultList. length );
$ (". Result"). each (function (index, data ){
// Alert (index );
Watermarks (this).css ('display', 'None ');
If (Math. floor (index/3) = page_index ){
Watermarks (this).css ('display', 'block ');
}
});
Return false;
}
// Ajax Loading
$. GetJSON ("testPage", null, function (data) {initPagination (data )});
});
</Script>
</Head>
<Body>
<Div id = "feedback" class = "feedback"> </div>
<Div id = "page" class = "pager"> </div>
</Body>
</Html>