JQuery UI, разбивающий все остальные таблицы на веб-сайте

Question

Я использую скрипт jquery под названием datatables, это добавляет множество функций для ваших таблиц, таких как поиск и фильтрация и т. Д., И позволяет вам обменивать таблицы с помощью 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 выбирает th элементы в каждом tfoot для каждой таблицы. Поскольку все остальные таблицы, по-видимому, затронуты, попробуйте изменить $("tfoot th") на $("#dashboard tfoot th"), чтобы выбрать только tfoot для этой таблицы.