jQuery DataTables добавить столбец Фильтр не работает

Question

Я пытаюсь добавить фильтры столбцов в jQuery DataTables. Но не получить какой-либо выход. Я также не получаю никаких ошибок и не могу угадать, где код не работает.

библиотеки я добавил следующим образом:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://localhost/codegen/assets/js/jquery.dataTables.js" type="text/javascript"></script> 
<script src="http://localhost/codegen/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script> 

<style type="text/css"> 
    @import "http://localhost/codegen/assets/css/demo_table_jui.css"; 
    @import "http://localhost/codegen/assets/themes/smoothness/jquery-ui-1.8.4.custom.css"; 
</style> 

И Jquery код выглядит следующим образом:

$(document).ready(function(){ 
     $('#datatables').dataTable({ 
      "sPaginationType":"full_numbers", 
      "sScrollX": "100%", 
      "bScrollCollapse": true, 
      "bAutoWidth": true, 
      "aaSorting":[[0, "asc"]], 
      "bJQueryUI":true 
      // Adding the filters equal to the no of columns 
     }).columnFilter({ 
      aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
         { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] } 
       ] 
     }); 
    }) 

Может кто-нибудь сказать, что вопрос /, где я не прав? Я также не получаю никаких ошибок и не выводят.

Спасибо заранее. NC

Answer 1

Когда я смотрю на веб-сайте Datatable plugin, по этому URL-адресу (http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html), кажется довольно очевидным, что вы ошибетесь.

Вот что они делают, чтобы добавить <SELECT> выполнить фильтрацию данных по колонкам в DataTable:

(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 want 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 want 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 = $('#example').dataTable({ 
     "oLanguage": { 
      "sSearch": "Search all columns:" 
     } 
    }); 

    /* 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); 
     }); 
    }); 
});