使用选择菜单（DataTables）进行列过滤答案

【问题标题】：Column filtering using select menus(DataTables)使用选择菜单（DataTables）进行列过滤
【发布时间】：2012-10-26 20:23:59
【问题描述】：

美好的一天！

我正在使用 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 中得到“Cannot read property 'length' of undefined”错误：

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

为什么会这样？我试图使用一些附加组件，例如ColumnFilter 或ColumnFilterWidgets，但在这两种情况下我都遇到了一些问题。请问有什么建议吗？

【问题讨论】：

大家好。也许它对某人有用。我找到了解决方案。只需将var aData = this.fnGetData(iRow); var sValue = aData[iColumn]; 更改为sValue = $('<data>' + this.fnGetData(iRow, iColumn) + '</data>').text();

标签： asp.net-mvc-3 datatables filtering

【解决方案1】：

看起来 sValue 为空，这意味着您在 Json 中的一个字段为空。您可以粘贴完整的 Json 吗？

这类问题有一些小技巧。

为了确保非字段为空，您可以编写如下简单的内容：

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

这应该可以解决您的问题，因为值将不再为空。

【讨论】：