CODEWITHSUNDEEP
javascriptjquerydatatables
guruh
guruh

Reputation: 95

Searching in my last column is not working DataTables

I have DataTables. And I add one column there and a little custom.

My Question : When I search my last column "css grade" and I typed 'A', It is not working ?

Here is my code :

HTML

<div id="container">
      <h1>Live example</h1>

      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
          <tr>
             <th><input type="checkbox" value="checkall"/></th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd gradeX">
             <td><input type="checkbox" value="checkall"/></td>
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center"> 4</td>
            <td class="center">X</td>
          </tr>
          <tr class="even gradeC">
             <td><input type="checkbox" value="checkall"/></td>
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>
            <td class="center">C</td>
          </tr>
          <tr class="odd gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>
            <td class="center">A</td>
          </tr>
          <tr class="even gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="center">6</td>
            <td class="center">A</td>
          </tr>
          <tr class="odd gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td class="center">7</td>
            <td class="center">A</td>
          </tr>
          <tr class="even gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td class="center">6</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Firefox 1.0</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">1.7</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Firefox 1.5</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">1.8</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Firefox 2.0</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">1.8</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Firefox 3.0</td>
            <td>Win 2k+ / OSX.3+</td>
            <td class="center">1.9</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Camino 1.0</td>
            <td>OSX.2+</td>
            <td class="center">1.8</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Camino 1.5</td>
            <td>OSX.3+</td>
            <td class="center">1.8</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Netscape 7.2</td>
            <td>Win 95+ / Mac OS 8.6-9.2</td>
            <td class="center">1.7</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Netscape Browser 8</td>
            <td>Win 98SE+</td>
            <td class="center">1.7</td>
            <td class="center">A</td>
          </tr>
          <tr class="gradeA"> <td><input type="checkbox" value="checkall"/></td>
            <td>Gecko</td>
            <td>Netscape Navigator 9</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">1.8</td>
            <td class="center">A</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </tfoot>
      </table>

    </div>

jQuery

<script>
        $(document).ready(function(){
           jQuery.fn.dataTableExt.oSort['html-undefined']  = function(a,b) {
                return false;
            };
            $('.sorting_disabled').unbind('click');


             $('#example').dataTable( {
                           "aoColumns": [ 
                             { "bSortable": false },
                             null,
                             null,
                             null,
                             null,
                             null
                           ] } ); 
        });
    </script>

or you can view my code in here : http://jsfiddle.net/guruhkharisma/94BZV/

Upvotes: 2

Views: 314

Answers (2)

Smiter
Smiter

Reputation: 1391

try:

 $('#example').dataTable( {                            
      "aoColumns": [
        { "bSortable": false ,  "bSearchable" : false,
          "mData" : null,"sDefaultContent": '<input type = "checkbox">'},
           null,
           null,
           null,
           null,
           null
        ] } );

It is because datatable filter column indexes messed up Hope it'll be helpful

Upvotes: 0

deach
deach

Reputation: 360

It’s a bug you could say... if you change the X into a 1 it will search.

It looks like the datatable plugin only searches if there are more than 1 alphabetical characters but will search single numeric characters…

change the X to XX and it will work.

Change the X into a 9 and it will work.

Change the X into a Z and it wont work.

Upvotes: 1

Related Questions