How to include static image to dataTables?

Vanessa

Hi,

I'm trying the example from the site "DataTables hidden row details example " to include picture into one of my column. But I keep getting "DataTable Warning (table id='CustomerTable'). Requested unknown parameter '0' from the data source for row 0".

I using Server Side processing and I would like to include image into one of the column. Here's my code below,




$(document).ready(function () {

/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#CustomerTable thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});

$('#CustomerTable tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});

var oTable = $('#CustomerTable').dataTable({
"sDom": 'ftpr',
"iDisplayLength": 10,
"bLengthChange": false,
"bProcessing": true,
"bServerSide": true,
"oLanguage": { "sSearch": "Search Company Name" },
"sPaginationType": "full_numbers",
"sAjaxSource": '@Url.Action("GetAllCompany","Customer")',
"fnServerData": function (sUrl, aoData, fnCallback) {
$.ajax({
"url": sUrl,
"data": aoData,
"success": fnCallback,
"cache": false,
"dataType": "json",
"type": "POST",
"contentType": "application/x-www-form-urlencoded; charset=utf-8",
"error": function (jqXHR, textStatus, errorThrown) {
alert("Error " + errorThrown);
} // $.ajax error
}); //$.ajax
}, // fnServerData
"aoColumnDefs": [
{"bSortable": false, "aTargets": [0] },
{ "sTitle": "Code", "sName": "Code", "aTargets": [1], "mDataProp": "Code" },
{ "sTitle": "Company Name", "sName": "CompanyName", "aTargets": [2], "mDataProp": "CompanyName", "sWidth": "20em" },
{ "sTitle": "Grading", "sName": "Grading", "aTargets": [3], "mDataProp": "Grading", "bSearchable": false, "bSortable": false },
{ "sTitle": "Trade ID", "sName": "TradeID", "aTargets": [4], "mDataProp": "TradeID" },
{ "sTitle": "Caller 1", "sName": "FrequentCaller1", "aTargets": [5], "mDataProp": "FrequentCaller1", "sWidth": "15em" },
{ "sTitle": "Caller Dept", "sName": "FrequentCallerDept1", "aTargets": [6], "mDataProp": "FrequentCallerDept1", "sWidth": "8em" },
{ "sTitle": "Module", "sName": "Module", "aTargets": [7], "mDataProp": "Module", "sWidth": "8em" },
{ "sTitle": "Reporting Method", "sName": "ReportingMethod", "aTargets": [8], "mDataProp": "ReportingMethod", "sWidth": "6em" },
{ "sTitle": "Email", "sName": "Email", "aTargets": [9], "mDataProp": "Email", "sWidth": "8em" }

],
"aaSorting": [[1, "asc"]]

}); //oTable

}) //end of $(document)

Customer List



Code
Company Name
Grading
Trade ID
Caller 1
Caller Dept
Module
Reporting Method
Email









Why do I keep getting the error message mentioned above? Any help would be appreciated.

allan

Please see this FAQ: http://datatables.net/faqs#unknown_parameter :-)

In this case you have:

> {"bSortable": false, "aTargets": [0] },

But you are obviously using objects as your data source - so you probably need to specify either sDefaultContent or mDataProp for this column.

Allan

Vanessa

This {"bSortable": false, "aTargets": [0] } is actually used for the $('#CustomerTable thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
to insert the column for the table. I tried to remove this line and is still giving me the error. If I remove this line and also the following lines,
$('#CustomerTable thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});

$('#CustomerTable tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});

and I will be able to load my record successfully. Any idea?

allan

As I say, use sDefaultContent or mDataProp for the column. It is trying to access an array index 0 in the JSON data source, which you don't have since its an object, but you need to tell DataTables that. Just set sDefaultContent: ""

Allan

Vanessa

Hi Allan,
I use sDefaultContent for the column and I don't have the error now.

However, above the code,
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

....
$('#CustomerTable tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});

it is trying to include an image but the image is not displaying.

allan

That would suggest that the path is wrong - are you getting any 404 errors in your server error log?

Vanessa

To test whether the path is wrong,
I've change
nCloneTd.innerHTML = '';
to
nCloneTd.innerHTML = 'test';

The first column still shows me an empty column. It is not displaying value "Test" in the column.

allan

Can you link to your example please? Can you just put the image straight into the HTML rather than cloning the nodes? Might be easier ultimately.

Allan

ken29147

Maybe it is about the $(document).ready and ajax,
you did that "$('#CustomerTable thead tr').each" with empty table, then oTable got data from server...

you can try to do .each in "fnInitComplete". XD