Click here to Skip to main content
15,909,051 members
Home / Discussions / ASP.NET
   

ASP.NET

 
GeneralRe: pdf rendering options Pin
indian14319-Apr-12 13:01
indian14319-Apr-12 13:01 
GeneralRe: pdf rendering options Pin
Sebastian T Xavier19-Apr-12 19:19
Sebastian T Xavier19-Apr-12 19:19 
QuestionC# 2010 ide Pin
jassiedog18-Apr-12 7:56
jassiedog18-Apr-12 7:56 
AnswerRe: C# 2010 ide Pin
jkirkerx18-Apr-12 11:21
professionaljkirkerx18-Apr-12 11:21 
AnswerRe: C# 2010 ide Pin
R. Giskard Reventlov18-Apr-12 11:35
R. Giskard Reventlov18-Apr-12 11:35 
AnswerRe: C# 2010 ide Pin
biop.codeproject18-Apr-12 18:23
biop.codeproject18-Apr-12 18:23 
AnswerRe: C# 2010 ide Pin
ZurdoDev19-Apr-12 6:42
professionalZurdoDev19-Apr-12 6:42 
GeneraljQuery Datatable using webservice Pin
Member 883204618-Apr-12 7:28
Member 883204618-Apr-12 7:28 
jQuery Datatable using webservice
Published: September 04, 2010 By Sumit Dutta
Visited: 4918

In this article I will explore how to prepare datatable using jQuery and webservice. Webservice will return data as JSON which will be binded to jQuery Datatable.



jQuery DataTable



Let's see how we can do this:

Step 1: Download jQuery 1.4.2 and jQuery Datatable



Step 2: Add jquery-1.4.2.min.js and jquery.dataTables.min.js in the page

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.dataTables.min.js" type="text/javascript"></script>



Step 3: Add the below style in the page.





.myGrid
{
width: 100%;
margin: 0px 0 0px 0;
border: solid 1px #525252;
border-collapse: collapse;
width: 600px;
}

.myGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: Black;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
width:40px;
}

.myGrid th
{
color: #fff;
background: url(images/grid_header.png) repeat-x top;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}





Step 4: Add below html content inside body tag







By


Recipie Name


Preparation Time


Cooking Time






Loading....









Step 5: Add below javascript in the page.



<script language="javascript" type="text/javascript">
$(document).ready(function() {
function renderTable(result) {
var dtData = [];
$.each(result, function() {
dtData.push([
this.by,
this.Recipiename,
this.preparationtime,
this.cookingtime
]);
});
$('#grid').dataTable({ //grid is the id of the table
'aaData': dtData,
'bPaginate': false,
'bInfo': false,
'bFilter': false
});
}

$.ajax({
type: "GET",
url: "JsonWebService.asmx/GetRecipie",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
renderTable(response.d);
},
failure: function(errMsg) {
$('#errorMessage').text(errMsg); //errorMessage is id of the div
}
});
});
</script>



Step 6: Create an asmx file and create below class.

public class Recipie
{
public string by;
public string Recipiename;
public string preparationtime;
public string cookingtime;
}



Step 7: Add below name space in the asmx.cs file



using System.Web.Script.Services;
using System.Data;
using System.Data.SqlClient;



Step 8: Create below webmethod in the asmx.cs file to get data from database and return List to jQuery

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public List GetRecipie()
{
string strQuery = "SELECT * FROM Recipie";
DataTable dtRecipie = null;
Recipie objRecipie;
SqlConnection con = GetConnection("Data Source=(local);Initial Catalog=DataTable;Integrated Security=SSPI");
using(con)
{
con.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
{
dtRecipie = new DataTable();
sqlAdapter.Fill(dtRecipie);
}
}
List drlist = new List();
foreach (DataRow row in dtRecipie.Rows)
{
objRecipie = new Recipie();
objRecipie.by = row["by"].ToString();
objRecipie.Recipiename = row["Recipiename"].ToString();
objRecipie.preparationtime = row["preparationtime"].ToString();
objRecipie.cookingtime = row["cookingtime"].ToString();
drlist.Add(objRecipie);
}
return drlist;
}



Step 9 : Add below method to get SqlConnection

private SqlConnection GetConnection(string m_conString)
{
SqlConnection con = new SqlConnection(m_conString);
return con;
}



This ends the article of creating datatable using jquery and webservice.
AnswerRe: jQuery Datatable using webservice Pin
R. Giskard Reventlov18-Apr-12 7:36
R. Giskard Reventlov18-Apr-12 7:36 
QuestionPDF edit in webpage Pin
sonj18-Apr-12 3:42
sonj18-Apr-12 3:42 
AnswerRe: PDF edit in webpage Pin
R. Giskard Reventlov18-Apr-12 7:35
R. Giskard Reventlov18-Apr-12 7:35 
GeneralRe: PDF edit in webpage Pin
sonj19-Apr-12 20:03
sonj19-Apr-12 20:03 
QuestionJquery deleting row from gridview Pin
byka18-Apr-12 2:47
byka18-Apr-12 2:47 
AnswerRe: Jquery deleting row from gridview Pin
ZurdoDev19-Apr-12 6:43
professionalZurdoDev19-Apr-12 6:43 
Questionhow to create basicdatepicker in asp.net Pin
Member 878628918-Apr-12 0:37
Member 878628918-Apr-12 0:37 
AnswerRe: how to create basicdatepicker in asp.net Pin
Not Active18-Apr-12 2:12
mentorNot Active18-Apr-12 2:12 
AnswerRe: how to create basicdatepicker in asp.net Pin
Vipin_Arora19-Apr-12 2:27
Vipin_Arora19-Apr-12 2:27 
AnswerRe: how to create basicdatepicker in asp.net Pin
ZurdoDev19-Apr-12 6:45
professionalZurdoDev19-Apr-12 6:45 
AnswerRe: how to create basicdatepicker in asp.net Pin
vvashishta24-Apr-12 18:58
vvashishta24-Apr-12 18:58 
QuestionWeb Page Similarity in all browsers Pin
shayanki saxena17-Apr-12 23:35
shayanki saxena17-Apr-12 23:35 
AnswerRe: Web Page Similarity in all browsers Pin
Sebastian T Xavier18-Apr-12 2:03
Sebastian T Xavier18-Apr-12 2:03 
AnswerRe: Web Page Similarity in all browsers Pin
ZurdoDev19-Apr-12 6:45
professionalZurdoDev19-Apr-12 6:45 
QuestionIs there a way to restrict the user from changing virtual directory name Pin
Sebastian T Xavier17-Apr-12 19:01
Sebastian T Xavier17-Apr-12 19:01 
AnswerRe: Is there a way to restrict the user from changing virtual directory name Pin
ZurdoDev19-Apr-12 6:46
professionalZurdoDev19-Apr-12 6:46 
GeneralRe: Is there a way to restrict the user from changing virtual directory name Pin
Sebastian T Xavier19-Apr-12 19:21
Sebastian T Xavier19-Apr-12 19:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.