Question

I am new to .net. I want to create a DataTable example. My table is in “sql” management studio. I want to load that table into my DataTable. How can i do this? I can get the table using connection string but how to fix it in DataTable?

Please show me the code if you have it. Don’t forget that i am a beginner only. Please explain clearly.

I’ve got some code like this:

<script type="text/javascript" >
    $(document).ready(function() {
        $('#example').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "somefile"
        });
    });
</script>

Please explain it to me.

Thanks in advance.

Answer 1

To give you some encouragement, I was very new to .NET and javascript about nine months ago (and arguably still am) but I was still able to use the resources on datatables.net to make a very nice, functional datatable using ASP.net and a SQL server. A couple of suggestions:

First: The examples page, API reference, and forums on datatables.net are going to be your best resources. I’ve spent days coding some really complicated way to get the table to do something relatively simple only to find through the reference page that there was already an easy, sophisticated native way to do that.

Second: If you’re using MVC and it’s really necessary to do server side processing (if not see below), there is a great tutorial on code project about how to do set this up with datatables.net.

Third: Server side processing gives you a lot of control over the way the table renders your data, but it requires you to code sorting and pagination functions by hand. The alternative method, that I use, is the sAjaxSource initialization option for the table without bServerSide set to true — as this allows me dynamically load the data from an external (AJAX) source, while still letting the datatable plugin do all of the heavy lifting. Here’s the setup I have (I apologize if this is too simplistic):

1. I have an empty table in my HTML, with just the headers of each column specified. Make sure you have the thead and tbody tags.

2. In your .NET project, create a new “Generic Handler” (the extension should be .ashx). This handler will handle a request from your main page for your data (you’ll see below). Here, I do the following:

   a. I connect to my SQL database

   b. Retrieve the view of the table I’m looking for

   c. Parse each row into an object (I created a new class for this)

   d. Serialize an array of my “row objects” into a JSON object (as this will be the easiest way for the datatable to work with your data

   e. Write the response back to the page

   I’d be happy to share my code that I use to do this, but I can already feel this post becoming too long, so just let me know if you want it.

3. I then setup my datatable in the page’s javascipt, within the $(document).ready function. I use the .ashx file as my AJAX source and then I specify the name that I use as the key for each column in my JSON object – using the mDataProp option:

   oTable = $("#production_table").dataTable({            
       "sAjaxSource": 'Data.ashx', 
           // ^ Change this ashx filename based on 
           //   the file you created above in #2  
       "aoColumns": [
           { "mDataProp": "column1" },
           { "mDataProp": "column2" },
           { "mDataProp": "column3" } ]
   });
   

Good luck!