2

私はDataTablesを持っています。そこに 1 つの列を追加し、少しカスタムします。

私の質問: 最後の列「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/

4

2 に答える 2

1

それはあなたが言うことができるバグです... Xを1に変更すると、検索されます。

datatable プラグインは、複数のアルファベット文字がある場合にのみ検索するように見えますが、単一の数字を検索します...

X を XX に変更すると機能します。

X を 9 に変更すると、機能します。

X を Z に変更すると、機能しなくなります。

于 2012-10-24T05:23:15.073 に答える
0

試す：

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

これは、データ テーブル フィルター列のインデックスがめちゃくちゃになっているためです。

于 2012-10-24T10:46:25.947 に答える