jQuery DataTable JS not working(ASP .NET 3-tier architecture)

Question

I am using a 3-tier architecture in my project, which has the following structure :

Web Pages(has reference to BusinessLogic(C# Class)
Business Logic(has reference to the DataAccess(C# class) contains all the methods for data access.
DataAccess - contains methods for database operations(Insert,Update,Delete,etc)

Now in my website, I am using a MasterPage-ContentPage relationship. As I have learned I am loading all my scripts and CSS for the individual pages in my master page.

Here is my bottom section(scripts references) of the Master Page :

Here is the top section(CSS references) of my master page :

As I have seen from the official jQuery DataTable tutorial page, this is the way I should initialize my DataTable in my script.

Still when I run the CSS works as expected, but the JS doesn't work as I tried to use the functions like sorting,searching,etc. - NOTHING WORKS.

This is my content page for reference :


    
        
            
                
                    Products : 
                
                
                    

            
                
                
                
                    
                        
                            Sr. No
                            Name
                            Category
                            Company
                            Price
                            In Stock
                            Min. Qty
                            Date Created
                            
                        
                    
            
            
                    
                        <%# Container.ItemIndex + 1 %>
                        <%# Eval("ProdName") %>
                        <%# Eval("CategoryName") %>
                        <%# Eval("CompanyName") %>
                        <%# Eval("ProdPrice") %>
                        <%# Eval("QuantityInStock")%>
                        <%# Eval("MinQuantity")%>
                        <%# Eval("DateCreated")%>
                        View

and this is my PageLoad method. There are no other methods for the Page except PageLoad :

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Session["user"] != null)
            {
                rptr.DataSource = new ProductLogic().fillProductTable();
                rptr.DataBind();
            }
            else
            {
                Response.Redirect("Login.aspx?url=ProductDetails.aspx");
            }
        }
    }

I do not know what am I doing wrong. The data is being loaded correctly, the CSS is but the JS doesn't work at all. What is wrong that I am doing here ?

Abhishek Ghosh · Accepted Answer

I believe there is ufcourse some way other than I am mentioning in my answer to use the jQuery DataTable in your ASP.NET web-application. But I found this the easiest way possible.

Step-1) Create a web service in your website.In the code below I am converting a datatable returned from my query result into a JSON Array with one of the utilities I found on the internet. Here is the code for the WebService :

/// 
/// Summary description for ProductDetailsWebService
/// 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class ProductDetailsWebService : System.Web.Services.WebService
{
    [WebMethod]
    public void GetProductDetails()
    {
        ProductLogic prodLogic = new ProductLogic();
        DataTable dt = prodLogic.fillProductTable();

        JavaScriptSerializer serializer = new JavaScriptSerializer();

        List> rows = new List>();

        Dictionary row;

        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary();
            foreach (DataColumn col in dt.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        Context.Response.Write(serializer.Serialize(rows));
    }


}

Step-2) The HTML looks something very simple with a basic tag containing several . Note the id you give here is important as this id will be used in JS to find the table element. Here is the HTML :


       
          
             Name
             Category
             Company
             Price
             In Stock
             Min. Qty
             Date Created
             More

Step-3) The JS :

NOTE: You need to have only the CSS and the JS for datatable which can be found at the jQuery Datable Tutorial Page.

Very Important Video tutorial for the same can be found at Kudvenkat's jQuery Tutorial series on YouTube.

jQuery DataTable JS not working(ASP .NET 3-tier architecture)

Answers (1)

Related Questions