使用選擇菜單進行列過濾（DataTables）

我使用MVC3和jQuery DataTables插件。重點是使用選擇菜單進行列過濾（進一步多選）。

這裏是我的JS，這是非常類似這樣DataTables example：

(function ($) { 
    $.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() { 
    var oTable = $('#dataTable').dataTable({ 
     "sDom": 'W<"clear">lfrtip', 
     "sAjaxSource": '@Url.Action("ResourcesWorkflowData", "LineManager")', 
     "aoColumns": [ 
    { "sTitle": "User", "mData": "User" }, 
    { "sTitle": "Region", "mData": "Region" }, 
    ] 
}); 
    /* 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); 
     }); 
    }); 
});

的問題是在我的aaData。如果我通過一個數組的數組是這樣的：

"aaData": [ 
    ['User1', 'Central'], 
    ['User2', 'Central'], 
]

一切順利，但如果我做對象的數組是這樣的：

 "aaData": [ 
    { 
     "User": "User1", 
     "Region": "Central", 
    }, 
    { 
     "User": "User2", 
     "Region": "Central", 
    } 
]

我得到「無法讀取的未定義的屬性‘長’」此行js中的錯誤：

 // ignore empty values? 
      if (bIgnoreEmpty == true && sValue.length == 0) continue;

爲什麼會發生這種情況？我試圖使用一些添加Ons，如ColumnFilter或ColumnFilterWidgets，但在兩種情況下，我都遇到了一些問題。有什麼建議嗎？

來源

2012-10-26 AlexSolovyov

大家好。也許這對某個人來說是有用的。我找到了解決方案。只需更改'var aData = this.fnGetData（iRow）; var sValue = aData [iColumn];'to'sValue = $（''+ this.fnGetData（iRow，iColumn）+''）.text（）;' – AlexSolovyov

它看起來像sValue爲null，這意味着您的Json字段之一爲null。你能粘貼你的完整Json嗎？

有這種問題的小黑客。

只是爲了確保非字段爲空，你可以寫一些簡單的像這樣：

User = SomeObject.User != null ? SomeObject.User : " ";

這應該可以解決你的問題，因爲值將不會爲空了。

來源

2013-05-17 16:49:45

使用選擇菜單進行列過濾（DataTables）

回答

相關問題