|
-
Dec 8th, 2013, 10:20 AM
#1
Thread Starter
Fanatic Member
paging and jquery
I have code like this
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Params.aspx.cs" Inherits="JQueryAjax.Params" %>
<!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 runat="server">
<style type="text/css">
.loading { background-image: url('ajax-loader.gif'); background-repeat: no-repeat; }
</style>
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript">
function CallService() {
$("#lblResult").addClass("loading");
$.ajax({
type: "POST",
url: "MyService.asmx/HelloWorld",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: Success,
error: Error
}); }
function Success(data, status) {
$("#lblResult").removeClass("loading");
$("#lblResult").html(data.d);
}
function Error(request, status, error)
{
$("#lblResult").removeClass("loading");
$("#lblResult").html(request.statusText);
}
function CallService1() {
$.ajax({
type: "POST",
url: "MyService.asmx/Add",
data: "{ 'value1': " + $("#txtValue1").val() + ", 'value2': " + $("#txtValue2").val() + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
}); }
function OnSuccess(data, status) {
$("#lblResult").html(data.d);
}
function OnError(request, status, error) {
$("#lblResult").html(request.statusText);
}
function CallService2() {
$.ajax({
type: "POST",
url: "MyService.asmx/RecordsTest",
// data: "{ 'loginid': " +"'"+ $("#txt_login").val()+"'" + ", 'pass': " + "'" + $("#txt_pass").val()+"'" + "}",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess1,
error: OnError1
}); }
function OnSuccess1(data, status) {
$("#tbl").append("<tr bgcolor= blue><th>ID</th><th>NAME</th><th>age</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#tbl").append("<tr bgcolor= lightblue><td>" + (data.d[i].id) + "</td><td>" + (data.d[i].name) + "</td><td>" + (data.d[i].age) + "</td></tr>");
}
// $("#tbl").fadeIn();
}
function OnError1(request, status, error) {
$("#Label1").html(request.statusText);
}
function CallService5() {
$.ajax({
type: "POST",
url: "MyService.asmx/RecordsTest1",
// data: "{ 'loginid': " +"'"+ $("#txt_login").val()+"'" + ", 'pass': " + "'" + $("#txt_pass").val()+"'" + "}",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess1,
error: OnError1
}); }
function OnSuccess1(data, status) {
$("#tbl").append("<tr bgcolor= blue><th>CustomerID</th><th>CompanyName</th><th>detail</th></tr>");
for (var i = 0; i < data.d.length; i++) {
// var newRow = $("#tbl").append("<tr bgcolor= lightblue><td>" + (data.d[i].CustomerID) + "</td><td>" + (data.d[i].CompanyName) + "</td>" + "<td> <img src=" + "'" + "detail.gif" +"'" + "id=" + "'" +"imgSmile" +"'" + "height=50 width=50> </td>" + "</tr>");
var newRow = $("#tbl").append("<tr bgcolor= lightblue><td>" + (data.d[i].CustomerID) + "</td><td>" + (data.d[i].CompanyName) + "</td>" + "<td><a href=#> <img src=" + "'" + "detail.gif" +"'" + "id=" + "'" +"imgSmile" +"'" + "height=50 width=50></a> </td>" + "</tr>");
$("#tbl table").append(newRow);
}
$(newRow).click(function(){
$("#maindiv").show("slow");
});
$("#tbl tr").live("click", function () {
$("#main").show();
});
// $("#tbl").fadeIn();
}
function OnError1(request, status, error) {
$("#Label1").html(request.statusText);
}
function CallService3() {
$.ajax({
type: "POST",
url: "MyService.asmx/Comments",
// data: "{ 'loginid': " +"'"+ $("#txt_login").val()+"'" + ", 'pass': " + "'" + $("#txt_pass").val()+"'" + "}",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess3,
error: OnError1
}); }
function OnSuccess3(data, status) {
if(data.d.length > 5)
{
$('#LinkButton1').attr("visible", true);
}
for (var i = 0; i <= 4; i++) {
$("#tbl").append("<tr><td>" + (data.d[i]) + "</td></tr>");
}
}
function OnError1(request, status, error) {
$("#Label1").html(request.statusText);
}
// Button4
// $(document).ready(function(){
// When the web page document is ready, do what's below.
//$("LinkButton1").click(function(){
//alert("FGFG");
//$("h1").hide("slow");
//$("h2").show("fast");
//$("img").slideUp();
//});
//});
function CallService4() {
$.ajax({
type: "POST",
url: "MyService.asmx/Comments",
// data: "{ 'loginid': " +"'"+ $("#txt_login").val()+"'" + ", 'pass': " + "'" + $("#txt_pass").val()+"'" + "}",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess3,
error: OnError1
}); }
function OnSuccess3(data, status) {
if(data.d.length >5)
{
// var x =
}
// $("#tbl").append("<tr bgcolor= #FFFF00><th>ID</th><th>NAME</th><th>age</th></tr>");
for (var i = 0; i <=4; i++) {
// for (var i = 0; i <= 4; i++) {
//id of Gridview (*Note name of the columns are CaseSensitive)
$("#tbl").append("<tr><td>" + (data.d[i]) + "</td></tr>");
}
// $("#Label1").html(data.d);
// $("#tbl").append("<tr bgcolor= #FFFF00><th>ID</th><th>NAME</th><th>age</th></tr>");
// for (var i = 0; i < data.d.length; i++) {
// //id of Gridview (*Note name of the columns are CaseSensitive)
// $("#tbl").append("<tr><td>" + (data.d[i].id) + "</td><td>" + (data.d[i].name) + "</td><td>" + (data.d[i].age) + "</td></tr>");
// }
}
$(document).ready(function()
{
$("#tbl").tablesorter();
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="maindiv">
<table border=1>
<tr><td></td></tr>
</table>
</div>
<div>
<asp:Button ID="btnGo" Text="Hello World" OnClientClick="CallService(); return false;" runat="server" />
<asp:Button ID="Button1" Text="Add" OnClientClick="CallService1(); return false;" runat="server" />
<asp:Label ID="lblResult" Text=" " Width="100%" runat="server" />
<asp:Label ID="lblRecords" Text=" " Width="100%" runat="server" />
<table id=tbl runat=server>
<%-- <tr>
<td>
Login ID</td>
<td>
<asp:TextBox ID="txt_login" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password</td>
<td>
<asp:TextBox ID="txt_pass" runat="server"></asp:TextBox>
</td>
</tr>--%>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button3" Text="Login check" OnClientClick="CallService2(); return false;" runat="server" />
</td>
<td>
<asp:Button ID="Button2" Text="Comments" OnClientClick="CallService3(); return false;" runat="server" />
</td>
<td>
<%-- <asp:Button ID="Button4" Text="login" return false; runat="server" />--%>
<table id=tbl_login visible=false runat=server>
<tr>
<td colspan=2>Login panel</td>
</tr>
<tr>
<td>Userid</td><td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>password</td><td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
</tr>
</table>
</td>
</tr>
</table>
<%-- <asp:LinkButton ID="LinkButton1" runat="server" Text="Show all">LinkButton</asp:LinkButton>--%>
<asp:LinkButton ID="LinkButton1" Visible="false" Text="Show all" OnClientClick="CallService4(); return false;" runat="server" />
<asp:Label ID="Label1" Text=" " Width="100%" runat="server" />
<!-- An empty div which will be populated using jQuery -->
<asp:Button ID="Button4" Text="Comments" OnClientClick="CallService5(); return false;" runat="server" />
<div id="main" runat="server" style="display: none;">
<table border=1>
<tr>
<td>User id </td>
<td>
<asp:TextBox ID="txt_login" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password</td>
<td>
<asp:TextBox ID="txt_pass" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td colspan=2>
<asp:Button ID="Button5" Text="submit" OnClientClick="CallService1(); return false;" runat="server" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
and use following link for http://tablesorter.com/docs/index.html for pagination in paging but it does not showing nay paging in html table named as tbl in above page
There is no achievement without goals
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote