Change the below line in
public ActionResult AjaxDataProvider(JQueryDataTableParamModel param)
var result = from c in displayedCompanies select new[] { Convert.ToString(c.ID), c.Name, c.Address, c.Town };
TO
var result = from c in displayedCompanies select new[] { Convert.ToString(c.ID),"", c.Name, c.Address, c.Town };
Now change your script as below.
<script type="text/javascript">
$(document).ready(function () {
$.datepicker.regional[""].dateFormat = 'dd/mm/yy';
$.datepicker.setDefaults($.datepicker.regional['']);
var tab = $('#myDataTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'AjaxDataProvider',
"bJQueryUI": true,
"aoColumns": [
{"sName": "ID","bVisible":false},
{
"sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return '<a href=\"Home/Details/' + oObj.aData[0] + '\">' + oObj.aData[0] + '</a>'; }
},
{"sName": "COMPANY_NAME"},
{ "sName": "ADDRESS" },
{ "sName": "TOWN" }
]
});
tab.makeEditable({
"aoColumns": [
null, null,
null,
{
indicator: 'Saving...',
tooltip: 'Click to select town',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
loadurl: 'AjaxDataProvider1'
}]
});
tab.columnFilter({
sPlaceHolder: "head:after",
aoColumns: [
{
type: "date-range",
bRegex: true,
bSmart: true
},
{
type: "number-range"
},
{ type: "text" },
{ type: "text" }, { type: "text" }
]
});
});
</script>
Now add another header column to table in your html..
<table id="myDataTable" class="display">
<thead>
<tr>
<th>ID</th>
<th>ID</th>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>