It's been a while, since I've been on the ASP-Road, but I hope to provide you some help:
1) Read the Documentation of DataTables, especially the paragraph about Ajax source data. There you learn how to use Datatables with server generated data.
Serverside processing might be of interest too.
2) You are free to use a html-skeleton (as you did), but you could use Custom Column Definitions
3) In order to get the Datatables Plugin to work you need a) an Element in your DOM, where the Datatable can hook on: $('#example').dataTable() does that; and b) you need data to display.
There are two basic formats:
I) You have loose data, which is represented as an Array of Arrays.
Each Array representing a Row, which consists of an Array of columns as in this or this example.
II) You have structured data, which comes as JSON as in this example
So when I get your example right:
return JsonConvert.SerializeObject(dt);
does exactly that.
What your code is lacking is the initialization of the datatable (see (3) ). And then you are done.
P.S.:
Perhaps this is interesting for you.
Edit:
I forgot to address this point
If I wanted to update/delete/insert to the database from the client, is there a way to do that within JavaScript, or should I be doing it within C# somehow? (I have looked around and really, there isn't a ton of documentation)
No. Within Javascript there is no way. But it is possible to send a message to the server, which lets the server know, that you wanted to delete one entry. It is possible to intercept the rendering process of datatables.net, so that you generate attributes, which you could use to identify the objects displayed in the column (e.g. an ID or the like). And you could then initiate a DELETE request to the server
$.ajax({
url: '/endpoint'+idOfSelectedElement,
type: 'DELETE',
success: function(result) {
// Do something with the result
}
});
Look here for the documentation.
Edit2: A question to elaborate a bit more on the topic
When dealing with insert, update, delete, select etc from the front end to server, is this always done with ajax? Is it safe? Is it fast? How are the requests usually formatted to delete specific rows, or update specific rows? (your answer doesn't have to be jquery datatables specific) Thanks!
a) CRUD and ajax
There is no clear answer to that: it depends. If you are working with browsers as clients of your interface/API, there are only two of the many HTTP-Methods implemented, namely GET and POST. This is, what we all know from our standard <form> specified under method. These were the genuine methods available (rooted in historical decisions, but I see no reason to stick with that; browser developer should change this constraint).
In order to use a restish API, which has e.g. also support of PUT, DELETE, PATCH there is a way to circumvent this constraint. Many frameworks provide parsing a hidden <input>-field where the "rest-method" is defined and map to the according controller.
As you can see, it is not always necessary to do it asynchronous or with javascript. So ajax is only one - but a nice one - option to play with. Unless not otherwise restricted (managers, users etc.) I would always go for ajax.
b) Is ajax safe
It is as safe as you make it. There are possibilities for securing your endpoints. But as I said, I am not quite up to date, what Microsoft offers, there are possibilities for sure.
c) Is it fast
It is as fast as your hardware (connection, server etc.) allow.
There is no difference in terms of performance doing something like a PostBack or a $.post(). The main difference is, that a traditional POST is a) not asynchronous and b) you are loosing the current context.
d) Form of CRUD requests
You form your actions via URL and HTTP-Verbs:
1) Get a list of all Users: GET api/users
2) Get information about user 1: GET api/users/1
3) Get all users, which are from Seattle GET api/users?location=Seattle
4) Get all male users, which are form Seattle GET api/users?location=Seatte&gender=male
5) Create a user POST api/users/ sending a JSON representation of the created user {"name":"Doe", "firstname":"John","city":"Seattle" ...}
6) Update user 1 PATCH/PUT api/users/1 sending JSON of the changes {"city":"Miami"} (if he moved to Miami}
7) Delete user 1 DELETE api/users/1
If you want to specify the output data from the server, you could set the ACCEPT field in the header e.g. to application/json or application/xml.
As you see, there is a big advantage in using a RESTish API: you have a set of universal verbs, which each service speaks, which is easy to learn and to adapt.
These are the basics of the REST-philosophy. There is more to say, but not in this post ;)
datatables.netjQuery is a requirement. \$\endgroup\$