如何填充2D陣列的columnFilter select下拉菜單？

基本上我爲過濾器使用了datatable.js和jquery.dataTables.columnFilter.js。如何填充2D陣列的columnFilter select下拉菜單？

我已經在我的標記中下拉選擇過濾器，需要從表中設置的列填充。但是當我加載頁面時，沒有任何內容出現在選擇下拉菜單中。

var nominationData = Array 
    (
[0] => stdClass Object 
    (
     [ID] => 1 
     [Nominator] => stdClass Object 
      (
       [ID] => a1fc54f5-ebcb-4456-a6b6-705264c1e567 
       [Login] => tasdasd\asdd 
       [IsVisible] => 
       [ErrorMessage] => 
       [DisplayName] => Andrew Bridgeman 
      ) 

     [Nominee] => stdClass Object 
      (
       [ID] => 1 
       [Title] => Andrew Bridgeman 
       [FirstName] => Andrew 
       [LastName] => Bridgeman 
       [Country] => UK 
       [JobTitle] => SharePoint Architect 
       [Telephone] => 07789484848 
       [Email] => [email protected] 
       [Login] => 
       [EntryType] => Individual 
       [IsVisible] => 1 
       [dOrder] => 100 
       [ErrorMessage] => 
      ) 

     [Title] => Andrew Bridgeman 
     [NominationType] => Individual 
     [Award] => stdClass Object 
      (
       [ID] => 1 
       [Award] => Customer Award 
       [AwardType] => Individual 
       [Period] => Quarter 1 - 2014 
       [PeriodType] => Quarterly 
       [Year] => 2014 
       [ErrorMessage] => 
      ) 

     [Comment] => 
     [Answers] => QuestionID_1;#1;#This person gives extra when it comes to customer service;#_EndQuestionID_2;#4;#They aim to go beyond personal targets and business objectives;#_EndQuestionID_3;#7;#A customer was really pleased with the hibu service ;#_End 
     [ErrorMessage] => 
    ); 


$('#employees').dataTable({ 
    "bDestroy": true, 
    "sPaginationType": "full_numbers", //pagination numbers 
    "sDom": '<"filterHeader"if>rt<"filterFooter"p><"clear">', 
    "aaData": nominationData, 
    "aoColumns": [ 
     { "mDataProp": "Title" }, 
     { "mDataProp": "Nominee.JobTitle" }, 
     { "mDataProp": "Nominee.Country" }, 
     { "mDataProp": "Award.Period" } 
    ], 

    //adding a hrefs to the names for the popup overlay 
    "aoColumnDefs": [ 
     { 
      "aTargets": [0], 
      "mRender": function (nominationData, type, full) { 
       return '<a href="#emp' + full["ID"] + '" class="person">' + nominationData + '</a>'; 
      } 

     } 
    ] 
}) 
.columnFilter({ 
    "aoColumns": [ 
     { "sSelector": "#businessname", type: "text" }, 
     { "sSelector": "#sector", type: "select" }, 
     { "sSelector": "#country", type: "select" }, 
     { "sSelector": "#date", type: "select" } 
    ] 
});

來源

2014-01-22 avrosillo

不知道它在columnFilter支持來填充從表中的值，但我https://github.com/vedmack/yadcf插件不支持它，這裏的例子從展示yadcf-showcase.appspot.com/ajax_mData_source.html – Daniel

@Daniel真的很好的插件，我明白這一點。 – digz6666

歡迎您@ digz6666 – Daniel

您在初始化DataTable時沒有包含數據。 values屬性接受一維數組。您需要手動通過nominationData循環

function unique(array) { 
    return $.grep(array, function(el, index) { 
    return index == $.inArray(el, array); 
    }); 
} 

var myBizArray = [], mySectorArray = [], myCountryArray = [], myDateArray =[]; 
$.each(nominationData, index, row){ 
    myBizArray[ myBizArray.length ] = row[0]; 
    mySectorArray[ mySectorArray.length ] = row[1]; 
    myCountryArray[ myCountryArray.length ] = row[2]; 
    myDateArray[ myDateArray.length ] = row[3]; 
} 

myBizArray = unique(myBizArray); 
mySectorArray = unique(mySectorArray); 
myCountryArray = unique(myCountryArray); 
myDateArray = unique(myDateArray); 
... 

.columnFilter({ 
    "aoColumns": [ 
     { "sSelector": "#businessname", type: "text", values : myBizArray }, 
     { "sSelector": "#sector", type: "select", values : mySectorArray }, 
     { "sSelector": "#country", type: "select", values : myCountryArray }, 
     { "sSelector": "#date", type: "select", values : myDateArray } 
    ] 
});

來源

2014-01-24 20:03:36

如何填充2D陣列的columnFilter select下拉菜單？

回答

相關問題