JQUERY DataTable - TypeError: k - undefined - Dynamically create a table with MVC

Question

Try JQUERY DataTable with MVC . The first thing I'm trying to do is try to set up the database.

I am trying to get a dynamic column and Datavalues. I am using fnServerData with sAjaxSource .

I have a breakpoint in my controller file to see if it is called by a call to make sue. I set it right before proceeding.

When I run this code. I get "TypeError: k is undefined" , so the controller does not receive the call

While looking for this problem closer, I came up with a jQuery datatables issue which says

In order for DataTables to function correctly, the HTML for the target table must be laid out in a well-formed form with the declared sections "thead" and "tbody".

But I dynamize all the time, so I'm not sure what I'm doing wrong. My sample code is below.

Any suggestions on the right path would help!

CSHMTL file

 <table id="TestDatatable"> </table> 

DataTable script file

 $('#TestDatatable').dataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "Search/Testcall", "fnServerData": function (sSource, aoData, fnCallback, oSettings) { aoData.push({ "name": "more_data", "value": "my_value" }); oSettings.jqXHR = $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback }); } }); 

Sample Model

 public class DataTableParam { /// <summary> /// Request sequence number sent by DataTable, same value must be returned in response /// </summary> public string sEcho { get; set; } /// <summary> /// Text used for filtering /// </summary> public string sSearch { get; set; } /// <summary> /// Number of records that should be shown in table /// </summary> public int iDisplayLength { get; set; } /// <summary> /// First record that should be shown(used for paging) /// </summary> public int iDisplayStart { get; set; } } 

controller

 public JsonResult Testcall(DataTableParam searchData) { return Json("", JsonRequestBehavior.AllowGet); } 

Update

Another update I received while addressing the issue is that we need to set the columns first before we assign the DataTable data. But in my scenario, I try to attack the controller by ajax call, but even before I get the above error.

Update

Is Dynamic DataTable impossible at all? Do I know columns as well as data only at runtime?

thanks

Answer 1

EDIT # 1

The reason you get a type error is due to the wrong table, which you seem to already know. You also indicated that the table is created dynamically, so we are going to dynamically add the table header using server code to dynamically write columns

sTitle will provide table headers in absentia (sClass just provides a row class)

 <script type="text/javascript> $('#TestDatatable').dataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "Search/Testcall", "aoColumns": [ { "sTitle": "Engine" }, { "sTitle": "Browser" }, { "sTitle": "Platform" }, { "sTitle": "Version", "sClass": "center" }, { "sTitle": "Grade", "sClass": "center" } ], ... 

What was about to happen was to create an initial request to run before the ajax request (since they are not connected).

The purpose of this query is to collect the column names of the table, it may be the same query as the original one, we just need the column names (please excuse my asp.net syntax, not sure if it is correct, but you will get the idea)

Datatables function

 <script type="text/javascript> $('#TestDatatable').dataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "Search/Testcall", "aoColumns": [ <% for each ColumnList as Column { '{ "sTitle": "'& Column &'" },' } %> ], //aoColumns end "fnServerData": function (sSource, aoData, fnCallback, oSettings) { aoData.push({ "name": "more_data", "value": "my_value" }); oSettings.jqXHR = $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback }); } }); </script> 

theoretical above but should work

Original answer The reason you get a type error is due to the wrong table that you thought you already knew. You also indicated that the table is created dynamically

Best way: let datatables do the work for you

 <table> <thead><tr><th>Group</th><th>Code</th><th>Account</th><th>Type</th></tr></thead> <tbody></tbody> </table> 

Above all you need for html in cshtml file

Now your json call should really return data (child steps)

I do not know that I am familiar with asp.net json encoding, I usually use ashx handlers in C # when working with .net, however the bottom line is the ajax url that you use should return the next json for server-side implementations, exceptions for dt_rowid and dtrowclass they are optional fields to either assign identifiers or tr-string classes)

 { "sEcho": 3, "iTotalRecords": 57, "iTotalDisplayRecords": 57, "aaData": [ { "DT_RowId": "row_7", "DT_RowClass": "gradeA", "0": "Gecko", "1": "Firefox 1.0", "2": "Win 98+ / OSX.2+", "3": "1.7", "4": "A" }, ... 

Datatables will generate tr td html for you if you give it well-formed json

Finally, your datatables function will need bServerSide to set true, and your fnRowCallback looks fine

The previous method I did that did not use data strength:

 <table> <thead><tr><th>Group</th><th>Code</th><th>Account</th><th>Type</th></tr></thead> <tbody> @foreach ( var i in dataset) { '<tr><td>...</td></tr>' } </tbody> </table> 

Documents for linking to typeerror On the use page:

In order for DataTables to function correctly, the HTML for the target table must be built in a well-formed form using the sections "thead" and "tbody" declared.

In your case, the <thead> and <tbody> sections are missing ... add the ones that will be fixed for your typeerror k undefined object

We can fix ajax after resolving a type error, but at first glance it seems that your controller is configured to receive, while your ajax data is set to publish, install ajax to receive and check if this fixes the problem.

Answer 2

Try adding the sName parameter to aoColumnDefs , following the @JayRizzi initialization example:

 <script type="text/javascript> $('#TestDatatable').dataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "Search/Testcall", "aoColumns": [ { "sTitle": "Engine", "sName": "engine" }, { "sTitle": "Browser", "sName": "browser" }, { "sTitle": "Platform", "sName": "platform" }, ], ... 

Argument

sName must match the attribute name of the object in JSON sent from the server. In your example, I assume this will be name and value . Also, if you specify sAjaxSource and the response is the JSON object you need (i.e. page.php echoes json_encode(something) ), you will do just fine without calling fnServerData .

Answer 3

Please make sure you add the dataTable class to the table tag:

 <table class="dataTable"> 

Enjoy it!