jquery UI打破網站上的所有其他表

Question

我正在使用一個叫做datatables的jquery腳本，它爲你的表添加了很多功能，例如搜索和過濾等，並且使你能夠使用jquery ui皮膚表。我正在嘗試在我的網站上覆制以下示例，以便我可以過濾列。 http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html 現在我遇到的問題是，當我在我的網站上使用下面的腳本，它剝離了所有其他表上的jQuery UI。

例如在其他表我有這個設置的頁面之一：

 $(document).ready(function() { 

     $('#mailinglistmanager').dataTable({ 

      "bJQueryUI": true, 

      "bInfo": true, 

      "bAutoWidth": true, 

      "bFilter": false, 

      "bLengthChange": true, 

      "bPaginate": true, 

      "bProcessing": true, 

      "bSort": true, 

       "sPaginationType": "full_numbers", 

       "aaSorting": [[ 6, "desc" ]], 

       "iDisplayLength": 100, 

       "bLengthChange": false 

     }); 

     }); 

    </script> 

這和其他表似乎，直到我添加下面的代碼以做工精細，那麼會發生什麼是其他表被剝離了jquery ui，只有下面定義的表被剝皮，然後所有其他表都被剝離。

  (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); 
      }); 
     }); 
    }); 

Answer 1

你jQuery選擇爲fnCreateSelect選擇在每tfoot的th元件爲每個表。由於所有其他表格明顯受到影響，因此請嘗試更改$("tfoot th")至$("#dashboard tfoot th")以僅爲該表格選擇tfoot。