2012-01-29 4 views
0

私のデータベースから引き出されるデータを表示するには、datatables http://datatables.net/というjqueryスクリプトを使用しています。私は自分のテーブルのためにここに示した例を修正しました http://datatables.net/release-datatables/examples/api/multi_filter_select.html 。私が今問題としているのは、すべての単一の列にフィルタを配置しているということです。これにより、私のテーブル名の列にあるフィルタのみが存在するようになります。ある場合は、この列に 'Reps'というクラスを適用する必要があるのですか?または、特定の列のみをフィルタリングするよう指定するために、列ヘッダー/フッターを使用できますか?すべての列ではなく1つの列のみをフィルタリングするJqueryテーブルスクリプトを変更する

(function($) { 
    /* 
    * Function: fnGetColumnData 
    * Purpose: Return an array of table values from a particular column. 
    * Returns: array string: 1d data array 
    * Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function 
    *   int:iColumn - the id of the column to extract the data from 
    *   bool:bUnique - optional - if set to false duplicated values are not filtered out 
    *   bool:bFiltered - optional - if set to false all the table data is used (not only the filtered) 
    *   bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array 
    * Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de> 
    */ 
    $.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) { 
     // check that we have a column id 
     if (typeof iColumn == "undefined") return new Array(); 

     // by default we only wany unique data 
     if (typeof bUnique == "undefined") bUnique = true; 

     // by default we do want to only look at filtered data 
     if (typeof bFiltered == "undefined") bFiltered = true; 

     // by default we do not wany to include empty values 
     if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true; 

     // list of rows which we're going to loop through 
     var aiRows; 

     // use only filtered rows 
     if (bFiltered == true) aiRows = oSettings.aiDisplay; 
     // use all rows 
     else aiRows = oSettings.aiDisplayMaster; // all row numbers 

     // set up data array 
     var asResultData = new Array(); 

     for (var i=0,c=aiRows.length; i<c; i++) { 
      iRow = aiRows[i]; 
      var aData = this.fnGetData(iRow); 
      var sValue = aData[iColumn]; 

      // ignore empty values? 
      if (bIgnoreEmpty == true && sValue.length == 0) continue; 

      // ignore unique values? 
      else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; 

      // else push the value onto the result data array 
      else asResultData.push(sValue); 
     } 

     return asResultData; 
    }}(jQuery)); 


    function fnCreateSelect(aData) 
    { 
     var r='<select><option value=""></option>', i, iLen=aData.length; 
     for (i=0 ; i<iLen ; i++) 
     { 
      r += '<option value="'+aData[i]+'">'+aData[i]+'</option>'; 
     } 
     return r+'</select>'; 
    } 


    $(document).ready(function() { 
     /* Initialise the DataTable */ 
     var oTable = $('#dashboard').dataTable({ 
      "bJQueryUI": true, 

      "bInfo": true, 

      "bAutoWidth": true, 

      "bFilter": true, 

      "bLengthChange": true, 

      "bPaginate": true, 

      "bProcessing": true, 

      "bSort": true, 

       "sPaginationType": "full_numbers", 

       "aaSorting": [[ 9, "desc" ]], 

       "iDisplayLength": 5, 

       "bLengthChange": false 
     }); 

     /* Add a select menu for each TH element in the table footer */ 
     $("tfoot th").each(function (i) { 
      this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
      $('select', this).change(function() { 
       oTable.fnFilter($(this).val(), i); 
      }); 
     }); 
    }); 

答えて

1

eq()メソッドを使用すると、特定のインデックスの要素を選択できます。これは、一致した要素のセットを、指定されたインデックスのものに減らします。

など。テーブルから2番目の列を選択する場合は、これを行うことができます。

擬似セレクタを使用して、指定したインデックスの要素を選択することもできます。

$('table thead th:eq(1)'); 

参考文献: eq() - http://api.jquery.com/eq/ :eq()からhttp://api.jquery.com/eq-selector/

+0

おかげで:-)、この行にそれはありますか?/*テーブルのフッターにある各TH要素の選択メニューを追加する*/ \t \t \t $( "tfoot th")各(関数(i){ –

+0

はい、これは正しいと思われます) – ShankarSangoli

+0

これを追加する方法がわかりません –

関連する問題