Question

I am using the datatable plugin for jQuery, I have a table on my html page that I dont want sorting on, but I am using the plugin to paginate the results, and also have verbage if there is nothing in the table. I have no problem stopping the table from sorting using (“bSort”: false), but it still makes the header of the tables clickable, which can be frustrating to the user because there is no change when clicked. Here is the plugin I am using: http://datatables.net/ , and here is my HTML:

  <table align="center" id="t1" width="57%">
    <thead>
      <tr>
        <th class="headerClass" width="12%">Type</th>
        <th class="headerClass">Description</th>
        <th class="headerClass" width="3%">Campus</th>
        <th class="headerClass" width="14%">Date </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="normal"><%=lostFound%></td>
        <td class="normal"><%=lostDesc%></td>
        <td class="normal"><%=lostLoc%></td>
        <td class="normal"><%=lostDate%></td>
      </tr>
    </tbody>
  </table>

And here is my jS:

  var $t1 = $("#t1");
    $t1.dataTable({
      "bSort": false, 
      "oLanguage" : bsLfReq.O_LANGUAGE, 
      "bLengthChange": false, 
      "bFilter": false, 
      "bAutoWidth": false, 
      "iDisplayLength": 3, 
      "bInfo": false
      });

So basically I want the table to still use the datatable plugin, but not have the headers clickable. Is this possible?

Answer 1

I tried to recreate your scenario. Check this jsfiddle.
For me deactivating sorting via "bSort" : false works like a charm.

With sorting (see the arrows):
Without sorting:

UPDATE:

Define a cursor for your headerClass:

#headerClass {
   cursor: default;
}

Check out this reference for cursor styles.