Gogoku7
Reputation: 27
DataTables - sorting data click only on tableheader's text
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.
Upvotes: 0
Views: 5509
Answers (3)
vibs2006
Reputation: 6548
We can achieve this by doing two steps basically
- Remove Event Listener from the target column cell (due to which complete cell is clickable)
- Add click handler on target span (image in your case).
I have added a fiddle to give you a live example. Simply remove span tag and insert your image instead of span.
$(document).ready( function () {
var table = $('#example').DataTable();
//Turning Off ALL event listeners for the Name Table Cell
$(".targetHeaderCell").off();
//Adding cursor class to testSpan and Removing Cursor class from overall header
$(".targetHeaderCell").css("cursor","default");
$("#testSpan").css("cursor","pointer");
var booleanSortCol1 = false;
// Attaching CLICK Event Handler on Name Span
$("#testSpan").on("click",function(){
if (booleanSortCol1 == false)
{
table.order([0, 'desc']).draw();
booleanSortCol1 = true;
}
else
{
table.order([0, 'asc']).draw();
booleanSortCol1 = false;
}
});
} );body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div>
<table id="example" class="display nowrap cell-border" width="100%">
<thead>
<tr>
<th style="text-align:left;" class="targetHeaderCell"><span id="testSpan" style="border:1px solid red;padding:0;margin:0;box-sizing:content-box;">Name</span></th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$3,750</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$3,120</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$3,120</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$3,600</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$4,965</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td>$4,965</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td>$2,875</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$4,525</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td>$4,080</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td>$3,750</td>
</tr>
<tr>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$2,875</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td>$3,750</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$6,730</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$6,730</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$4,080</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$3,750</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$4,080</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$4,200</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$4,965</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$5,000</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td>$3,600</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$3,600</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$4,800</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td>$6,730</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$4,800</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$2,875</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$4,800</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$3,120</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$5,300</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td>$4,080</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>Upvotes: 1
Vikas Nimse
Reputation: 9
Use bSortable:false for each column as below:
{"mData": Client,"sClass": "col-md-3 col-lg-3 ", "sTitle": "Client", "bSortable": false}
add span with some class inside th like below:
<th class="col-md-2 col-lg-2 sorting_disabled" rowspan="1" colspan="1" style="width: 105px;" aria-label="Action"><span class="sortClass">Action</span></th>
Code for Sorting manually is here:
var oTable = $('#table-company-manager').dataTable(); //select the table in variable using jquery
$('.sortClass').click(function(e){
e.preventDefault();
oTable.fnSort([ [0,'asc']] );//use asc/desc as you want
});
Upvotes: 0
alfishan aqeel
Reputation: 220
comment out these lines from datatables.js file in datatable library:-
nTh.removeAttribute('aria-sort');
nTh.removeAttribute('aria-label');
nTh.setAttribute('aria-sort', aaSort[0][1] == "asc" ? "ascending" : "descending");
nTh.setAttribute('aria-label', sTitle + ", " (nextSort == "asc" ? oAria.sSortAscending : oAria.sSortDescending));
or you may refer modified and fully accessibility supported library which will better work for you and fulfill your requirements please refer below link.
https://assets.cms.gov/resources/framework/2.0/Pages/datatables.html
Upvotes: 0
Related Questions
- DataTables.net how to order only with custom code
- DataTable Sorting - Sorting by a click on the header
- jQuery Datatable sort by column header
- How to stop DataTable from sorting on click of child element dynamically added to the header?
- table sort when table header is clicked
- jQuery DataTables how to disable sorting when clicking on table header?
- DataTables Secondary Sorting on column name click
- jQuery Datatables: Sort on one column when clicking on another.
- Jquery Datatable Sort Click Event in Table Header Not in Column Title Text
- DataTables: Disable header click sorting, still allow manual sorting