Question

基本上我使用datatable.js和jquery.dataTables.columnFilter.js作为过滤器。

我已经在我的标记中删除了需要从表中设置的列填充的选择过滤器。但是当我加载页面时，选择下拉列表中没有任何内容。

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] => hello@whwat.com
                [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" }
    ]
});

Answer 1

初始化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 }
    ]
});

如何从2D数组填充columnFilter选择下拉列表？

1 个答案: