Question

我有DataTables。我在那里添加了一列和一些自定义。

我的问题：当我搜索我的最后一栏“css grade”并输入'A'时，它无效？

这是我的代码：

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>

或者你可以在这里查看我的代码： http://jsfiddle.net/guruhkharisma/94BZV/

Answer 1

这是一个你可以说的错误...如果你把X改成1它会搜索。

看起来数据表插件只搜索是否有超过1个字母字符但会搜索单个数字字符...

将X更改为XX，它将起作用。

将X更改为9，它将起作用。

将X更改为Z并且无法正常工作。

Answer 2

尝试：

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

这是因为数据表过滤器列索引搞砸了希望它会有所帮助

在我的上一篇专栏中搜索不是DataTables

2 个答案: