I am currently working on an ASP.NET MVC application that uses DataTables in the views to be able to sort the table content by clicking on the header.
The customer wants the area that you can click on to sort the data in that column reduced to only the text of the table header.
I'm including an image to show an example.
Currently the blue square is the area that you can click on to sort the data in that column, the customer wants the red square to be the area that you can click on to sort the data.
Here's what the table in the View in Visual Studio looks like:
<table class="table table-hover dataTable" id="areatable">
<thead>
<tr>
<th>
th1
</th>
<th>
th2
</th>
<th>
th3
</th>
<th data-orderable="false">
th4
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.Number
</td>
<td>
@item.Alarm
</td>
<td>
<!--NotImplemented-->
</td>
<td>
@Html.ActionLink("Details", "Index", "", null, null)
</td>
</tr>
}
</tbody>
</table>
When you navigate to the url in the browser, one table header starts looking like this:
<th class="sorting_asc"
tabindex="0"
aria-controls="areatable"
rowspan="1"
colspan="1"
aria-sort="ascending"
aria-label="th1: activate to sort column descending"
style="width: 442px;">
th1
</th>
Here is the JavaScript to initialize DataTables looks like:
function InitDatatables() {
$('table.dataTable')
.DataTable({
"paging": false,
"ordering": true,
"info": false,
"searching": true,
"language": {
"search": "Zoeken: ",
"zeroRecords": "Geen bronnen gevonden."
}
});
// This code is to initially hide the filter/search bar.
$("div.dataTables_filter").hide();
$('div.dataTables_filter input').addClass('form-control').css({ width: 'auto', display: 'inline-block' });
$('div.dataTables_filter label').prop('disabled', true).css({ float: 'left', marginLeft: '14px' });
}
I looked around a little bit and I could not find similar questions.
I have tried wrapping the tableheader's text into [a][/a] tags and then using JQuery to remove 'class', 'aria-sort' and 'aria-label' from the [th][/th] tags and add these to the [a][/a] tags. This wasn't successful because of my lack of experience with JQuery.
Whenever I would manually remove the mentioned attributes from the [th][/th] tags in the browser using inspect element, the attributes would automatically be added back to the [th][/th] tags upon clicking on the table header, I think it's DataTables itself doing this.
Is there some way to achieve what I'm looking for, or to at least make it look like it's working the way as is requested?
Thank you.
